• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Уроки Веб-мастера » Наклонный текст при помощи эффекта CSS3
Наклонный текст при помощи эффекта CSS3
Kosten
Дата: Среда, 2018-01-31, 18:13 | Сообщение 1
Администраторы
Сообщений:18780
Награды: 55


Вот замечательный текстовый эффект, который можно легко достичь с помощью CSS3, в создание наклонного текста. Чтобы создать этот эффект, вам нужно создать div - один для текста, который должен быть наклонен влево, а другой для текста, который должен быть наклонен вправо.



HTML должен выглядеть примерно так:

Код
<div id="container">
<div id="tilted-left">TILTED</div>
<div id="tilted-right">TEXT</div>
</div>

Чтобы правильно подобрать стиль, вам нужно будет использовать свойство значения поворота, которые вы можете настроить в зависимости от того, как вы хотите, чтобы текст был таким, как вы хотите. Вы также можете использовать свойство text-shadow, чтобы придать тексту небольшой 3D-эффект.

Так выглядит ваш CSS:

Код
#tilted-left {
font-size: 100px;
color: #fff;
text-shadow:#fff 1px 1px 0,
#f1f1f1 2px 2px 0,
#f2f2f2 3px 3px 0,
#f3f3f3 4px 4px 0,
#f4f4f4 5px 5px 0,
#f5f5f5 6px 6px 0;
transform: rotate(-4deg) rotateX(10deg) skewX(2deg);
float: left;
}

#tilted-right {
font-size: 100px;
color: #fff;
text-shadow:#fff 1px 1px 0,
#f1f1f1 2px 2px 0,
#f2f2f2 3px 3px 0,
#f3f3f3 4px 4px 0,
#f4f4f4 5px 5px 0,
#f5f5f5 6px 6px 0;
transform: rotate(4deg) rotateX(-10deg) skewX(-2deg);
float: right;
}

Играйте с текстовыми тенями, цветами и степенями вращения, чтобы настроить этот наклонный текст по своему вкусу.
Прикрепления: 3271786.png(30.5 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Уроки Веб-мастера » Наклонный текст при помощи эффекта CSS3
  • Страница 1 из 1
  • 1
Поиск: