Dropcap абзаца с элементами первой строки и первой буквы CSS

Есть несколько CSS-селекторов или свойств, которые, я думаю, редко используются в дикой природе, но на самом деле они существуют со времен CSS1; некоторые из них в том числе :первая строка а также :первое письмо pesudo-элементы.

Как пользоваться?

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

 p: первая буква font-size: 50px;  

Этот код приводит к следующей презентации.

Следует отметить несколько моментов, однако этот эффект будет применяться только тогда, когда первому символу не предшествует другой элемент, например, изображение. Кроме того, когда у нас есть несколько одинаковых целевых элементов подряд, все они также будут затронуты.

Кроме того, с точки зрения :первая строка, этот Псевдо-элемент будет нацелена на первую строку целевого элемента, этот пример ниже показывает, как мы выделим жирным шрифтом первую строку абзаца.

 p: первая строка font-weight: полужирный;  

Как и предыдущий код :первое письмо, это также повлияет на все первые строки элементов абзаца на странице.

Таким образом, в реальных случаях, когда мы обычно хотим добавить буквицу или изменить первую строку только в первом абзаце мы должны быть более конкретными - либо добавив дополнительный атрибут класса, либо применив эти псевдоэлементы вместе с :Первый ребенок или же : Во-первых, из-типа селектор, вот так.

 p: первый ребенок: первая буква font-size: 50px;  p: first-child: first-line font-weight: bold;  

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

Псевдоэлементы на работе

Хорошо, теперь давайте попробуем разработать лучший вид абзаца, используя псевдоэлементы. Но прежде чем мы начнем, нам нужен специальный шрифт для нашей буквицы, и вот мой выбор: Hominis by Paul Lloyd. Затем мы определяем новое семейство шрифтов в таблице стилей следующим образом.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); Формат src: url ('fonts / HOMINIS-webfont.eot? #iefix') ('embedded-opentype')), формат url ('fonts / HOMINIS-webfont.woff') ('woff'), url ('fonts /) Формат HOMINIS-webfont.ttf ') (' trueetype '), формат url (' fonts / HOMINIS-webfont.svg # HominisNormal ') (' svg '); Вес шрифта: нормальный; стиль шрифта: нормальный;  

Далее мы устанавливаем семейство шрифтов по умолчанию для абзацев.

 p color: # 555; семейство шрифтов: «Грузия», Times, Serif; высота строки: 24px;  

В этом примере мы будем использовать :Первый ребенок селектор, чтобы нацелиться на первый абзац и применить декоративные стили, чтобы он выглядел более заметным:

 p: first-child padding: 30px; граница слева: 5px solid # 7f7664; цвет фона: # f5f4f2; высота строки: 32px; тень от коробки: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); положение: относительное;  

Затем мы добавляем буквицу, используя :первое письмо, увеличить размер шрифта, а также назначить ему новое семейство шрифтов;

 p: первый ребенок: первая буква font-size: 72px; плыть налево; набивка: 10 пикселей; высота: 64 пикс; семейство шрифтов: 'HominisNormal'; цвет фона: # 7F7664; поле справа: 10 пикселей; белый цвет; радиус границы: 5 пикселей; высота строки: 70px;  

Мы также подчеркнем первую строку с :первая строка, вот так.

 p: первый ребенок: первая строка font-weight: bold; размер шрифта: 24 пикселя; цвет: # 7f7664;  

Наконец, мы хотим добавить декоративный атрибут в первый абзац с помощью скрепки, используя :после Псевдо-элемент.

 p: first-child: after background: url ("… /images/paper-clip.png") прокрутка без повтора 0 0 прозрачная; содержание: ""; дисплей: встроенный блок; высота: 100 пикселей; положение: абсолютное; справа: -5px; верх: -35px; ширина: 100 пикселей;  

Вот и весь код, который нам нужен, теперь наш абзац должен выглядеть намного лучше;

Вы также можете увидеть живое демо по ссылкам ниже:

• Посмотреть демо
• Скачать исходный код

Последняя мысль

Как мы упоминали ранее в этом посте, эти псевдоэлементы, в частности :первое письмо а также :первая строка был включен с CSS1, следовательно, они также поддерживаются даже в Internet Explorer 8 ранее.

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