CSS Ефекти тіні
Тіні
За допомогою CSS ви можете створювати ефекти тіні!
CSS Ефекти тіні
За допомогою CSS ви можете додавати тінь до тексту та елементам.
В цих розділах ви дізнаєтесь про наступні властивості:
text-shadowbox-shadow
CSS Тінь тексту
CSS властивість text-shadow застосовує тінь до тексту.
В простішому випадку ви вказуєте лише горизонтальну тінь (2 пікселі) та вертикальну тінь (2 пікселі):
Ефект тіні від тексту!
Далі додаємо колір тіні:
Ефект тіні від тексту!
Потім додайте ефект розмиття до тіні:
Ефект тіні від тексту!
В наступному прикладі показано білий текст з чорною тінню:
Ефект тіні від текста!
В наступному прикладі показано червону неонову тінь, що світиться:
Ефект тіні від тексту!
Кілька тіней
Щоб додати до тексту більше однієї тіні, ви можете додати список тіней, розділених комами.
В наступному прикладі показано червону та синю неонову тінь, що світиться:
Ефект тіні від тексту!
В наступному прикладі показано білий текст з чорною, синьою та темно-синьою тінню:
Ефект тіні від тексту!
Приклад
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Спробуйте самі »
Ви також можете використовувати властивість text-shadow для створення простої межі навколо тексту (без тіней):
Межа навколо тексту!
Приклад
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Спробуйте самі »
