3D-эффект для создания объемного текста можно легко создать с помощью Photoshop, Gimp или любого другого графического редактора, но а так же и с помощью CSS3, без использования дополнительной графики. Преимуществом любого эффекта с применением CSS3 является быстрая скорость загрузки, а главным недостатком, конечно же, кроссбраузерность.
Далее сниппет с небольшим примером.
Для начала создадим обычный div-контейнер с классом “effect” и поместим в него наш текст:
<div class="effect">3D-текст с помощью CSS3</div>Добавим CSS-стиль к нашему классу:
.effect {
font:normal 60px Arial;
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}Пример:
3D-Текст с помощью CSS
Поиграть с примером кода можно на Codepen
Опубликовано
Подробнее