Сегодня мы поговорим о свойствах CSS3, благодаря которым любой блок, любую кнопку, любое изображение, и даже текст можно сделать объемным.
Дорогие друзья! Конкурс комментаторов продолжается. Победить может каждый! Условия конкурса читайте на этой странице
Вернемся к теме поста.
3d css
О некоторых новых свойствах CSS3 уже было написано здесь, поэтому возможны повторения, но с конкретными примерами.
Благодаря свойствам CSS3 можно придать любому элементу эффект 3D.
Начнем с самого простого — с box-shadow.
Свойство box-shadow придает блоку, картинке, любому элементу, (кроме текста) тень, тем самым делая его объемным.
Использование box-shadow.
Для того, чтобы элемент на сайте имел тень, в стилях прописываем такой код:
1 2 3 | box-shadow: 0 0 10px rgba(102, 204, 51, 1); -webkit-box-shadow: 0 0 10px rgba(102, 204, 51, 1); -moz-box-shadow: 0 0 10px rgba(102, 204, 51, 1); |
Результат:
Согласитесь, очень напоминает эффект неоновой подсветки и очень даже красиво!
А для придания тени изображению используйте аналогичный код.
Результат:
Изображение взято из этого поста. Кстати, пост про увеличение изображений с помощью CSS.
В данном примере тень будет со всех четырех сторон. Для изменения цвета тени в скобках после rgba нужно изменить три первые цифры, или же прописать код цвета в формате #xxxxxx, например #000000 — черный. Для определения цвета советую использовать таблицу html-кодов, или PhotoShop.
Если же Вы хотите хотите изменить позиционирование тени, то есть чтобы она была только с двух сторон (снизу и справа), можно использовать следующие CSS-стили:
1 2 3 | -moz-box-shadow: 3px 3px 3px #333; -webkit-box-shadow: 3px 3px 3px #333; box-shadow: 3px 3px 3px #333; |
Результат:
То есть позиционирование тени напрямую зависит от установленных пикселей.
Еще несколько примеров использования box-shadow Вы можете посмотреть по ссылке
Теперь разберем объемность текста с помощью свойства text-shadow. Впринципе оно ничем не отличается от предыдущего, но здесь тень можно применить только к тексту.
Рассмотрим конкретный пример. Придадим тексту тени.
В CSS-стилях нужно прописать следующее:
1 2 3 | text-shadow:0 0 9px red; -webkit-text-shadow:0 0 9px red; -moz-text-shadow:0 0 9px red; |
В примере тень отбрасывается со всех сторон. Если нужно, чтобы тень отбрасывалась только вправо, или влево, можно использовать те же параметры, что и для box-shadow.
И последний вариант — это создание 3d кнопки css.
В стилях прописываем код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .button { text-decoration: none; color: #fff; font-weight: bold; padding: 12px 20px; font-size: 18px; // стили шрифта // border-radius: 10px; background-color: #666666; box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); display: inline-block; text-shadow: 0px -1px 0px rgba(0,0,0,0.2); margin-bottom: 40px; } // стили кнопки в неактивном состоянии // .button hover { box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } // стили кнопки при наведении курсора // .button:active { top: 7px; box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); } // стили кнопки при нажатии // |
Выглядеть кнопка будет вот так:
Вот такими простыми способами с помощью CSS3 Вы можете сделать любой элемент на сайте объемным.