Css плоскі тінь. Внутрішні тіні у CSS. Зміщення вниз на невелику відстань та сильне розмиття

Здрастуйте, дорогі читачі. Сьогодні ми з Вами робитимемо красиву тінь для блоків при допомоги CSS . Я думаю, що це дуже стане Вам у нагоді, тим більше якщо Ви робите шаблони. А блоки з тінню виглядають дуже привабливо та сучасно.

Підтримка браузерів

В основному всі сучасні браузери підтримують ефекти тіні:

Internet Explorer 9.0 та вище;
Firefox 3.5 та вище;
Chrome 1 та вище;
Safari 3 та вище;
Opera 10.5 та вище.

Ще хотілося б згадати один важливий момент: для деяких браузерів ми будемо використовувати деякі префікси. Firefox використовується -moz-, для Chrome та Safari потрібно використовувати префікс -webkit.

Ну а зараз переходимо до найцікавішої частини. Розгляньмо всі тіні окремо, ефектів буде 8.

Ефект тіні 1

У даному прикладітінь від блоку знаходиться знизу.

HTML

Ефект 1

CSS

text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*======================== ========================== * Effect 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; ) /*====== ============================================ * Effect 2 * == =============================================*/ .effect2 ( position: relative; ) .effect2:before, .effect2:after ( z-index: -1; position: absolute; content: ""; -width:300px;background: #777;-webkit-box-shadow: 0 15px 10px #777;-moz-box-shadow: 0 15px 10px #777; : rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); effect2:after ( -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) right: 10px; left: auto;

Ефект тіні 3

Тут тінь від блоку лише ліворуч.

HTML

Ефект 3

CSS

Ефект тіні 4

Тінь праворуч.

HTML

Ефект 4

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Effect 4 * == =============================================*/ .effect4 ( position: relative; ) .effect4:after ( z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; width:300px;background: #777;-webkit-box-shadow: 0 15px 10px #777;-moz-box-shadow: 0 15px 10px #777; rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg);

Ефект тіні 5

В даному випадку тінь із двох сторін сильніше зрушила вниз.

HTML

Ефект 5

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Effect 5 * == =============================================*/ .effect5 ( position: relative; ) .effect5:before, .effect5:after ( z-index: -1; position: absolute; content: ""; -width:300px;background: #777;-webkit-box-shadow: 0 35px 20px #777;-moz-box-shadow: 0 35px 20px #777; : rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); effect5:after ( -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg) right: 10px; left: auto;

Ефект тіні 6

Тут ефект вигнутих тіней на дні блоку.

HTML

Ефект 6

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Effect 6 * == =============================================*/ .effect6 ( position:relative; rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; , 0, 0, 0.1) inset; ) .effect6:before, .effect6:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 0,0,0.8);-moz-box-shadow:0 0 20px rgba(0,0,0,0.8); : bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; :skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg);-ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )

Ефект тіні 7

Такий самий ефект тільки тінь знизу та зверху блоку.

HTML

Ефект 7

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Effect 7 * == =============================================*/ .effect7 ( position:relative; rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; , 0, 0, 0.1) inset; ) .effect7:before, .effect7:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 0,0,0.8);-moz-box-shadow:0 0 20px rgba(0,0,0,0.8); bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )

Ефект тіні 8

Ефект вигнутих тіней з обох боків блоку.

HTML

Ефект 8

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Effect 8 * == =============================================*/ .effect8 ( position:relative; rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; , 0, 0, 0.1) inset; ) .effect8:before, .effect8:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 0,0,0.8);-moz-box-shadow:0 0 20px rgba(0,0,0,0.8); bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )

Ось і всі дорогі друзі. Якщо Вам щось буде не зрозуміло, обов'язково запитуйте в коментарях. До скорої зустрічі.

Ви можете додавати до елементів тінь та змінювати її зовнішній виглядза допомогою CSS-властивості box-shadow. Цей стиль дозволяє втілити в життя цікаві ефекти, наприклад, об'ємність та тривимірність блоку. Властивість підтримується всіма сучасними браузерами. Виняток становлять IE8 та Opera Mini.

Властивість box-shadow: синтаксис

Цей стиль записується так:

Box-shadow: inset 4px 4px 8px 5px #333333;

Розглянемо по порядку, за що відповідає кожен параметр (зліва направо):

Ключове слово inset: параметр, який необов'язково вказувати; малює тінь всерединіелемент.
Зсув по осі X: вказує ступінь усунення тіні по горизонталі щодо елемента. Позитивне значення означає зсув праворуч, негативне - ліворуч. Значення 0 означає, що тінь без зсуву.
Зсув по осі Y: вказує ступінь усунення тіні по вертикалі. Позитивне значення означає зсув донизу, негативне - вгору. Значення 0 – це тінь без зсуву.
Радіус розмиття: це ступінь розмиття тіні Чим більше значення, тим більша розмита тінь. Якщо параметр не вказано, використовується стандартне значення - 0 . У такому разі тінь буде ідеально чіткою.
Розширення: необов'язковий параметр, що відповідає за розтягнення тіні по обох осях; що більше значення, то більше вписувалося розтягування. Розширення працює лише за наявності попереднього параметра. Значення за промовчанням - 0 .
Колір тіні: з цим параметром все зрозуміло - він задає колір тіні елемента За замовчуванням колір - чорний.

Примітка. Браузерам Androidі більш старим версіям iPhone Safari вимагає префікс -webkit- для коректної роботи CSS властивості box-shadow.

Ця властивістьможе набувати кілька груп значень (робити кілька тіней одночасно). Для цього знадобиться перерахувати ці групи параметрів через кому. Наприклад:

Box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;

Приклади box-shadow

Щоб ви краще зрозуміли всю силу та красу властивості CSS box-shadow, ми покажемо кілька прикладів, які можна сміливо застосовувати практично. Ця властивість здатна сильно перетворити звичайний блок!

Легка тінь

Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Ефект паперу

Box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0 .6), inset 0 0 40px rgba(0, 0, 0, .1);

Декілька шарів

Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Потрійна рамка

Box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 17)

Куточки

Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Як бачите, властивість box-shadow надає величезне поле фантазії. Ви можете перетворювати блоки як завгодно – головне, мати почуття міри! 😉

У наступному розділі на вас чекає вивчення властивостей width і height, що визначають розміри елементів.

Пояснення:

, — властивості мови CSS, що використовуються для створення тіней.
, , - Параметри якості тіней.
, , , - властивості CSS, відповідають за зміну розмірів та розташування елементів.
- Тег, відповідає за створення посилань.

Селектори - свого роду посилання, за допомогою яких CSS визначає, до яких саме елементів потрібно застосовувати ті чи інші стилі.

Hover – селектор стану.

- Властивість анімованої зміни об'єкта.

Тіні часто використовуються для отримання ефекту об'ємності. Вони дозволяють надати текстам і блокам унікального стилю, а в поєднанні з особливими шрифтами, може вийти відмінний ефект.

CSS пропонує нам стільки простору для фантазії та експериментів, що вам знадобляться роки для того, щоб випробувати їх усі.

У цій статті ми докладно опишемо створення тіней у CSS. Окрім звичайних зовнішніх тіней, ми покажемо як створювати внутрішні тіні та тіні стану.

CSS – тінь блоку. Властивість box-shadow

html( background: #fff; ) body( width: 80%; margin: 0 auto; background-color: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0.88) )

html (

background: #fff;

body (

width: 80%;

margin: 0 auto;

box-shadow : -1px 5px 5px 5px rgba (77,63,63,0.88 )

Інструмент дозволяє нам створити одну або кілька тіней навколо блоку з будь-яким кольором.

Що таке тінь? Це точна копіяплощі елемента, яка має певний колір та розташування. Ці параметри можна встановити за допомогою властивості box-shadow.

Властивості тіні використовуються в такому порядку:

Переміщення по горизонталі.
Переміщення по вертикалі.
Рівень розпливчастості.
Розтягування.
Колір тіні.

Саме у такому порядку потрібно вказувати параметри тіні. Головне, не переплутати значення, тому що перші 4 задаються однаково, за допомогою числових значень , , і так далі.

Перший параметр, який називається - Зміщує тінь по горизонталі щодо блоку. Приймає будь-які значення, включаючи негативні.

Негативні значення зміщують тінь вліво, а позитивні вправо. Значення параметра може бути 0 при розмитті тіней по вертикальній осі.

Далі по порядку йде властивість . Відповідає за рух тіні по вертикалі. Теж набуває будь-яких значень — позитивних і негативних. Негативні значення зміщують тінь вгору, а позитивні вниз.

Параметру може бути надано значення 0. Зазвичай використовується при горизонтальному розмитті тіней.

Увага! Радимо вказувати значення у пікселях. Можете використовувати й інші значення , ,% та інші, але робити це не рекомендується. Всі ці величини досить великі для створення тіней. Вказавши їх можна перебрати з розмірами.

3 значення - чи розмиття. Це значеннявводити не обов'язково, без його вказівки тіні все одно працюватимуть.

Задане значення визначає радіус, яким буде розмиватись тінь. Негативні значення не вказуються.

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

Передостаннє значення відповідає за розтягнення тіні. Воно також є необов'язковим, але може підвищити яскравість вашої тіні.

Розширення відбувається за рахунок розтягування центральної суцільної частини тіні, що знаходиться між розмитими краями.

Цей параметр приймає будь-які значення, як позитивні, і негативні. Позитивні значення розтягують тінь, а негативні, навпаки, зменшують.

І останній параметр - . Його також необов'язково вказувати, оскільки за замовчуванням тінь блоку має власний колір – чорний.

Для зміни кольору підійде будь-яка система кольорів — , а також стандартні кольори.

Увага! Якщо ви хочете, щоб властивість працювала в Safari, цей параметр повинен бути вказаний, навіть якщо ви використовуєте стандартний чорний колір.

Внутрішня тінь - CSS

html( background: #fff; ) body( width: 80%; margin: 0 auto; background-color: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0.88) inset;

html (
background: #fff;
body (
width: 80%;
margin: 0 auto;
background-color : rgba (150,60,60,0.54 )
box-shadow : -1px 5px 5px 5px rgba (77,63,63,0.88) inset;

Отже, розглянемо перший приклад застосування тіней. Тут ми розглядатимемо створення внутрішньої тіні для блоку body.

Для початку відкрийте наш HTML документта заповніть його. Можете не вказувати теги, не заповнювати контент, головне створіть тег .

Відкриваємо наш CSS документ, записуємо тег Він буде нашим основним селектором.

Далі відкриваємо фігурні дужкиі записуємо властивість . Задаємо розташування, розмиття, розтяг. Як задавати ці значення ви знаєте. Після цього задаємо колір тіні, ми зробили білий, але ви можете поставити на свій смак.

Тепер найголовніше. Щоб створити внутрішню тінь блоку в CSS потрібно прописати значення inset. Можете вказати його одразу після визначення кольору.

У результаті, у нас вийшов такий блок:

HTML/CSS — тінь тексту

html( background: #fff; ) body( width: 80%; margin: 0 auto; background-color: rgba(150,60,60,0.54) box-shadow: -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; )

html (
background: #fff;
body (
width: 80%;
margin: 0 auto;
background-color : rgba (150,60,60,0.54 )
5px rgba (77,63,63,0.88);
font-size: 25px;

Створюється схожим чином, але замість box-shadow використовується властивість . Параметри якості йдуть у порядку.

Зсув по горизонталі.

Зсув по вертикалі.

Радіус розмиття. Не обов'язково.

Колір.

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

Дуже зручно накладати тіні один на одного. Для цього потрібно перерахувати декілька груп параметрів

Перша тінь розташовуватиметься ближче до тексту, а друга вище її. Нагадує роботу з властивостями outline та border, але тут можна створювати і 2, 3 і більше тіней.

Тіні при наведенні - CSS

Тепер розглянемо створення тіней для певного стану. У прикладі буде використовуватися кнопка.

Щоб створити тінь для кнопки, її для початку потрібно розмістити. Відкриваємо тег a, записуємо для нього клас button та будь-яке текстове значення, для кращого відображення.

Спочатку поставимо розміщення, за допомогою якості margin і збільшимо кнопку до певних розмірів. Для збільшення можна використовувати властивості width і height, або скористатися властивістю padding.

Тепер задаємо колір тла, тексту та рамку. Наша кнопка готова, приступаємо до створення тіні.

Спочатку створимо звичайну тінь, невеликого розміру за допомогою box-shadow. Вона буде помітна за замовчуванням, без наведення на кнопку.

Зробимо найпростіший ефект – збільшимо тінь. Можете зробити її розмитою або змінити розтягнення - за смаком.

Для кращого ефекту задамо властивість transition для звичайного посилання, поставимо час 0.5s.

Тепер у нас є відмінна кнопка з гарною тінню, яка при наведенні плавно розширюватиметься.

Висновок

У цій статті ми ознайомилися з усіма основними способами створення тіней. Ми розібрали всі властивості та параметри тіней.

Всі елементи, які були представлені на скріншотах, ви зможете знайти в папці з вихідними джерелами. Якщо хочете, можете самостійно вивчити їх та поекспериментувати зі значеннями. Можливо, у вас вийде набагато краще, ніж це зробили ми.

коротка інформація

Версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Опис

Додає тінь до елемента. Дозволяється використовувати кілька тіней, вказуючи їх параметри через кому, при накладенні тіней перша тінь у списку буде вищою, остання нижче. Якщо елемент задається радіус заокруглення через властивість border-radius , то тінь також вийде із закругленими кутками. Додавання тіні збільшує ширину елемента, тому можлива поява горизонтальної смуги прокручування у браузері.

Синтаксис

box-shadow: none |<тень> [,<тень>]*
де<тень>:
inset<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значення
none Скасує додавання тіні. inset Тінь виводиться всередині елемента. Необов'язковий параметр. зсув x Зміщення тіні по горизонталі щодо елемента. Позитивне значення цього параметра визначає зсув тіні вправо, негативне - вліво. Обов'язковий параметр. зсув по y Зміщення тіні по вертикалі щодо елемента. Позитивне значення задає зсув тіні вниз, негативне вгору. Обов'язковий параметр. розмиття Задає радіус розмиття тіні. Чим більше це значення, тим сильніше тінь згладжується, стає ширшим і світлішим. Якщо цей параметр не заданий, за замовчуванням встановлюється 0, тінь при цьому буде чіткою, а не розмитою. Позитивне значення розтягує тінь, негативне, навпаки, її стискає. Якщо цей параметр не заданий, за замовчуванням встановлюється 0, при цьому тінь буде такого самого розміру, як і елемент. колір Колір тіні у будь-якому доступному CSS форматі, за промовчанням тінь чорна. Необов'язковий параметр.
Дозволяється вказувати кілька тіней, розділяючи їх параметри між собою комою. Враховується наступний порядок: перша тінь у списку розміщується на самому верху, остання у списку – у самому низу.

HTML5 CSS3 IE Cr Op Sa Fx
box-shadow
У хащах півдня жив би цитрус? Так, але фальшивий екземпляр!

Результат прикладу показано на рис. 1.

Мал. 1. Вигляд тіні у браузері Safari

Браузери

Safari до версії 5.1, Chrome до версії 10.0, Android до версії 4.0 та iOS Safari до версії 5.0 підтримують властивість -webkit-box-shadow.

Firefox до версії 4.0 підтримує властивість -moz-box-shadow.

Internet Explorer до версії 9.0 не підтримує властивість box-shadow, натомість можна використовувати нестандартну властивість filter:
Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Тут: offX - Зміщення тіні по горизонталі; offY - зміщення тіні по вертикалі; color – колір тіні.

Застосування фільтра dropshadow дає чітку різку тінь, тому для ефекту розмиття можна використовувати фільтр shadow.
Filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);
Тут: direction - кут напряму тіні від 0 до 360 °; color - колір тіні; strength - усунення тіні в пікселах.

Тінь блоку – відмінний ефект тривимірності, що надає блокам сайту реалістичності та об'ємності. Коли я починав вивчати (приблизно 5-6 років тому), я не здогадувався про існування і мені при створенні сайту доводилося робити тінь блоків зображенням. Це було дуже незручно, та й не завжди виходило так, як хотілося. Дякуємо можливостям CSS, які спростили працю веб-дизайнерів. Сьогодні я покажу можливість CSS, як створити для блоків тінь.

Для додавання тіні в CSS використовується властивість box-shadow .

1. зсув тіні по горизонталі (до 100px вправо, до -100px вліво);
2. зсув по вертикалі (до 100px вниз, до -100px вгору);
3. розмиття тіні (0 – чітка тінь, 100 – сильно розмита тінь);
4. розтягнення тіні (до 100px - розтяг, до -100px - стиск);
5. колір тіні;
6. inset - тінь всередині елемента, без inset тінь буде назовні.

Тінь блоку в CSS

Коли я починав вивчати HTML (приблизно 5-6 років тому), я не здогадувався про існування CSS, і при створенні сайту доводилося робити тінь блоків зображенням.

Результат :

Таблиця з тінями:

код Приклад:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
box-shadow: 7px 10px 23px -8px #92a9e7;
За допомогою тіні можна створити об'ємний блок:

Код приклад
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(16, 16 193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 3p 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,8 0,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(16,26 193 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,19 63 ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(187,16 8 ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191, -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5p 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,18 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9p );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(16,16 193 ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,19 63 ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(187,16 8 ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);
Blok1 ( width: 70%; max-width: 550px; margin: 10px auto; padding: 1em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
Результат :

Blok1 ( width: 30%; max-width: 550px; margin: 2em auto; padding: 1em; background: #DADADA; box-shadow: 6px 6px #BBBBBB, 12px 12px #919191; )
Результат :

Blok1 ( width: 30%; margin: 0 auto; padding: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20 FFFF00, -20px 0 0 -10px #FF3399;
Результат :

За допомогою тіні можна зробити гарну рамку.

Красива рамка за допомогою властивостіbox- shadow

Blok1 ( width: 20%; max-width: 250px; margin: 0 auto; padding: 1em; border: 2px dashed #999; box-shadow: 0 0 0 1px #999, inset 0 0 0 1px #999;
Результат :

Blok1 ( width: 30%; max-width: 250px; margin: 2em auto; padding: 4em; background: #dcc005; box-shadow: 0 0 4em 4em #fff inset; )
Результат :

Blok1 ( max-width: 250px; margin: 0 auto; padding: 1em; border-radius: 10px; background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,25,25,55,255,255,255,255,255) .35));box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;
Результат :

Тінь блоку в CSS

сайт

Результат :

Ось таких красивих ефектів можна досягти за допомогою тіней у CSS. Придумайте щось новеньке та оригінальне, все у ваших руках. Знання та можливості у вас є.
А днями я опублікую статтю, як можна створювати без використання фотошопу. Тож будьте в центрі подій і підписуйтесь на оновлення мого блогу. Не пропустіть цікаву для вас тему. Ну, все, удачі!

код	Приклад:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
box-shadow: 7px 10px 23px -8px #92a9e7;

Код	приклад
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(16, 16 193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 3p 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,8 0,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(16,26 193 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,19 63 ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(187,16 8 ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191, -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5p 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,18 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9p );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(16,16 193 ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,19 63 ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(187,16 8 ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);