Тіні для тексту і блоків.

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

Давайте для початку зробимо невелику html розмітку.

Відео: Урок 64. Тіні для тексту та блоків (text-shadow, box-shadow)

 




 
charset="Utf-8"gt; 
Text-Shadow 
 
 
 Lorem ipsum dolor sit amet.

А тепер давайте задамо для неї стилі:

body { 
 background:# ccc- 
} 
 
p { 
 font-size:18px- 
 text-shadow:01px0# eee- 
}

Тінь для тексту задається за допомогою властивості text-shadow, де перше значення - це відступ по горизонталі, другий - по вертикалі, третій - розмиття, а четвертий параметр - це колір тіні. Якщо ви запустите цей приклад, то побачите досить-таки цікавий ефект однопіксельні білої тіні, який зараз часто застосовується.

Можна також задавати відразу кілька тіней через кому:

p { 
 text-shadow:01px0#eee, 3px 3px 3px # 000- 
}

Тепер давайте поговоримо про те, як задати тінь для блоку.
Для початку змінимо нашу розмітку

 




 
charset="Utf-8"gt; 
Box-Shadow 
 
 
class="Block"gt;

І поставимо якісь початкові стилі

.block { 
 background:# 333- 
 width:200px- 
 height:200px- 
 margin:20px- 
}

Тепер поставимо нашого блоку тінь за допомогою box-shadow

.block { 
 background:# 333- 
 width:200px- 
 height:200px- 
 margin:20px- 
 box-shadow:7px1px7px5px# 555, -7px 1px 7px 5px # c1ff05- 
}

Абсолютно все, що я говорив про тінях для тексту, справедливо і для тіней блоків. В даному прикладі ми задали першу тінь зі зміщенням по осі x на 7px, по осі y на 1px, розмиванням 7px, і світло-чорним кольором. З другої тінню все те ж саме, тільки зміщення по осі x буде не вправо, а вліво, тому що ми задали негативне число. Як ви могли помітити, є ще четвертий параметр, який позначає радіус распрастранения тіні, але він використовується нечасто.

Це були зовнішні тіні, але є ще й внутрішні

.block { 
 box-shadow: inset 9px9px3px# 112233- 
}

Як бачите, щоб тінь стала внутрішньою, потрібно всього лише додати на початку слово inset.

Відео: CSS урок 16. Тінь тексту

На цьому все для сьогоднішньої статті. Успіхів!

Поділися в соціальних мережах:

Схожі