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

Делаем красивую обводку текста на CSS

Делаем красивую обводку текста на CSS
Создаем красивое оформление на текст или знаки, где придаем им тень и палитру цвета на стилях CSS, где соответственное отличие идет. Чтоб все сделать и придать стильный эффект обводки, так назовем, то здесь задействуем свойство text-shadow, что отвечает за полную изменение структуры. Но чтоб сделать структурную обводку, здесь обязательно нужно по контуру сделать в четыре разв, чтоб все смотрелось корректно.

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

Так получится:

Как правильно сделать обводку текста в CSS

HTML

Код
<div class="obvod_zornet_ru"><p>Обводка текста в CSS на сайте ZORNET.Ru</p></div>

Осталось прописать стили CSS, где идет редактируем под вашу основу сайта.

Код
#content .obvod_zornet_ru p{
  font-size: 29px;
  color: #ffc14c!important;
  text-shadow: 1px 0 1px #040404, 0 1px 1px #0a0a0a, -1px 0 1px #000, 0 -1px 1px #0a0a0a;
}

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

До этого разбирали обвод на шрифт, который также идет на знаки, но в более широком виде.
04 Ноября 2017 Просмотров: 2533 Комментариев: (3)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 3
-SAM-
-SAM- 04 Ноября 2017 13:381
+1
Kosten, как считаю, что ставить в качестве источника какой-то сайт из-за того, что стили на тень подключены - это край... таких стилей сколько угодно сделать можно, что даже генераторы в сети на них есть, вот пример вашей же темы (тем более, что там такой код стилей хоть будет кроссбраузерно прописан, нежели здесь выложенный).
Здесь вот еще опубликован метод создания тени с помощью слоеного текста, если кому нужно.
Kosten
Kosten 04 Ноября 2017 13:542
0
Про генератор совсем забыл, но мне этот больше нравится. Еще есть тема под ссылку, где та-же формация идет по стилю, но при наведение меняется.
Kosten
Kosten 05 Ноября 2017 15:363
0
Есть еще одна тема в создание красивого шрифта на стилях, где так же идет цветовая гамма и можно сказать градиент, что пользователь -SAM- поделился, где можно посмотреть реально в демонстраций.



Код
<div class="zorner_ru">
<b class="ct-top">Скрипты и шаблоны ZORNET.RU</b>
<b class="ct-bot">Скрипты и шаблоны ZORNET.RU</b>
<b class="ct-contur">Скрипты и шаблоны ZORNET.RU</b>
</div>


CSS

Код
.zorner_ru {
   position: relative;
   height: 23px;
}
.ct-top,.ct-bot,.ct-contur {font: bold 20px Tahoma;
   display: inline-block;
   position: absolute;
}
.ct-top {
   color: #f19193;
   overflow: hidden;
   height: 13px;
   top: 0px;
   left: 0px;
   z-index: 999;
}
.ct-bot {
   color: #b41118;
   z-index: 888;
}
.ct-contur {
   top: 1px;
   left: 1px;
   color: #8c1517;
   z-index: 777;
}
Войдите:
avatar