У сьогоднішній статті ми поговоримо про те, як зробити тінь у тексту або блоку за допомогою CSS3.
Давайте для початку зробимо невелику html розмітку.
Lorem ipsum dolor sit amet.
А тепер давайте задамо для неї стилі:
body background: #ccc;
>
p font-size: 18px;
text-shadow: 0 1px 0 #eee;
>
Тінь для тексту задається за допомогою властивості text-shadow. де перше значення - це відступ по горизонталі, другий - по вертикалі, третій - розмиття, а четвертий параметр - це колір тіні. Якщо ви запустите цей приклад, то побачите досить-таки цікавий ефект однопіксельні білої тіні, який зараз часто застосовується.
Можна також задавати відразу кілька тіней через кому:
p text-shadow: 0 1px 0 #eee, 3px 3px 3px # 000;
>
Тепер давайте поговоримо про те, як поставити тінь для блоку.
Для початку змінимо нашу розмітку
І поставимо якісь початкові стилі
block background: # 333;
width: 200px;
height: 200px;
margin: 20px;
>
Тепер поставимо нашого блоку тінь за допомогою box-shadow
block background: # 333;
width: 200px;
height: 200px;
margin: 20px;
box-shadow: 7px 1px 7px 5px # 555, -7px 1px 7px 5px # c1ff05;
>
Абсолютно все, що я говорив про тінях для тексту. справедливо і для тіней блоків. В даному прикладі ми задали першу тінь зі зміщенням по осі x на 7px, по осі y на 1px, розмиванням 7px, і світло-чорним кольором. З другої тінню все те ж саме, тільки зміщення по осі x буде не вправо, а вліво, тому що ми задали негативне число. Як ви могли помітити, є ще четвертий параметр, який позначає радіус распрастранения тіні, але він використовується нечасто.
Це були зовнішні тіні. але є ще й внутрішні
block box-shadow: inset 9px 9px 3px # 112233;
>
Як бачите, щоб тінь стала внутрішньою, потрібно всього лише додати на початку слово inset.
На цьому все для сьогоднішньої статті. Успіхів!