Придаем объемности любому элементу на сайте с помощью CSS3 (3d css)

2013-10-02 | CSS

Сегодня мы поговорим о свойствах CSS3, благодаря которым любой блок, любую кнопку, любое изображение, и даже текст можно сделать объемным.

Но сначала небольшое отступление от темы. По результатам первого конкурса комментаторов победителем стал Николай, который получает на свой электронный кошелек 150 рублей! Поздравляю!
Дорогие друзья! Конкурс комментаторов продолжается. Победить может каждый! Условия конкурса читайте на этой странице

Вернемся к теме поста.

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.

В стилях прописываем код:

.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); } // стили кнопки при нажатии //