• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание заглавной буквы при помощи CSS3 (Как сделать Drop Caps для описание на CSS3)
Создание заглавной буквы при помощи CSS3
Kosten
Дата: Суббота, 10.02.2018, 04:02 | Сообщение 1
Администраторы
Сообщений:18274
Награды: 55


Веб сайты стали средством обмена информацией со всем миром. Это перешло на включение медиа, например, фотографий и видео. Но текст на странице по прежнему остается основным выбором для веб-публикации. Это будет означать, что то, как вы структурируете параграфы предложения и текст на странице, может сильно повлиять, если посетитель захочет придерживаться и прочитать то, что вы хотите сказать.

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

Знак заглушки - это первая буква абзаца или текстовый блок, который больше и обычно отличается от остальных букв. Это можно сделать несколькими способами, включая вставку тегов span в HTML, но один эффективный и быстрый способ сделать, это использовать CSS. С помощью :first-of-type - где используйте это, если вы хотите использовать кепку только для первого абзаца и псевдоселекторов :: first-letter, мы можем стилизовать первые буквы абзацев, не изменяя наш HTML.



Как пример:

Код
<p>Когда разработчики игр обсудят свои самые большие влияния.</p>

CSS

Код
p:first-of-type::first-letter {
    color: #bf0e03;
    font-size: 29px;
    font-weight: bold;
    margin-right: 2px;
    margin-bottom: 0px;
}

Используя селектор ::first-letter, любой тип стиля, включая границы, цвета, изменения шрифта и изменения стиля шрифта, можно применить к начальному знаку.

Демонстрация:
Прикрепления: 0741676.png(14.4 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 10.02.2018, 11:30 | Сообщение 2
Администраторы
Сообщений:18274
Награды: 55


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



Код
p:first-child:first-letter { float: left; color: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Демонстрация:
Прикрепления: 2467186.png(29.0 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 10.02.2018, 11:33 | Сообщение 3
Администраторы
Сообщений:18274
Награды: 55


Так можете задать расстояние между знаками.

Код
<p style="letter-spacing:2px">Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя</p>

Здесь автоматически выводятся большие знаки под заголовок.

Код
<p><big>Здесь найдете интересные решения в создание сайтов uCoz,/big></p>
<p style="text-transform:uppercase">Здесь найдете интересные решения в создание сайтов uCoz</p>
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание заглавной буквы при помощи CSS3 (Как сделать Drop Caps для описание на CSS3)
  • Страница 1 из 1
  • 1
Поиск: