Тінь блоку (властивість box-shadow) | CSS
- box-shadow generator Властивість box-shadow ( w3.org ) Створює елементу тінь. Як створити об'ємний...
- Ефект тіні блоку
- CSS тінь з одного боку
- CSS внутрішня тінь блоку (всередині елемента)
- box-shadow і HTML тег input
- box-shadow і transition або animation
box-shadow generator
Властивість box-shadow ( w3.org ) Створює елементу тінь.
Як створити об'ємний HTML елемент з декількох box-shadow
box-shadow може мати скільки завгодно значень. Тому їм можна замінити картинки форматів JPEG, PNG і навіть GIF [ інструмент lvivski.com ]. Можна, але не потрібно. А ось створення обсягу може бути корисним для того, щоб змайструвати, наприклад, об'ємну красиву кнопку .
колір одного боку
колір іншого боку
товщина тіні
<Div id = "cube"> </ div>
Ефект тіні блоку
Тінь навколо div CSS
Хм, чи відкидає предмет тінь, коли світло на нього падає зверху? Так, якщо предмет знаходиться на відстані від поверхні. Чим далі, тим інтенсивніше тінь. Сама перевіряла, світячи ліхтариком.
CSS тінь з одного боку
Знизу (під блоком div)
З боків (праворуч і ліворуч)
Багатошаровий блок за допомогою box-shadow
Різнобарвна CSS рамка
Ще варіанти можна подивитися у css.yoksel.ru .
CSS внутрішня тінь блоку (всередині елемента)
Як зробити втиснутий елемент
Як зробити опуклий елемент з округлими краями
box-shadow inset і картинка img
Знадобиться стаття " Як прибрати відступ під зображенням "
<Span class = "boxShadow20"> <img alt = "кошеня мріє стати левом" src = "http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height = "400" width = "302" /> </ span>
box-shadow і HTML тег input
Спочатку поле как-будто стиснуте, при наведенні з'являється блакитна обведення, а при фокусі видно ефект плавно з'являється світіння . Ось так може виглядати спливаюча форма зворотного зв'язку .
<Input type = "text" placeholder = "псевдонім або email" class = "shadow" /> <input type = "password" placeholder = "пароль" class = "shadow">
Або підсвічування всередині input (вийшла гарна форма входу CSS):
<Input type = "text" placeholder = "псевдонім або email" class = "backlight" /> <input type = "password" placeholder = "пароль" class = "backlight">
box-shadow і transition або animation
box-shadow можна плавно змінювати, але потрібно враховувати особливість цієї зміни:
? ні та <span class = "dva1"> да </ span> <span class = "dva2"> немає </ span> <span class = "dva3"> да </ span>
Далі буде: box-shadow і: before та: after .