Тіні для тексту і блоків.
У сьогоднішній статті ми поговоримо про те, як зробити тінь у тексту або блоку за допомогою 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. Тінь тексту
На цьому все для сьогоднішньої статті. Успіхів!
- Shadow blade
- Shadow kings
- Shadow bug rush
- Як завантажити windows 10 безкоштовно з офіційного сайту?
- Як дізнатися ключ windows в вашому комп`ютері?
- Be quiet! Представила компактний процесорний кулер shadow rock lp
- Як створити "вислизати" меню на css.
- Як зробити тінь на css
- Як роздрукувати лист в лінійку або в клітку на звичайному форматі а4?
- Як зробити аккордіон на чистому css3.
- Як зробити вигнуту тінь на чистому css3.
- Як зробити ефект вдавленого тексту на css3.
- Знову перехід на зимовий час 2014. Оновлення для автоматичного переходу
- Атрибути html5: reversed, contenteditable, hidden.
- Css3 трансформації.
- Плавні переходи в css3.
- Багатоколоночних текст на css3.
- Множинні фони в css3.
- Верстаємо круглі кнопки на css3.
- Властивість css3 - box-sizing.
- Shadow fight 2 - бій з тінню 2 на андроїд