АКТУАЛЬНО:

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

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

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

Обычная тень

<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
Читайте ранее:
Ping – общий сбой. Как побороть?

Сегодня я потратил много нервов и времени, чтобы решить элементарную задачу. После переноса сайта на другой сервер, нужно было банально...

Закрыть