Отражение и перспектива для 3D текста на чистом CSS
С момента появления новых свойств CSS3, возможности по формированию и оформлению элементов стали практически безграничны, ограничиваются разве что, только не ровной поддержкой разными браузерами, ну конечно воображением и фантазией разработчиков.
Например текст, как основной конечный продукт любого сайта или блога, в первую очередь посетитель всегда читает, будь-то название сайта, заголовки статей, пункты меню, статьи и т.д… От того как сформирована и представлена текстовая составляющая, порой зависит успех всего веб-проекта.
Если текст статей достаточно сделать хорошо читаемым, т.е. выбрать оптимальные размеры и цвет шрифта, в зависимости от общей цветовой палитры сайта, то к названию сайта(в случаях когда название выводится в виде текста) и заголовкам статей, стоит обратить более пристальное внимание.
Ранее не раз обращался к теме различных способов оформления текста с помощью CSS3, в большинстве случаев расписывал варианты оформления заголовков статей и текстового названия сайта, без использования графических логотипов.
В данном примере, хочу продемонстрировать довольно интересный вариант оформления текста в стиле 3D, с элементами трехмерной трансформации, в частности, с эффектами отражения и перспективы, без использования графики, исключительно средствами CSS, а так же вы увидите, как с помощью градиентов css можно создать впечатляющий базовый фон страницы.
HTML- Разметка
С разметкой html всё довольно просто, для базового контейнера использовал блочный элемент <div> с определённым классом, а уже внутри этого блока разместил все необходимые элементы. Для текстовой составляющей, линейной тени и отражения применил тег <span>, так же с определённым классом, необходимым для дальнейшего формирования и оформления в CSS.
<!-- Базовый container --> <div class="container"> <span class="render">Dbmast.ru</span><!-- текст --> <span class="render shadow">___________</span><!-- линия тени --> <span class="render reflect">Dbmast.ru</span><!-- отражение --> </div> <!-- /container --> |
CSS
Для начала сформируем и оформим основу документа — тег <body>, без единого изображения создадим фоновую текстуру, с помощью свойства background-color: определяем цвет сплошной заливки, в свойстве background-image: прописываем все необходимые значения линейного градиента linear-gradient, а с помощью свойства background-size масштабируем фон.
Далее, для создания визуального эффекта лёгкого свечения фона, используем псевдоэлемент body:after, определим позиционирование position: absolute; и пропишем все необходимые значения радиального градиента background-image: radial-gradient(.....);.
Чтобы контент выводился строго по центру используем модель flexbox-разметки display: flex; flex-direction: column; justify-content: center;.
body { height: 100%; } body { margin: 0; padding: 0; background-color: #454545; background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, .3) 52%, transparent 52%); background-size: 10px 10px; position: absolute; width: 100%; height: 100%;font-size: 100%; display: flex; flex-direction: column; justify-content: center; } body:after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%); } |
Теперь перейдём непосредственно к формированию и оформлению элементов самого эффекта. Вся структура составлена из четырёх компонентов, это базовый контейнер, основной текст, линия тени и элемент отражения текста.
Контейнеру <div> определяем класс .container, выравниваем по центральной линии на поперечной оси align-self: center;, назначаем относительное позиционирование с помощью position: relative;, затем используя свойство perspective, создаём для 3D-позиционируемого элемента эффект переспективы perspective: 980px;.
Для всех элементов эффекта внутри родительского блока назначаем общий класс, в примере обозвал его class=”render”, сокращённое от rendering (показалось логичным), затем непосредственно в css стилизуем элементы с помощью необходимых нам свойств.
.render { display: inline-block; z-index: 0; position: relative; line-height: 0.55em; height: 0.7em; -moz-transform: rotateY(45deg); -webkit-transform: rotateY(45deg); transform: rotateY(45deg); font-family: 'Bree Serif', serif; font-size: 10em; color: #f5f5f5; text-shadow: white 0.006em 0.006em 1px, rgba(0, 0, 0, 0.15) -3px 7px 10px, #d0d0d0 -1px 1px 1px, #d0d0d0 -2px 1px 1px, #d0d0d0 -3px 1px 1px, #d0d0d0 -4px 1px 1px, #d0d0d0 -5px 1px 1px, #d0d0d0 -6px 1px 1px, #d0d0d0 -7px 1px 1px, #d0d0d0 -8px 1px 1px, #d0d0d0 -9px 1px 1px, #d0d0d0 -10px 1px 1px, #d0d0d0 -11px 1px 1px, #d0d0d0 -12px 1px 1px, rgba(255, 255, 255, 0.6) -5px 2px 100px; } .render.reflect { z-index: 0; opacity: 0.2; -moz-transform: rotateX(180deg) rotateY(-45deg); -webkit-transform: rotateX(180deg) rotateY(-45deg); transform: rotateX(180deg) rotateY(-45deg); } .render.shadow { opacity: 0.6; z-index: 2; color: transparent; letter-spacing: -0.02em; position: absolute; width: 25%; top: 0.44em; left: 0.1em; -moz-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg); -webkit-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg); transform: rotateX(-100deg) rotateY(-5deg) rotateZ(25deg); text-shadow: rgba(0, 0, 0, 0.8) 0 0 30px, rgba(0, 0, 0, 0.8) 0 0 80px, black 0 0 150px, black 0 0 150px, black 0 0 250px, black 0 0 250px, white -0.15em 0.4em 250px; } |
Давайте разберём некоторые свойства более подробно. Основным классом, для всех элементов, как писал выше, назначен class="render". Как вы понимаете базовым элементом является текст, в данном варианте эффекта, использовал тег <span>, который используется для определения строчных элементов. К каждому элементу прикрутил свойство трансформации transform, с функцией rotate, с помощью которой поворачиваем каждый элемент на заданный угол. Ну и конечно же использовал свойство тени для текста text-shadow с определёнными параметрами, для базового элемента с классом .render и собственно для линии подчёркивания класс .render.shadow. Самому отражению назначил уровень прозрачности opacity: 0.2; и повернул на 180 градусов относительно оси X rotateX(180deg), а также относительно оси Y определил отрицательное значение rotateY(-45deg).
На этом пожалуй и всё, эффект отражения и перспективы для текста в стиле 3d готов, остаётся найти ему практическое применение. Например у меня, в таком стиле оформлена страница заглушка, которую использую при реконструкции блога, только ещё добавлено информационное, всплывающее окно. Так что кому оно надо, найдёт куда прикрутить этот эффект.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 0