| Kosten | Вторник, 29 Октября 2019, 21:30 | Сообщение 1 |
| Удивительный созданный текстовых эффект 3D при помощи CSS3. Который отлично смотрится на любом фоне, из-за цветовой палитры цвета. Здесь эффект при наведение не предусмотрен, ведь на переднем плане идет дизайн знаков, который идет в светлой гамме цвета, а чтоб добавить эффект 3d, то здесь дополняем темный оттенок. Все это создается при помощи свойство text-shadow, который может создавать одну, а также несколько теней для текста.
HTML
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 идет,только в другом дизайне.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:18 | Сообщение 2 |
|
| Примеры сложных текстовых теней
See the Pen
Complex Text Shadow Examples by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:19 | Сообщение 3 |
|
| Светящийся 3D Текст
See the Pen
Glowing 3D Text by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:20 | Сообщение 4 |
|
| 3D CSS текст
See the Pen
3D CSS Text by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:21 | Сообщение 5 |
|
| 3D-текст с использованием Text-Shadow
See the Pen
3d Text using Text-Shadow by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:22 | Сообщение 6 |
|
| 3D текст при помощи CSS
See the Pen
Super Discount by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:23 | Сообщение 7 |
|
| 3D текстовый эффект в CSS
See the Pen
3D Text Effect in CSS by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:25 | Сообщение 8 |
|
| 3D текстовая анимация
See the Pen
3d Text Animation by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
