О чём говорим..

Тени и объем с анимацией на CSS

cloud

Недавно в поисках не помню чего, как это обычно бывает, случайно набрел на несколько эффектных эффектов, которые, естественно, сразу и использовал.

CSS это просто волшебная штука! Ах, как она меня восхищает!!! Даже вдохновляет порой.. ну да ладно, что-то заносит меня на радостях, переходим к делу...
 

Итак, этот стиль придает элементам объем. Причем его можно использовать как статично, так и анимированно (при наведении например).

Делается таким образом: какому-то элементу присваивается класс (чтобы выделить именно этот элемент) это может быть блок или даже сам текст (можно к примеру сделать объемный логотип если еще подгрузить какой-то красивый шрифт):

 
<span class="text_3d">42</span>

 
<div class="box_3d"></div>

Теперь оформляем эти классы в файлике css:

/* для текста: */
.text_3d {
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 50px;
    letter-spacing: 1px;
    margin: -5px 0px 0px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
    text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3);
}
.text_3d:hover {
    text-shadow: 0px 0px 2px #686868;
    margin: 0px 0px -5px;
}

или

/* для блока: */
.box_3d {
    display: block;
    background: #fff;
    border-radius: 50% 0 50% 50%;
    height: 32px;
    width: 37px;
    margin: -5px 0px 0px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
    box-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3);
}
.box_3d:hover {
    box-shadow: 0px 0px 2px #686868;
    margin: 0px 0px -5px;
}

Выглядеть это будет вот так (наведи курсор на "выпуклости"):

42
- если это текст
- если это блок

Посидеть, поковыряться в css и можно хоть рисунки рисовать 8)

Кстати, выпуклости можно превращать во впуклости, заменив внешнюю тень внутренней (добавляем inset):

.box_3d {
    display: inline-block;
    background: #fbffbc;
    border-radius: 0 77%;
    height: 40px;
    width: 65px;
    box-shadow: inset 0px 0px 2px #686868, inset 0px 1px 1px #ddd, inset 0px 2px 1px #d6d6d6, inset 0px 3px 1px #ccc, inset 0px 4px 1px #c5c5c5, inset 0px 5px 1px #c1c1c1, inset 0px 6px 1px #bbb, inset 0px 7px 1px #777, inset 0px 8px 3px rgba(100, 100, 100, 0.4), inset 0px 9px 5px rgba(100, 100, 100, 0.1), inset 0px 10px 7px rgba(100, 100, 100, 0.15), inset 0px 11px 9px rgba(100, 100, 100, 0.2), inset 0px 12px 11px rgba(100, 100, 100, 0.25), inset 0px 13px 15px rgba(100, 100, 100, 0.3);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
.box_3d:hover {
    box-shadow: inset 0px 0px 2px #686868;
    background: #f3a87c;
}
как-то так:


Правда с текстом это не прокатит... Для вдавленного текста нужно слегка извратиться. вот так:

.text_3d {
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 60px;
    font-weight: bold;
    color: transparent;
    text-shadow: 2px 1px 2px rgba(255, 255, 255, 0.6);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
}
и получится -
это


Думаю к такому тексту тоже можно добавить чутку магии, но это уже если приспичит.. На этом моя "теневая" шпаргалка закончена.
Пойду писать следующую.

Комментировать

E-mail не обязателен, но желательно его всё же указать, чтобы иметь возможность подписаться на уведомления о новых комментариях. А лучше - просто зарегистрироваться и всегда писать от своего имени.

Защитный код
Обновить