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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

p: первая буква {
размер шрифта: 50 пикселей;
}

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

p: первая строка {
вес шрифта: полужирный;
}

Как и предыдущий код: first-letter, это также повлияет на все первые строки в элементах абзаца на странице.
первая строкаИтак, в реальных случаях, когда мы обычно хотим добавить буквицу или изменить первую строку только в первом абзаце, нам нужно быть более конкретными – либо добавив дополнительный атрибут класса, либо применив эти псевдоэлементы вместе с: first-child или: селектор первого типа, вот так.

р: первый ребенок: первая буква {
размер шрифта: 50 пикселей;
}
p: первый ребенок: первая строка {
вес шрифта: полужирный;
}

Итак, затронутый абзац теперь только первый.
крышка

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

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

@ font-face {
семейство шрифтов: ‘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’) (‘истинный тип’),
формат url (‘fonts / HOMINIS-webfont.svg # HominisNormal’) (‘svg’);
Вес шрифта: нормальный;
стиль шрифта: нормальный;
}

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

п {
цвет: # 555;
семья шрифтов: «Грузия», Times, Serif;
высота строки: 24px;
}

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

р: первый ребенок {
отступы: 30 пикселей;
рамка слева: 5px solid # 7f7664;
цвет фона: # f5f4f2;
высота строки: 32px;
тень от коробки: 5px 5px 0px 0px rgba (127, 118, 100, 0,2);
положение: относительное;
}

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

р: первый ребенок: первая буква {
размер шрифта: 72 пикселя;
плыть налево;
набивка: 10 пикселей;
высота: 64 пикс;
семейство шрифтов: ‘HominisNormal’;
цвет фона: # 7F7664;
поле справа: 10 пикселей;
цвет белый;
радиус границы: 5 пикселей;
высота строки: 70px;
}

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

p: первый ребенок: первая строка {
вес шрифта: полужирный;
размер шрифта: 24 пикселя;
цвет: # 7f7664;
}

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

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

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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *