Здравствуйте, сегодня мы расмотрим интересное свойтво — тень в CSS3, для блока (div). Чтоб сделать тень в CSS3 для блока (div) нужно воспользоваться свойством box-shadow. Что интересно,тень в CSS3 для блока (div), может быть не одна, можно использовать несколько теней, прописывая их параметры через запятую. Если вы используете не одну CSS3 тень для блока (div) , то порядок будет таким: первая тень в списке будет на самом верху, последняя в — в самом низу.
Допускаеться что тень в CSS3 для блока (div) будет не одна
Совместимость с браузерами:
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.5+ | 3.0+ | 3.5+ | 2.1+ | 2.0+ |
Какие параметры у box-shadow:
box-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
- Давайте перейдем к практическому примеру, итак, добавив к стилю блока вот такой код:
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
смотрите на рис.1 что вас получиться:
рис.1
Для того что б тень работала в во всех браузерах, нужно писать мини хак в css, это означает что свойство тени нужно написать три раза.
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);/* Для Safari и Chrome */ -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);/* Для Firefox */ box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
создавать тень в CSS3 не видя ее сложно
Я считаю, что указывать тень в слепую в редакторе неудобно и сложно, поэтому пользуюсь онлайн генератором CSS теней, читайте статью Онлайн генератор CSS теней
2 Response Comments
Скоро верстальщик не нужен будет, с такими онлайн сервисами 🙂
Очень интересная статья