ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой пример с тенями для текста CSS

Простой пример с тенями для текста CSS

Иногда нам нужно поставить тень на текст, чтоб он отличался от других, это может быть как заголовок к статье или название ресурса. Здесь простой пример, как вы можете с помощью стилей CSS вывести тени и также их редактировать под цветовую гамму или их преобразование, как в меньшую или большую сторону. В этом поможет свойство text-shadow, которое в полной мере можно воплотить в тени как вы сами их видите.

Рассмотрим несколько значений, которые будут отвечать за смещения тени. Если говорить о первом, то оно указывает расстояние в горизонталь, переходя ко второму, то здесь оно будет регулировать вертикальное расстояние для тени.

Третье указывает радиус размытия, что последнее значение описывает цвет тени. Использование положительных чисел в качестве первых двух значений заканчивается тем, что тень справа от текста горизонтально и помещает тень под текст вертикально.

Третий радиус размытия, является необязательным значением которое может быть указано. Это количество пикселей, что растягивается, где будет вызывать эффект размытия. Если вы не используете третье значение, то оно обрабатывается так, как если бы вы указали радиус размытия нуля.

Кроме того помните, что вы можете использовать значения RGBA для цвета, например, 28% прозрачность белого и других.

Обычный тень текста:

HTML

Код

<p>Тень на ZORNET.RU</p>

CSS

Код

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;
font-family: Arial;
font-size: 3em;
}

Несколько теней:

Код

p { text-shadow: 1px 1px 1px #101423, 3px 3px 5px blue;
font-family: Arial;
font-size: 3em;
}

Рассмотрим самый популярный вариант.

HTML

Код

<p>Тень на ZORNET.RU</p>

CSS

Код

p {
  text-shadow: 0 1px 0 #ccccccfc, 0 2px 0 #c9c9c9f5, 0 3px 0 #c5bfbfe0, 0 4px 0 #b9b9b9f7, 0 5px 0 #afa9a9ed, 0 6px 1px rgba(14, 14, 14, 0.14), 0 0 5px rgba(0, 0, 0, 0.17), 0 1px 3px rgba(14, 14, 14, 0.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(25, 24, 24, 0.27), 0 20px 20px rgba(10, 10, 10, 0.18);
  font-family: Arial;
  font-size: 3em;
  font-weight: bold;
  color: #fbf2f2;
}

Также можно выставить класс и через него все делать.

Демонстрация:

Как сделать тень для текста

Теперь зададим класс и через него будем выводить, как тень иди другое значение.

HTML

Код

<div class="zornet_ru">Выпадающее меню CSS</div>

CSS

Код

.zornet_ru {
  color: white;
  text-shadow: 1px 1px #233273e3, 1px -1px #233173ed, -1px 1px #234373eb, -1px -1px #234a73f2, 3px 3px 6px rgba(14, 14, 14, 0.57);
  font-size: 31px;
  font-weight: bold;
  font-family: PT Sans;
}

Здесь все можно самому выстроить как вы видите сами.

Демонстрация:

19 Декабря 2017 Просмотров: 1365 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0