Трюки CSS: стили теней для текста

CSS трюки оформления шрифта

Сегодня немного поиграемся с CSS-стилями. Я подготовил для вас несколько примеров СSS-стилей для текста. Будет интересно. Эти стили можно применять к оформлению заголовков, тайтлов в тексте. Начинающему верстальщику на заметку.

Обычная тень

<p class="shadow1">KRASHENININ.TECH</p>
.shadow1 {
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  font-size: 50px;
  font-family: Roboto;
  font-weight: 700;
}

Вдавленный текст

<body>
<p class="shadow1">KRASHENININ.TECH</p>
</body>
body {
  background: grey;
}

.shadow1 {
  text-shadow: 1px 1px 3px rgba(255,255,255,0.1);
  font-size: 50px;
  font-family: Roboto;
  font-weight: 700;
  color: #646464;
}

Двойная тень (трики)

<p class="shadow3">KRASHENININ.TECH</p>
.shadow3 {
  font-size: 50px;
  font-family: Roboto;
  font-weight: 700;
  text-shadow: 3px 2px 0px #47cf73, 6px 6px 0px rgba(0,0,0,0.15);
}

3D текст

<p class="shadow3d">KRASHENININ.TECH</p>
.shadow3d {
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  font-size: 50px;
  font-family: Roboto;
  font-weight: 700;
  color: #e1e2e4;
}

Как говорится, чистый CSS и никакого мошейничества)

Главное – фантазия.

Экспериментируйте!

Оценка:
( 1 оценка, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статьи
Основатель блога, публицист, IT-специалист. Предоставляю услуги по администрированию, техническому обслуживанию и поисковому продвижению веб-сайтов.
Понравилась статья? Поделись в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Буду рад вашим мыслям, пожалуйста, прокомментируйте.x
()
x