Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » HTML & CSS » Отражение и перспектива для 3D текста на чистом CSS

Отражение и перспектива для 3D текста на чистом CSS

С момента появления новых свойств , возможности по формированию и оформлению элементов стали практически безграничны, ограничиваются разве что, только не ровной поддержкой разными браузерами, ну конечно воображением и фантазией разработчиков.
Например текст, как основной конечный продукт любого сайта или блога, в первую очередь посетитель всегда читает, будь-то название сайта, заголовки статей, пункты меню, статьи и т.д... От того как сформирована и представлена текстовая составляющая, порой зависит успех всего веб-проекта.
Если текст статей достаточно сделать хорошо читаемым, т.е. выбрать оптимальные размеры и цвет шрифта, в зависимости от общей цветовой палитры сайта, то к названию сайта(в случаях когда название выводится в виде текста) и заголовкам статей, стоит обратить более пристальное внимание.

Ранее не раз обращался к теме различных способов оформления текста с помощью CSS3, в большинстве случаев расписывал варианты оформления заголовков статей и текстового названия сайта, без использования графических логотипов.

В данном примере, хочу продемонстрировать довольно интересный вариант оформления текста в стиле 3D, с элементами трехмерной трансформации, в частности, с эффектами отражения и перспективы, без использования графики, исключительно средствами CSS, а так же вы увидите, как с помощью градиентов css можно создать впечатляющий базовый фон страницы.

 

3D Текст с отражением и в перспективе


 

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 и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Subscribe without commenting

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru