Обяснения:

  1. , - свойства на езика CSS, използвани за създаване на сенки.
  2. , , — параметри на свойствата на сянка.
  3. , , , - CSS свойства, отговорни за промяна на размера и местоположението на елементите.
  4. Тагът е отговорен за създаването на връзки.
  5. Селекторите са вид връзки, с които CSS определя към кои елементи да се приложат определени стилове.
  6. Hover е селектор на състояние.
  7. — свойство на промяна на анимирани обекти.

Сенките често се използват за получаване на ефекта на триизмерността. Те ви позволяват да придадете на текстове и блокове уникален стил, а в комбинация със специални шрифтове можете да получите страхотен ефект.

CSS ни предлага толкова много място за въображение и експериментиране, че ще ви отнеме години, за да ги изпробвате всички.

В тази статия ще опишем подробно създаването на сенки в CSS. В допълнение към обичайните външни сенки, ще ви покажем как да създавате вътрешни сенки и сенки на състоянието.

CSS - кутия сянка. свойство box-shadow


html(фон: #fff; ) тяло(ширина: 80%; поле: 0 автоматично; цвят на фона: rgba(150,60,60,0.54) сянка на полето: -1px 5px 5px 5px rgba(77,63,63) ,0,88) )

Инструментът ни позволява да създадем една или повече сенки около блока с произволен цвят.

По принцип какво е сянка? Това е точно копие на площта на елемента, която има определен цвят и позиция. Тези опции могат да бъдат зададени с помощта на свойството box-shadow.

Свойствата на сянка се използват в този ред:

  1. Движете се хоризонтално.
  2. Движете се вертикално.
  3. Ниво на замъгляване.
  4. Разтягане.
  5. Цвят на сянката.

Именно в този ред трябва да посочите параметрите на сянката. Основното нещо е да не бъркате стойността, тъй като първите 4 са зададени по същия начин, като се използват цифрови стойности - , , и така нататък.

Първият параметър, който се нарича - измества сянката хоризонтално спрямо блока. Приема всякакви стойности, включително отрицателни.

Отрицателните стойности преместват сянката наляво, докато положителните стойности я преместват надясно. Стойността на параметъра може да бъде равна на 0, когато сенките са замъглени по вертикалната ос.

Следващият по ред е имотът . Отговаря за вертикалното преместване на сянката. Той също така приема всякакви стойности - положителни и отрицателни. Отрицателните стойности преместват сянката нагоре, докато положителните стойности я преместват надолу.

Параметърът може да бъде зададен на 0. Обикновено се използва за хоризонтално размазване на сенки.

внимание! Съветваме ви да посочите стойността в пиксели. Можете да използвате други стойности - , , % и други, но това не се препоръчва. Всички тези стойности са доста големи за създаване на сенки. Като ги посочите, можете да прекалите с размерите.

3 стойност - или размазване. Не е необходимо да въвеждате тази стойност, без да я посочвате, сенките пак ще работят.

Дадената стойност определя радиуса, по който сянката ще бъде замъглена. Отрицателните стойности не са посочени.

Тук могат да се използват и по-големи стойности. Силното замъгляване ще помогне за създаването на цветен ефект, но само в някои ситуации.

Предпоследната стойност, която отговаря за разтягането на сянката. Също така не е задължително, но може да добави цвят към сянката ви.

Разширяването се дължи на разтягането на централната плътна част на сянката, която се намира между размазаните ръбове.

Този параметър приема всякакви стойности, както положителни, така и отрицателни. Положителните стойности разтягат сянката, докато отрицателните стойности я свиват.

И последният параметър е . Също така не е задължително да се посочи, тъй като по подразбиране блоковата сянка има свой собствен цвят - черен.

За промяна на цвета е подходяща всяка цветова система - както и стандартните цветове.

внимание! Ако искате свойството да работи в Safari, тази настройка трябва да бъде зададена, дори ако използвате черния цвят по подразбиране.

Вътрешна сянка - CSS


html(фон: #fff; ) тяло(ширина: 80%; поле: 0 автоматично; цвят на фона: rgba(150,60,60,0.54) сянка на полето: -1px 5px 5px 5px rgba(77,63,63) ,0,88) вметка; )

Така че, нека да разгледаме първия пример за прилагане на сенки. Тук ще разгледаме създаването на вътрешна сянка за блока на тялото.

За да започнете, отворете нашия HTML документ и го попълнете. Не можете да задавате никакви тагове, не попълвайте съдържанието, основното е да създадете таг .

Отворете нашия CSS документ, напишете етикета , той ще бъде основният ни селектор.

След това отворете фигурните скоби и напишете свойството . Задайте местоположението, размажете, разтегнете. Вече знаете как да зададете тези стойности. След това зададохме цвета на сянката, направихме я бяла, но вие можете да я настроите по ваш вкус.

Сега най-важното. За да създадете сянка на вътрешна кутия в CSS, трябва да зададете вмъкната стойност. Можете да го посочите веднага след дефинирането на цвета.

В резултат на това получихме следния блок:

HTML/CSS - текстова сянка


html(фон: #fff; ) тяло(ширина: 80%; поле: 0 автоматично; цвят на фона: rgba(150,60,60,0.54) сянка на полето: -1px 5px 5px 5px rgba(77,63,63) ,0.88) inset; ) div( margin: 150px; box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88); font-size: 25px; )

Създава се по подобен начин, но вместо box-shadow се използва свойството . Параметрите на собствеността са в следния ред.

  1. Хоризонтално изместване.
  2. Вертикално изместване.
  3. Радиус на замъгляване. Не е задължително.
  4. Цвят.

Както можете да видите, в това свойство няма параметър за разтягане. Размерът на сянката винаги ще бъде идентичен с размера на текста, няма начин да се коригира това.

Много е удобно да налагате сенки един върху друг. За да направите това, трябва да посочите няколко групи параметри.

Първата сянка ще бъде поставена по-близо до текста, а втората над него. Подобно на работата със свойствата на контура и границата, но тук можете да създадете 2, 3 или повече сенки.

Hover Shadows - CSS

Сега нека да разгледаме създаването на сенки за конкретно състояние. В нашия пример ще се използва бутон.

За да създадете сянка за бутон, първо трябва да го поставите. Отваряме тага a, записваме класа на бутона за него и произволна текстова стойност за по-добро показване.

Първо, нека зададем разположението с помощта на свойството margin и да увеличим бутона до определен размер. За да го увеличите, можете да използвате свойствата width и height или можете да използвате свойството padding.

Сега задаваме цвета на фона, текста и рамката. Нашият бутон е готов, нека започнем да създаваме сянката.

Първо, нека създадем обикновена сянка, малка по размер, използвайки box-shadow. Ще се вижда по подразбиране, без да задържате курсора на мишката над бутона.


Нека направим най-простия ефект - увеличаване на сянката. Можете да го направите размазан или да промените разтягането по ваш вкус.

За най-добър ефект задайте свойството за преход за нормална връзка, задайте времето на 0,5 s.

Сега имаме хубав бутон с хубава сянка, която ще се разширява плавно при задържане.


Заключение

В тази статия се запознахме с всички основни начини за създаване на сенки. Ние сме анализирали всички свойства и параметри на сенките.

Можете да намерите всички елементи, които бяха представени в екранните снимки в папката източник. Ако искате, можете да ги проучите сами и да експериментирате със стойностите. Може би ще се справите много по-добре от нас.

Сянка под елемент на ниво блок на страница обикновено се използва за създаване на триизмерен ефект, привличане на вниманието към елемент или като част от дизайн. Малка сянка под елементите също придава обем и дълбочина на страницата.

За добавяне на сянка се използва свойството box-shadow, което има шест стойности, от които са задължителни само две. На фиг. Фигура 1 показва свойството box-shadow с всички възможни стойности, номерирани за идентифицирането им.

Ориз. 1. Стойности на свойството box-shadow

  1. ключовата дума inset задава сянката вътре в елемента;
  2. изместване на сянката хоризонтално (5px - надясно, -5px - наляво);
  3. вертикално изместване (5px - надолу, -5px - нагоре);
  4. радиус на размазване на сянка (0 - рязка сянка);
  5. разтягане на сянка (5px - разтягане, -5px - свиване);
  6. цвят на сянка.

Не забравяйте да посочите само хоризонталното и вертикалното изместване, всички други параметри ще бъдат взети по подразбиране. В този случай сянката ще бъде остра, без размазване и черно.

Благодарение на комбинациите от различни параметри и техните стойности може да се получи голямо разнообразие от видове сенки. В табл. 1 показва кода и резултата, до който води.

Раздел. 1. Комбинации от параметри на сянка
Кодът Резултат Описание
кутия-сянка: 5px 5px; Остра сянка отдясно и отдолу.
кутия-сянка: -5px -5px; Остра сянка отляво и отгоре.
кутия-сянка: 0 0 5px Замъглена сянка около елемента.
кутия-сянка: 0 0 5px 2px; Разширяване на сянката с 2 пиксела.
кутия-сянка: 0 0 5px 2px червено; Червено сияние около елемента.
кутия-сянка: 0.4em 0.4em 5px rgba(122,122,122,0.5); Полупрозрачна сянка.
box-shadow: вмъкване 0 0 6px; Сянка отвътре.

Както можете да видите от таблицата, изместването на сенките не трябва да се определя в пиксели, въпреки че това е удобно. Цветът на сянката може да бъде зададен във всеки наличен формат, например, за да получите полупрозрачна сянка, форматът RGBA е подходящ, такава сянка ще изглежда добре на всеки фон. Пример 1 показва как да направите това.

Пример 1: Сянка върху фоново изображение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Блок със сянка

Не тръгвайте срещу знамената на врага, когато са в идеален ред; да не атакува лагера на врага, когато той е непревземаем; това е управление на промяната.

Сун Дзъ, прев. Никълъс Конрад

Резултатът от този пример е показан на фиг. 2. Сянката повтаря закръгляването на ъглите на блока.

Ориз. 2. Изглед на сянката върху фоновото изображение

Когато добавяте „широка“ сянка, имайте предвид, че тя може да се простира отвъд видимия прозорец на браузъра и по този начин да доведе до хоризонтална лента за превъртане.

Сянка може да се добави и към псевдоелементи, това понякога се изисква за сложно оформление. На фиг. 3 показва блок със заглавие, към което е добавена сянка. За да няма линии на кръстовището, трябва да използвате псевдоелемента ::after и да добавите сянка към него.

Ориз. 3. Блокирайте със сянка

Пример 2 показва създаването на такъв блок.

Пример 2. Кутия със сянка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Блок със сянка

заглавка

Блокиране на съдържание

Един елемент може да има не една сянка, а няколко наведнъж, техните параметри са изброени разделени със запетаи в стойността на свойството box-shadow. Пример 3 показва как да добавите двойна сянка към всички изображения.

Пример 2. Кутия със сянка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Образ

Резултатът от този пример е показан на фиг. четири.

Ориз. 4. Изображение с двойна сянка

Първата сянка се изобразява отляво на изображението с радиус на размазване от 20px, намален по размер с четвъртия параметър (-20px). Параметрите на втората сянка са посочени след запетаята, сянката се показва вдясно от картината и също е намалена за симетрия.

С появата на стандарта CSS 3въведено е свойството box-shadow, което стана широко използвано сред уеб разработчиците, тъй като улеснява добавянето на една или повече сенки към поле на елемент, за да се получи желаният визуален ефект.

В предишната статия разгледахме свойството border-radius, използвайки го, можете да получите сянка заоблени ъгли. По аналогия с текстова сянка (text-shadow), можете да създадете множество сенки, върху които се прилагат z-осотпред назад (с първата сянка, дадена отгоре).

Нека разгледаме по-подробно синтаксиса на това модерно свойство:


Разгледайте по ред възможни стойноститози имот:

ЗначениеОписание
нито единСянката не се показва. Това е стойността по подразбиране.
вмъкванеСтойност по избор.Ако тази стойност не е посочена (по подразбиране), тогава сянката ще бъде от външната страна на елемента и ще създаде ефекта на издутина на елемента. С ключовата дума (стойност) inset сянката ще падне вътре в елемента и ще създаде ефект на отстъп. С други думи, това е промяна от външна сянка към вътрешна.
h-сянкаЗадължителна стойност.Указва местоположението на хоризонталната сянка. Отрицателните стойности са разрешени.
v-сянкаЗадължителна стойност.Указва местоположението на вертикалната сянка. Отрицателните стойности са разрешени.
радиус на размазванеСтойност по избор.Задава радиуса на замъгляване. Колкото по-голяма е тази стойност, толкова по-голямо е размазването, докато сянката става по-голяма и по-светла. Ако стойността не е зададена, тогава стойността ще бъде 0 (остри - отчетливи сенки). Отрицателните стойности не са разрешени.
радиус на разпространениеСтойност по избор.Размерът на сянката (радиусът за разтягане на сянката). Положителните стойности ще разширят сянката, докато отрицателните стойности ще я свият. Ако стойността не е зададена, тогава стойността ще бъде 0 (сянката съответства на размера на елемента).
цвятСтойност по избор.Указва цвета на сенките (HEX, RGB, RGBA, HSL, HSLA, „Предварително зададени цветове“). Стойността по подразбиране е черно.

Основните точки, които трябва да разберете, за да създадете сенки на елементи, са:

Искам да обърна внимание на факта, че свойството box-shadow в момента се поддържа от всички съвременни браузъри:

Имот
Опера
IExplorer
ръб, край
кутия сянка10.0
4.0
-webkit-		4.0
3.5
-moz-		10.5 5.1
3.1
-webkit-		9.0 12.0

Ако искате да разширите поддръжката за някои браузъри, включително мобилни IOS 3.2 - 4.3и Android 2.1 - 3, тогава се препоръчва да използвате префикси на производителя и да използвате следния синтаксис (в примерите на статията ще се използва само синтаксисът за съвременните браузъри):

-webkit-box-shadow: стойност; /* Safari 3.1 - 4, IOS 3.2 - 4.3 и Android 2.1 - 3 */-moz-box-shadow: стойност; /* Firefox 3.5 - 3.6 */ box-shadow: стойност; /* таблицата по-горе */

Нека да преминем към практиката и да започнем с това прост пример, в който добавяме една сянка към елементите:

Пример за използване на свойството box-shadow в CSS
box-shadow:10px 10px 0px червено;
class="test2"> box-shadow:10px 10px 10px #777;

Резултатът от нашия пример:

Използване на множество сенки

В следващия пример помислете интересен ефектсмесване на цветове, което може да се получи при използване на множество сенки:

Пример за използване на множество сенки в CSS (свойство box-shadow)
  • двеблокове с фиксирана ширина и височина (15em и 10em), добавена подложка към всички страни (2em) и задаване на кутии, които да бъдат вградени, за да могат да се подреждат.
  • За първиблок с клас .тестние посочихме четирисенки с различни хоризонтални и вертикални стойности на сенки, така че елементът да има различни сенки от всички страни. Радиусът на замъгляване за всички сенки е зададен на едно. Цветът на всяка сянка е различен и се задава с помощта на предварително зададени цветове.
  • За второблок с клас .test2ние посочихме четирисенки с различни хоризонтални и вертикални стойности на сенки. Радиусът на размазване за всички сенки беше зададен на едно, като разтягането на сянката беше зададено на отрицателно, което накара самата сянка да се свие. Цветът на всяка сянка е различен и се определя с помощта на системата RGBA.

Резултатът от нашия пример:

Използване на сенки за изображения

Последният пример на тази статия ще се фокусира върху използването на сенки за изображения. Веднага искам да насоча вниманието ви към факта, че директно определяте сянката за HTML елемент няма да работи, но имаме възможност да посочим изображението като фон за елемента, който ни интересува, и вече към този елемент да зададем сянката, от която се нуждаем.

Ще разгледаме подробно работата с фонови изображения в обучителната статия „ “, но сега, за да сложим край на изучаването на използването на сенки, ще се докоснем повърхностно до него и ще използваме изображение като фон на елемент в следния пример:

Пример за използване на сенки за изображения в CSS
  • двеблокове с фиксирана ширина и височина (237px и 232px), добавена подложка към всички страни (2em) и задаване на полета, за да бъдат вградени, за да могат да се подреждат. Ние задаваме размера на блока от 237px на 232px, за да съответства на размера на изображението, така че на този етап от обучението да не се налага да мащабираме изображението, за да пасне на елемента и да повлияем на тези CSS свойства, които са планирани да бъдат изучавани на по-късен етап (в статията на урока "").
  • За първиблок с клас .тестние посочихме нулева стойностхоризонтални и вертикални сенки, но зададохме радиуса на размазване на 50px и го разширихме, като зададохме радиуса на разтягане на 10px. Цветът на сянката беше зададен с предварително зададен цвят (виолетов). Освен това сме посочили в обявата ключова дума inset , карайки сянката да падне вътре в елемента. С други думи, създадохме вътрешната сянка на елемента.
  • За второблок с клас .test2задали сме хоризонталните и вертикалните сенки на нула, но сме задали радиуса на размазване на 50px и сме го разширили с радиус на разтягане от 10px. Цвят на сенките, зададен в режим RGBA.

Резултатът от нашия пример:

Ориз. 98 Пример за сянка на CSS изображение (свойство box-shadow)

Въпроси и задачи по темата

Преди да преминете към следващата тема, изпълнете практическата задача:


Ако се затруднявате да направите практическа задача, Винаги можете да отворите примера в отделен прозорец и да прегледате страницата, за да видите какъв CSS е използван.


2016-2020 Денис Болшаков, можете да изпращате коментари и предложения в сайта на [email protected]

Типографията е любимата играчка на уеб дизайнерите. CSS има един много интересен инструмент в състава си - текстова сянка(текстова сянка), което на пръв поглед изглежда достатъчно просто, но може да се използва за създаване на запомнящи се ефекти, ако използвате изобретателност и въображение.

Основи на сенките

Имот текстова сянкамного лесен за използване. Поддържа се от всички съвременни браузъри и дори без използването на префикси. Но няма поддръжка в IE (дори IE9). Можете да използвате инструменти като Modernizr, за да помогнете за извличането на CSS3 ефекти дори в по-стари версии на IE.

Синтаксис

Синтаксисът на свойствата се използва за създаване на текстова сянка текстова сянка, което е показано по-долу. Трябва да се дефинират четири параметъра: първите два задават позицията на сянката, третият задава нивото на размазване, а четвъртият определя цвета на сянката.

Text-shadow: horizontal_offset vertical_offset цвят на размазване;

По-долу е даден пример за текстова сянка, която е изместена с два пиксела надолу и четири пиксела надясно, замъглена с три пиксела и черна при 30% непрозрачност.

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Резултатът от използването на това свойство ще изглежда така:

Защо се използва rgba?

Не е нужно да използвате rgba, за да зададете цвета на сянката, когато дефинирате свойството. Rgba обаче добавя още едно измерение към дефиницията на сянка - нивото на прозрачност.

Този метод е много по-прост от другите методи за определяне на цвета. Не е нужно да се фокусирате върху определянето на нюанса на цвета на сянката, който може да бъде само малко по-тъмен или по-светъл от цвета на фона. С rgba можете просто да използвате бели или черни цветове и да увеличите тяхната непрозрачност, за да постигнете желания фонов нюанс при смесване на цветове.

Ползване на имота текстова сянкаможете да създавате различни ефекти за текст, без да се ограничавате до обикновени падащи сенки. Например, тук е кодът за създаване на илюзията за текст с отстъп.

Първо трябва да зададете цвета на текста малко по-тъмен от цвета на фона. И тогава трябва да използвате имота текстова сянкас бял цвят и повишена прозрачност.

Цветът на фона е #222, а цветът на текста има непрозрачност от 60%. Бялата сянка е разположена леко надолу и вдясно с непрозрачност от 10%.

Тяло (фон: #222;) #текст h1 (цвят: rgba(0,0,0,0.6); сянка на текста: 2px 2px 3px rgba(255,255,255,0.1); )

Изобщо не е необходимо да размазвате сянката. Ясна сянка може да се съчетае добре с дизайна на сайта.

Текстова сянка: 6px 6px 0px rgba(0,0,0,0.2);

Истинското забавление започва, когато отхвърлите ограничението да имате само една сянка. Като използвате запетая за разделяне на дефиниции, можете да използвате толкова сенки, колкото искате!

Text-shadow: shadow1, shadow2, shadow3;

Ето пример с две сенки. Първият има същия цвят като фона.

Текстова сянка: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Придвижване на голямо разстояние

След като овладеете използването на множество сенки, резултатът ще става все по-изразителен. Много е лесно да създадете 3D ефект за текст.

Примерът използва четири сенки, всички изместени надолу на различни разстояния и замъглени.

Текстова сянка: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1) );

Преместване надолу на малко разстояние и силно замъгляване

Ето още една реализация на същата идея. Трите сенки се преместват на по-малко разстояние и са по-замъглени.

Текстова сянка: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

3D текст от Марк Дото

Ефектът се използва на MarkDotto.com. Той използва 12 различни сенки, за да създаде страхотен 3D ефект.

Текстова сянка: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Релефен текст от Гордън Хол

Забележете, че в примера по-горе нарекох моята техника „бърз и мръсен“ ефект на висок печат. Това е така, защото има много по-сложен начин за създаване на сериозно вмъкнат текст, който е много по-правдоподобен.

Гордън използва сериозно CSS вуду, за да издърпа изключен несамо външна сянка, но и истинска вътрешна сянка. Вижте публикацията в неговия блог за пълно обяснение на техниката.

цвят на фона: #666666; -webkit-background-clip:текст; -moz-background-clip:текст; фонов клип: текст; цвят: прозрачен текстова сянка: rgba(255,255,255,0.5) 0px 3px 3px;

светят

Текстова сянка: 0px 0px 6px rgba(255,255,255,0.7);

Текстова сянка: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Множество източници на светлина

Текстова сянка: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Цвят: rgba(0,0,0,0.6); текстова сянка: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Заключение

Като повечето css ефекти, сенките са много лесни за изпълнение. Но комбинация от прости действия може да доведе до невероятни ефекти.

Здравейте скъпи читатели. Днес ще направим хубава сянка за блоковете CSS помощ . Мисля, че това ще ви бъде много полезно, особено ако правите шаблони. А блоковете със сянка изглеждат много привлекателни и модерни.

Поддръжка на браузър

Общо взето всичко модерни браузъриподдръжка на ефекти на сенки:

  • Internet Explorer 9.0 и по-нова версия;
  • Firefox 3.5 и по-нова версия;
  • Chrome 1 и по-нова версия;
  • Safari 3 и по-нова версия;
  • Opera 10.5 и по-нова версия.

Бих искал също да спомена един не маловажен момент: за някои браузъри ще използваме някои префикси. За Firefox се използва -moz-, за Chrome и Safari трябва да използвате префикса -webkit.

Сега да преминем към най-интересната част. Нека разгледаме всички сенки поотделно, ще има 8 ефекта.

ефект на сянка 1

AT този примерсянката на блока е в долната част.

HTML

Ефект 1

css

подравняване на текст: център; позиция: роднина; отгоре:80px; ) .box (ширина:70%; височина:200px; фон:#FFF; margin:40px автоматично; ) /*======================= = ========================== * Ефект 1 * ======================= ===========================*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )

ефект на сянка 2

В този пример сянката от блока върви отляво и отдясно, но няма такава в средата. Оказва се много интересен ефект.

HTML

Ефект 2

css

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================= * Ефект 2 * == = ==========================================*/ .effect2 ( позиция: относителна ;). 300px; фон: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: завъртане( -3deg); -moz-трансформация: завъртане (-3deg); -o-трансформация: завъртане (-3deg); -ms-трансформация: завъртане (-3deg); трансформация: завъртане (-3deg); ) . effect2:after ( -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) ; дясно: 10px; ляво: автоматично; )

ефект на сянка 3

Тук сянката на блока е само отляво.

HTML

Ефект 3

css

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================= * Ефект 3 * == = ==========================================*/ .effect3 ( позиция: относителна ;). 777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); - moz-transform: завъртане (-3deg); -o-transform: завъртане (-3deg); -ms-transform: завъртане (-3deg); трансформиране: завъртане (-3deg); )

ефект на сянка 4

Сянка вдясно.

HTML

Ефект 4

css

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================= * Ефект 4 * == = ==========================================*/ .effect4 ( позиция: относителна ;). ; фон: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg ); -moz-трансформация: завъртане (3deg); -o-трансформация: завъртане (3deg); -ms-трансформация: завъртане (3deg); трансформация: завъртане (3deg); )

Ефект на сянка 5

В този случай сянката от двете страни се премести надолу по-силно.

HTML

Ефект 5

css

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================= * Ефект 5 * == = ==========================================*/ .effect5 ( позиция: относителна ;). 300px; фон: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: завъртане( -8deg); -moz-трансформация: завъртане (-8deg); -o-трансформация: завъртане (-8deg); -ms-трансформация: завъртане (-8deg); трансформация: завъртане (-8deg); ) . effect5:after ( -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg) ; дясно: 10px; ляво: автоматично; )

ефект на сянка 6

Ето ефекта на извитите сенки в долната част на блока.

HTML

Ефект 6

css

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================= * Ефект 6 * == = ===========================================*/ .effect6 ( позиция: относителна ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) вмъкване; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) вмъкване; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) вмъкване; ) .effect6:before, .effect6:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0 ,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); отгоре:50%; отдолу: 0; ляво:10px; дясно:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect6:after (right:10px; left:auto; -webkit-transform :skew( 8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) завъртане (3 градуса); -o-трансформиране: изкривяване (8 градуса) завъртане (3 градуса); трансформиране: изкривяване (8 градуса) завъртане (3 градуса); )

Ефект на сянка 7

Същият ефект е само сянка в горната и долната част на блока.

HTML

Ефект 7

css

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================= * Ефект 7 * == = ===========================================*/ .effect7 ( позиция: относителна ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) вмъкване; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) вмъкване; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) вмъкване; ) .effect7:before, .effect7:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0 ,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0 ; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after (right:10px; left:auto; -webkit-transform: skew(8deg) ) завъртане (3 градуса); -moz-трансформация: изкривяване (8 градуса) завъртане (3 градуса); -ms-трансформиране: изкривяване (8 градуса) r отат (3 градуса); -o-трансформиране: изкривяване (8 градуса) завъртане (3 градуса); трансформиране: изкривяване (8 градуса) завъртане (3 градуса); )

Ефект на сянка 8

Ефектът на извитите сенки отстрани на блока.

HTML

Ефект 8

css

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================= * Ефект 8 * == = ===========================================*/ .effect8 ( позиция: относителна ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) вмъкване; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) вмъкване; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) вмъкване; ) .effect8:before, .effect8:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0 ,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px ; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after (right:10px; left:auto; -webkit-transform: skew(8deg) ) завъртане (3 градуса); -moz-трансформация: изкривяване (8 градуса) завъртане (3 градуса); -ms-трансформиране: изкривяване (8 градуса) r отат (3 градуса); -o-трансформиране: изкривяване (8 градуса) завъртане (3 градуса); трансформиране: изкривяване (8 градуса) завъртане (3 градуса); )

Това е всичко скъпи приятели. Ако не разбирате нещо, не забравяйте да попитате в коментарите. Ще се видим скоро.