• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Текстовые CSS-эффект 3D для текста (Создание текстовых CSS3-эффектов с помощью CSS)
Текстовые CSS-эффект 3D для текста
Kosten
Дата: Вторник, 2019-10-29, 21:30 | Сообщение 1
Онлайн
Администраторы
Сообщений:25086
Награды: 57


Удивительный созданный текстовых эффект 3D при помощи CSS3. Который отлично смотрится на любом фоне, из-за цветовой палитры цвета. Здесь эффект при наведение не предусмотрен, ведь на переднем плане идет дизайн знаков, который идет в светлой гамме цвета, а чтоб добавить эффект 3d, то здесь дополняем темный оттенок. Все это создается при помощи свойство text-shadow, который может создавать одну, а также несколько теней для текста.



HTML

Код
<h1>ZORNET.RU</h1>

CSS

Код
h1 {
    font-size: 135pt;
    font-family: 'Luckiest Guy';
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0px -6px 0 #1f1d1d, 0px -6px 0 #1f1d1d, 0px 6px 0 #1f1d1d, 0px 6px 0 #1f1d1d, -6px 0px 0 #1f1d1d, 6px 0px 0 #1f1d1d, -6px 0px 0 #1f1d1d, 6px 0px 0 #1f1d1d, -6px -6px 0 #1f1d1d, 6px -6px 0 #1f1d1d, -6px 6px 0 #1f1d1d, 6px 6px 0 #1f1d1d, -6px 18px 0 #1f1d1d, 0px 18px 0 #1f1d1d, 6px 18px 0 #1f1d1d, 0 19px 1px rgba(0,0,0,.1), 0 0 6px rgba(0,0,0,.1), 0 6px 3px rgba(0,0,0,.3), 0 12px 6px rgba(0,0,0,.2), 0 18px 18px rgba(0,0,0,.25), 0 24px 24px rgba(0,0,0,.2), 0 36px 36px rgba(0,0,0,.15);
}

Также ранее на сайте разместил эффектов для текста, что аналогично в 3D идет,только в другом дизайне.

Демонстрация
Прикрепления: 5564534.jpg(24.4 Kb) · 3d-effects.zip(2.6 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:18 | Сообщение 2
Онлайн
Администраторы
Сообщений:25086
Награды: 57


Примеры сложных текстовых теней


See the Pen
Complex Text Shadow Examples
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:19 | Сообщение 3
Онлайн
Администраторы
Сообщений:25086
Награды: 57


Светящийся 3D Текст


See the Pen
Glowing 3D Text
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:20 | Сообщение 4
Онлайн
Администраторы
Сообщений:25086
Награды: 57


3D CSS текст


See the Pen
3D CSS Text
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:21 | Сообщение 5
Онлайн
Администраторы
Сообщений:25086
Награды: 57


3D-текст с использованием Text-Shadow


See the Pen
3d Text using Text-Shadow
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:22 | Сообщение 6
Онлайн
Администраторы
Сообщений:25086
Награды: 57


3D текст при помощи CSS


See the Pen
Super Discount
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:23 | Сообщение 7
Онлайн
Администраторы
Сообщений:25086
Награды: 57


3D текстовый эффект в CSS


See the Pen
3D Text Effect in CSS
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:25 | Сообщение 8
Онлайн
Администраторы
Сообщений:25086
Награды: 57


3D текстовая анимация


See the Pen
3d Text Animation
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Текстовые CSS-эффект 3D для текста (Создание текстовых CSS3-эффектов с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: