Css какое свойство управляет символами элемента заглавные или строчные
ÐÑоÑмлÑÑ ÑÑÑаниÑÑ ÑайÑа, нам не Ñедко пÑÐ¸Ñ Ð¾Ð´Ð¸ÑÑÑ Ð²ÑделÑÑÑ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²ÐºÐ¸ или какие-Ñо ÑÑагменÑÑ ÑекÑÑа заглавнÑми бÑквами. ÐонеÑно, в ÑлÑÑае еÑли ÑÑо нÑжно ÑделаÑÑ Ð¾Ð´Ð¸Ð½ Ñаз, Ñо пÑоÑе вÑего не замоÑаÑиваÑÑÑÑ Ð¸ набÑаÑÑ Ð½ÑжнÑй ÑекÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÐºÐ»Ð°Ð²Ð¸Ñи Caps Lock. Ð ÑÑо еÑли Ð¼Ñ Ð´ÐµÐ»Ð°ÐµÐ¼ какÑÑ-Ñо ÑиповÑÑ ÑÑÑаниÑÑ, и вÑе поÑледÑÑÑие бÑдÑÑ Ð½Ð° нее Ð¿Ð¾Ñ Ð¾Ð¶Ð¸, и ÑекÑÑ Ð½Ñжно бÑÐ´ÐµÑ Ð²ÑделÑÑÑ Ð² Ð¾Ð´Ð½Ð¸Ñ Ð¸ ÑÐµÑ Ð¶Ðµ Ð±Ð»Ð¾ÐºÐ°Ñ Ð½Ð° ÑÑÑаниÑе?
Ð ÑлÑÑае еÑли Ñ Ð½Ð°Ñ ÐµÑÑÑ Ð±Ð»Ð¾ÐºÐ¸, в коÑоÑÑÑ ÑекÑÑ Ð¾Ð±ÑзаÑелÑно должен бÑÑÑ Ð²Ñделен, Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ Ð´Ð»Ñ Ð½Ð¸Ñ Ð·Ð°Ð´Ð°ÑÑ Ð¾ÑобÑажение ÑекÑÑа, Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÑвойÑÑва CSS, заглавнÑми бÑквами.
Ðак ÑделаÑÑ Ð² CSS заглавнÑе бÑквÑ?
ЧÑÐ¾Ð±Ñ ÑделаÑÑ Ð² CSS заглавнÑе бÑÐºÐ²Ñ Ð¼Ð¾Ð¶Ð½Ð¾ воÑполÑзоваÑÑÑÑ ÑвойÑÑва text-transform, иÑполÑзÑÑ Ð¾Ð´Ð½Ð¾ из его знаÑений uppercase. ÐапÑимеÑ:
Ðелаем блок Ñ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²ÐºÐ¾Ð¼ в html:
<div class=”text-transformation”> <h3>ÐадаÑм в CSS заглавнÑе бÑквÑ</h3> </div> |
Ðадаем ÑвойÑÑво text-transform: uppercase; Ð´Ð»Ñ Ñега h3:
.text-transformation h3{ text-transform: uppercase; } |
ÐадаÑм в CSS заглавнÑе бÑквÑ
ТекÑÑ Ð±Ð»Ð¾ÐºÐ°
ÐÑоме uppercase данное CSS ÑвойÑÑво Ð¼Ð¾Ð¶ÐµÑ Ð¿ÑинимаÑÑ Ð¸ дÑÑгие знаÑениÑ:
capitalize -каждое новое Ñлово бÑÐ´ÐµÑ Ð¸Ð´Ñи Ñ Ð·Ð°Ð³Ð»Ð°Ð²Ð½Ð¾Ð¹ бÑквÑ
lowercase — вÑе бÑÐºÐ²Ñ ÑÑановÑÑÑÑ ÑÑÑоÑнÑми (маленÑкими)
none — знаÑение по ÑмолÑаниÑ
inherit — знаÑение наÑледÑеÑÑÑ
ÐонеÑно же, Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе пÑимениÑÑ Ð´Ð°Ð½Ð½Ð¾Ðµ ÑвойÑÑво и Ð´Ð»Ñ Ñже ÑÑÑеÑÑвÑÑÑÐ¸Ñ ÑлеменÑов на ÑайÑе. ÐапÑимеÑ, Ð²Ñ ÑеÑили измениÑÑ Ð¾ÑобÑажение заголовков ÑÑаÑей, но пеÑебиÑаÑÑ Ð²Ñе ÑÑаÑÑи на ÑайÑе и иÑпÑавлÑÑÑ Ð²Ñе вÑÑÑнÑÑ Ð·Ð°Ð¹Ð¼ÐµÑ Ð¼Ð½Ð¾Ð³Ð¾ вÑемени.
Ð ÑÑом ÑлÑÑае намного Ñдобнее бÑÐ´ÐµÑ Ð¿ÑеобÑазоваÑÑ Ñже ÑÑÑеÑÑвÑÑÑий ÑекÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÑвойÑÑва CSS в заглавнÑе бÑквÑ.
ÐÐ»Ñ ÑÑого вÑего лиÑÑ Ð½Ñжно вÑÑиÑлиÑÑ ÐºÐ»Ð°ÑÑ, коÑоÑÑй оÑвеÑÐ°ÐµÑ Ð·Ð° оÑобÑÐ°Ð¶ÐµÐ½Ð¸Ñ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²ÐºÐ° ÑÑаÑÑи, и задаÑÑ ÐµÐ¼Ñ Ð½Ñжное ÑвойÑÑво.
ÐнÑеÑеÑное ÑвойÑÑво font-variant
ÐÐ»Ñ Ð²ÑÐ´ÐµÐ»ÐµÐ½Ð¸Ñ ÑекÑÑа в CSS заглавнÑми бÑквами ÑÑÑеÑÑвÑÐµÑ ÐµÑе одно ÑвойÑÑво font-variant, коÑоÑое Ð´Ð°ÐµÑ Ð´Ð¾ÑÑаÑоÑно необÑÑнÑй и инÑеÑеÑнÑй ÑÑÑекÑ.
font-variant Ð¼Ð¾Ð¶ÐµÑ Ð¿ÑинимаÑÑ ÑÑи знаÑениÑ:
small-caps â оÑобÑÐ°Ð¶Ð°ÐµÑ Ð²Ñе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ñлова, коÑоÑÑе ÑледÑÑÑ Ð¿Ð¾Ñле заглавной бÑквÑ, капиÑелÑнÑми Ñимволами. СÑÑоÑнÑе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ð¿ÑеобÑазÑÑÑÑÑ Ð² заглавнÑе, но ÑменÑÑенного ÑазмеÑа.
normal â вид ÑÑиÑÑа по ÑмолÑаниÑ
inherit â наÑледÑÐµÑ ÑÑÐ¸Ð»Ñ Ð¾ÑобÑÐ°Ð¶ÐµÐ½Ð¸Ñ ÑÑиÑÑа Ñ ÑодиÑелÑÑкого ÑлеменÑа.
ÐÐ¾Ñ Ð¿ÑÐ¸Ð¼ÐµÑ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð´Ð°Ð½Ð½Ð¾Ð³Ð¾ ÑвойÑÑва:
<div class=”text-kapitel”> <h2 class=”kapitel”>ÐапиÑелÑнÑе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ð² заголовке</h2> <h2>СÑандаÑÑнÑй заголовок H2</h2> </div> |
CSS:
.kapitel{ font-variant:small-caps!important; } |
ÐапиÑелÑнÑе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ð² заголовке
СÑандаÑÑнÑй заголовок H2
ÐадеÑÑÑ, ÑÑо ÑепеÑÑ Ñ Ð²Ð°Ñ Ð½Ðµ Ð²Ð¾Ð·Ð½Ð¸ÐºÐ½ÐµÑ Ð¿Ñоблем Ñ Ñозданием заглавнÑÑ Ð±Ñкв! ÐÑли вам понÑавилаÑÑ ÑÑаÑÑÑ, обÑзаÑелÑно поделиÑеÑÑ ÐµÑ Ð² ÑоÑиалÑнÑÑ ÑеÑÑÑ , и подпиÑиÑеÑÑ Ð½Ð° Ð¼Ð¾Ñ ÑаÑÑÑлкÑ.
Рна ÑÐµÐ³Ð¾Ð´Ð½Ñ Ñ Ð¼ÐµÐ½Ñ Ð²Ñе. Ðо вÑÑÑеÑи в ÑледÑÑÑÐ¸Ñ ÑÑаÑÑÑÑ !
С Ñважением Ð®Ð»Ð¸Ñ ÐÑÑаÑÑ
Источник
CSS заглавные буквы помогают разбить монотонность однотипного дизайна, тексты которого выглядят одинаково от начала до конца.
Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.
Поднятые и опущенные буквы все еще используются в наши дни. Их можно встретить в газетах, журналах и книгах, а также в цифровой типографии. Поднятые литеры иногда называются вытянутыми. Они размещаются на одном уровне с нижней частью текста, который следует за ними. Опущенные буквы размещаются на одном уровне с верхней частью текста, иногда в слое позади основной части текстового контента, или остальной текст обтекает их.
Поднятые буквы задаются намного проще, так они находятся на одном уровне с остальным текстом, и обычно для этого не нужно менять обтекание внешних полей. Опущенные буквы требуют более тонкой настройки. Вам будет проще разобраться с этим, если сначала вы поймете, как обрабатываются поднятые литеры.
Дизайнеры, которые уже имеют представление о CSS, знают, что нужно создать отдельный класс CSS для первой буквы заглавной.
Код CSS для элемента абзаца и класса, создающего букву, будет выглядеть следующим образом:
.myinitialcaps {font-size:48px; font-family: Didot;}
А HTML-код будет выглядеть так:
Что дает нам:
Кажется, слишком просто? На самом деле вам придется вносить коррективы в зависимости от конкретных поднятых букв, так как каждая заглавная литера требует специального кернинга. После выбора шрифта для поднятых букв и для основного текста, нужно создавать отдельные классы для каждой поднятой литеры. В приведенном ниже CSS-классе .myinitialcapsi поле справа имеет отрицательное значение, чтобы уменьшить расстояние между I и n.
<p><span class=”myinitialcaps”>I</span>n this case, there’s some extra space between the “I” and “n.”</p> <p><span class=”myinitialcapsi”>I</span>ncluding a new class with a negative margin pulls it closer.</p>
В зависимости от разрешения экрана в приведенном выше примере I и n могут выглядеть так, будто они слились вместе. Это происходит из-за засечек на концах букв. Поэтому, прежде чем выбирать окончательный вариант стилей CSS, протестируйте сайт на различных устройствах, чтобы посмотреть, как на них выглядит текст заглавными буквами CSS.
Можно увеличить не только буквы в начале текста. Вы можете реализовать еще один класс, чтобы создать увеличенную версию кавычек, которые будут выводиться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее — 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I:
<p><span class=”myinitialcapsq”>“</span><span class=”myinitialcapsi”>I</span>ncluding” a new class with a negative margin pulls it closer.</p>
Нужно очень внимательно задавать каждую из CSS заглавных букв вместе с кавычками, чтобы их кернинг и выравнивание соответствовали окружающей разметке. Например, букву Т нужно будет сместить влево, немного за край абзаца, чтобы ее поперечная линия визуально вписывалась в макет. Аналогично нужно будет поступить и с круглыми буквами, такими как C, G, O и Q. В этом примере использованы размеры шрифтов 20, 30 и 48. Но вам нужно будет подобрать размеры, исходя из специфики шрифтов, которые вы выбрали. А также размеров и разрешений экранов, на которых будет просматриваться сайт.
С помощью псевдоэлемента CSS можно легко создать поднятую букву, добавив ::first-letter к элементу абзаца. Используйте :first-letter (с одним двоеточием) для устаревших браузеров:
p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: “Monotype Bernard Condensed”, serif; margin-right:0.03em;}
.initialb {margin-right:-0.1em;}
.initialn {margin-right:-0.15em;}
HTML-код, который содержит классы CSS, учитывающие кернинг букв N и B, будет выглядеть следующим образом…
With a line break, the next line has no initial cap.</p>
<p><span class=”initialn”>n</span>otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?</p>
<p><span class=”initialb”>B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?</p>
<p>В букву преобразовывается первая заглавная буква абзаца.<br>
Первая буква после разрыва строки не будет преобразовываться в заглавную.</p>
<p><span class=”initialn”>о</span>Обратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.6em.</p>
<p><span class=”initialb”>О</span>Однако и после принудительного разрыва строки, ив начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: <em>Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев?</em> Что ж, вы можете. Но необходимо ли это?</p>
Даже с учетом преимуществ, которые предоставляют псевдоэлементы, нам пришлось добавить много кода, чтобы определить отдельные классы для обработки проблем, связанных с кернингом и отступами. Но этот метод преобразует первую букву каждого нового абзаца в CSS заглавную букву. Для кого-то он может не подойти, потому что не нужно преобразовать первую букву каждого абзаца.
Добавление псевдокласса :first-child помогает решить проблему ненужного преобразования первых букв:
p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: “Monotype Bernard Condensed”, serif; margin-right:0.03em;}
Объединив этот код с HTML:
<p>Так как преобразовывается только буква, определенная как first-child, обратите внимание, что этот пример отличается от предыдущего, без first-child. Кроме этого мы не преобразуем первые буквы после начала абзаца и после принудительного разрыва строки. Это выглядит более элегантно, по сравнению с тем, как выглядел макет, когда мы преобразовали все первые буквы абзацев.</p>
Преимущество использования псевдоклассов заключается в возможности обрабатывать различные частные случаи. А что насчет недостатков? Существует много различных псевдоклассов, и их можно объединить таким количеством способов, что от этого может пойти кругом голова. Например, псевдоклассы :first-child и :first-of-type могут давать одинаковые результаты. Также можно применить псевдокласс не только к абзацу, но и к элементам <section> или <div>. Например, как показано в приведенном ниже примере с поднятым буквами в шрифте Didot. Обратите внимание, как атрибут margin был добавлен справа от буквы А. Иначе она «склеилась» бы с буквой s в начале раздела:
section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}
И вместе с HTML:
<p>В начале раздела для первой буквы задается поднятая буквица.</p>
<p>И новый абзац…</p>
</section>
Если вы чувствуете тягу к экспериментам, то можете исследовать различные методы в дополнение к :first-child и :first-of-type. Например, такие как :nth-of-type или :nth-of-child, чтобы посмотреть, как те или другие типы псевдоклассов можно использовать для текста заглавными буквами CSS. Независимо от того, будете ли вы следовать изложенным в этой статье принципам или начнете копать глубже, когда вы научитесь работать с псевдоклассами CSS first-child, :first-of-type и :first-letter, вы сможете правильно применять их к элементам HTML.
Использование отдельных классов вместе с псевдоклассами для обработки различных букв — это процесс проб и ошибок, вычислений положительных и отрицательных отступов. И это требует большого терпения. Для таких букв, как F, G, O, P, Q, T, W, V и Y также потребуются отдельные классы кернинга.
Но самое интересное начинается тогда, когда вы на практике начинаете тестировать различные сочетания шрифтов и создавать поднятые буквы, которые будут привлекать внимание ваших читателей и выделять ваш сайт из общей массы.
Данная публикация представляет собой перевод статьи «Making Initial Letters Part I: Raised Initials» , подготовленной дружной командой проекта Интернет-технологии.ру
Источник
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Спецификация
- Браузеры
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
nonecapitalizelowercaseuppercase
text-transform: {{ playgroundValue }};
}
Пример
<html>
<head>
<meta charset=”utf-8″>
<title>text-transform</title>
<style>
h1 {
text-transform: uppercase; /* Заглавные буквы */
}
p {
text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */
}
</style>
</head>
<body>
<h1>Культурный памятник Средневековья</h1>
<p>Амазонская низменность неумеренно берёт
небольшой провоз кошек и собак, а Хайош-Байа
славится красными винами. </p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства text-transform
Объектная модель
Объект.style.textTransform
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Источник
Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы узнаете, как задаются заглавные буквы css — средствами, ознакомитесь с несколькими вариантами создания буквицы и конечно же сможете все опробовать на практике. Ну а теперь давайте переходить к самому интересному!
Займемся трансформацией текста
Благодаря каскадным стилевым таблицам можно изменять как первый символ блока, так и весь текст. Я расскажу вам, как можно сделать оба варианта. При этом все названные в данной статье инструменты поддерживаются в трех уровнях языка: css1, css2, css2.1 и css3.
Начну с интересного свойства, которое видоизменяет весь текстовый контент в выбранном блоке. Это text-transform.
Названный элемент может преобразовывать символы к прописным, строчным, а также задавать каждый первый символ слова в виде заглавной буквы. Подробнее о значениях я написал в таблице.
| Ключевое слово | Предназначение |
| none | Указывает, что регистр изменяться не будет. |
| Capitalize | Изменяет первый символ каждого слова на заглавную букву, при этом остальные остаются неизменными. |
| Uppercase | Контент трансформируется в верхний регистр, т.е. все буквы становятся большими. |
| Lowercase | Контент трансформируется в нижний регистр, т.е. все символы становятся строчными. |
| inherit | Наследуются характеристики предка. |
Вот теперь для закрепления теоретического материала разберите пример.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Трансформация текста</title> <style> body { text-align: center; } h1 { text-transform: uppercase; } h3 { text-transform: capitalize; } </style> </head> <body> <h1>Внимание!</h1> <h3>!Завтра на все косметические товары скидка!</h3> <p>Акция действует во всех филиалах, расположенных в Вашем городе.</p> </body> </html> |
Создание буквицы
Если вы не знаете, что подразумевает под собой термин «буквица», то как раз настало время узнать, так как это напрямую связано с текущей темой.
Буквица (или еще иногда говорят инициал) – это первая буква главы, которая отличается от остальных своим крупным размером, цветом и в некоторых случаях даже дизайном шрифта. В жизни пример такой буквы можно встретить в старых рукописях и книгах.
Существует несколько способов создания инициала. Часто символ выделяют тегом языка разметки <span> и после в стилях прописывают определенные свойства, которые его видоизменяют. Это неплохой способ, однако данная публикация рассказывает про механизмы css (которые, по моему мнению, в данном случае использовать намного логичнее и удобнее).
Для решения поставленной задачи можно воспользоваться таким инструментом, как псевдоэлемент.
Так, в данном случае используется :first-letter. Как и все псевдоэлементы, он приписывается к селектору через двоеточие. После по всем правилам таблиц стилей указываются свойства. Однако применить можно только те свойства, которые относятся к редактированию шрифтов, отступов, цвета, заднего фона, полей и границ.
Предлагаю рассмотреть конкретный пример. Реализуя представленную небольшую программу, я решил сделать не просто цветную буквицу, а заполнить ее цветами. Для этого нужно использовать несколько хитрых приемов с установкой прозрачного цвета шрифта и заливкой буквы выбранным изображением.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Выступающий инициал</title> <style> p { font-size: 26px; font-family: fantasy; } P:first-letter { /*прописываю стилевые правила для первой буквы абзаца*/ font-family: sant-serif; font-weight: 900; color: transparent; background: url(https://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); background-size: 99%; font-size: 119px; -webkit-background-clip: text; } </style> </head> <body> <p>В этом абзаце написано предложение с очень интересным содержанием.</p> <p>Продолжим интересный рассказ и в следующем абзаце.</p> </body> </html> |
Полученный результат выглядит очень привлекательно и необычно, что является идеальным решением для сайта.
Как видите данная тема очень простая. Приведенный мною программный код вы спокойно можете использовать для своих веб-ресурсов, модифицируя и подгоняя под свой стиль.
Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов
Загрузка…
Источник