Реклама на блоге
Контакты
на HTML
На CSS
в PhotoShop
для WordPress
Видеоуроки
Акции и конкурсы
Кроссворды
Сегодня мы поговорим о свойствах CSS3, благодаря которым любой блок, любую кнопку, любое изображение, и даже текст можно сделать объемным.
Вернемся к теме поста.
3d css
О некоторых новых свойствах CSS3 уже было написано здесь, поэтому возможны повторения, но с конкретными примерами.
Благодаря свойствам CSS3 можно придать любому элементу эффект 3D.
Начнем с самого простого — с box-shadow.
Свойство box-shadow придает блоку, картинке, любому элементу, (кроме текста) тень, тем самым делая его объемным.
Использование box-shadow.
Для того, чтобы элемент на сайте имел тень, в стилях прописываем такой код:
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-стили:
-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-стилях нужно прописать следующее:
text-shadow:0 0 9px red; -webkit-text-shadow:0 0 9px red; -moz-text-shadow:0 0 9px red;
В примере тень отбрасывается со всех сторон. Если нужно, чтобы тень отбрасывалась только вправо, или влево, можно использовать те же параметры, что и для box-shadow.
И последний вариант — это создание 3d кнопки css.
В стилях прописываем код:
.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 Вы можете сделать любой элемент на сайте объемным.