Делаем заглавные буквы css стилями с использованием псевдоэлементов

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

Займемся трансформацией текста

Благодаря каскадным стилевым таблицам можно изменять как первый символ блока, так и весь текст. Я расскажу вам, как можно сделать оба варианта. При этом все названные в данной статье инструменты поддерживаются в трех уровнях языка: css1, css2, css2.1 и css3.

Начну с интересного свойства, которое видоизменяет весь текстовый контент в выбранном . Это text-transform .

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

Вот теперь для закрепления теоретического материала разберите пример.

Трансформация текста body { text-align: center; } h1 { text-transform: uppercase; } h3 { text-transform: capitalize; } Внимание! !Завтра на все косметические товары скидка!

Акция действует во всех филиалах, расположенных в Вашем городе.

Создание буквицы

Если вы не знаете, что подразумевает под собой термин «буквица», то как раз настало время узнать, так как это напрямую связано с текущей темой.

Буквица (или еще иногда говорят инициал) – это первая буква главы, которая отличается от остальных своим крупным размером, цветом и в некоторых случаях даже дизайном шрифта. В жизни пример такой буквы можно встретить в старых рукописях и книгах.

Существует несколько способов создания инициала. Часто символ выделяют тегом языка разметки и после в стилях прописывают определенные свойства, которые его видоизменяют. Это неплохой способ, однако данная публикация рассказывает про механизмы css (которые, по моему мнению, в данном случае использовать намного логичнее и удобнее).

Для решения поставленной задачи можно воспользоваться таким инструментом, как .

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

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

Выступающий инициал p { font-size: 26px; font-family: fantasy; } P:first-letter { /*прописываю стилевые правила для первой буквы абзаца*/ font-family: sant-serif; font-weight: 900; color: transparent; background: url(http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); background-size: 99%; font-size: 119px; -webkit-background-clip: text; }

В этом абзаце написано предложение с очень интересным содержанием.

Продолжим интересный рассказ и в следующем абзаце.

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

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

Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!

Пока-пока!

С уважением, Роман Чуешов

Зачастую в спешке при добавлении материалов на сайт или, например, создании новой темы на форуме пользователь может начать писать предложение (название) с маленькой (строчной) буквы. Это в какой-то степени является ошибкой.

Я покажу несколько вариантов решения этой задачи: PHP и CSS подойдут больше для уже опубликованных материалов, когда как jQuery сможет исправить положение еще до публикации.

Первая буква строки в верхнем регистре на PHP

На PHP существует функция под названием «ucfirst », которая как раз преобразует первый символ строки в верхний регистр, но минус ее в том, что она не совсем корректно работает с кириллицей.

Для этого мы напишем свою небольшую функцию. Реализация будет выглядеть следующим образом:

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

Первая буква строки в верхнем регистре на CSS

Этот метод визуально (то есть в исходном коде сайта предложения будут выглядеть как есть) также преобразует первый символ в верхний регистр.

Использование следующее:

первое предложение

второе предложение

третье предложение

четвертое предложение

#content p:first-letter { text-transform: uppercase; }

С помощью псевдоэлемента «first-letter » и свойства «text-transform » мы задали оформление для каждой первой буквы параграфа.

Первая буква строки в верхнем регистре на jQuery

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

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

$(document).ready(function() { $(".content").on("keyup", function() { var text = $(this).val(); var new_text = text.charAt(0).toUpperCase() + text.substr(1); $(this).val(new_text); }); });

Скрипт срабатывает как при написании текста, так и простой его вставке. Не забывайте, что для работы скриптов на вашем сайте необходимо наличие подключенной библиотеки jQuery.

Декабрь 20, 2015

Всем привет, сегодня у меня очень коротенькая информация, которая поможет вам сделать на сайте первую букву в любом элементе с помощью css. В этом нам поможет псевдокласс:first-letter . Для новичков советую почитать статью о том, что такое псевдокласс.

first-letter в действии

Итак, все предельно просто. Допустим, у нас есть текст – 3 абзаца. В первом абзаце нужно выделить самую первую букву, как часто делают во многих книгах. То есть именно этой букве нужно задать свои собственные стили: размер шрифта, цвет и т.д.

Это делается с помощью псевдокласса:first-letter , который надо прописать элементу, внутри которого непосредственно располагается наш текст. Но если мы сделаем так:

P:first-letter{ color: red }

Как вы думаете, в каких абзацах первую буквы станут красными? Правильно, во всех абзацах. А нам-то нужно только в первом! Варианты решения:
— прописать первого абзацу стилевой класс и через этот селектор оформить букву
— выбрать первый абзац с помощью свойств first-child или nth-child

Решение 1 в коде:

Abzac1:first-letter{ стили… }

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

Решение 2 в коде:

P:first-child:first-letter{ стили… }

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

Итак, мы нашли 2 простейших решения. Читайте этот блог, чтобы узнавать другие полезные вещи.

Псевдоэлемент first-letter предназначен для оформления первой буквы элемента. Любые предшествующие знаки пунктуации должны быть оформлены вместе с первой буквой. Немногим ранее, до версии CSS 2.1:first-letter мог использоваться только с блочными элементами. А начиная со спецификации CSS 2.1 область его применения расширилась, и теперь:first-letter доступен для любого элемента.
К данному псевдоэлементу можно применять только стили, связанные с оформлением текста, границами, полями, цветом.

Пример p { font-size: 1em; } p:first-letter{ color: red; font-size:2em; } Псевдоэлемент::first-letter Результат

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

Пример p { font-size:1em; } p:first-letter { display:block; margin:0.2em 0.2em 0 0; float:left; color:red; font-size:2.5em; } Псевдоэлемент::first-letter

Lorem ipsum dolor sit amet, integer ut a a nulla lectus. Scelerisque id vitae ac orci. Pharetra porttitor ipsum vel quisque arcu, ligula sit ut at quisque, suspendisse wisi mollis nam massa. Diam consectetuer nec, a dui eu, dapibus pulvinar et vel morbi viverra morbi, odio eros erat ut accumsan, luctus elementum aptent nulla. Laoreet dolor ridiculus deserunt amet erat, id ultricies, dolor dolor parturient suspendisse pretium porro id, id magnis mi wisi in. Congue a nulla nunc ut nisl, curabitur odio commodo velit ad.

Ac quo non libero. Maecenas diam elit, conubia suspendisse et vulputate mollis et cubilia, nec ligula nulla, fusce ultrices. Ligula quam auctor sem nec, est nulla. Integer pharetra viverra eget ipsum, wisi facilisis consequat ullamcorper, tenetur diam, viverra ac eget vestibulum mauris ac, quisque etiam. Id ultrices, lacus suspendisse nulla.

Результат

Ознакомившись с данной статьей Вы сможете сделать на своем сайте автоматическое отображение первой буквы статьи большого размера, как это делают в газетах и журналах.

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

Я предлагаю сделать намеченное двумя способами: при помощи CSS3 и классической связкой CSS+HTML (кроссбраузерно).

Вот нечто подобную букву сейчас попробуем сделать. Для начала автоматически при помощи CSS3.

Как сделать большую букву автоматически

В данном методе при помощи некоторых параметров CSS3 мы автоматизируем процесс выделения заглавной первой буквы статьи. Все, что нам необходимо, это добавить в файл стилей (style.css) следующую строку:

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; }

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 ; }

Немного поясню: английская буква p (самая первая) - это тег

Обозначающий абзац (аналогично нажатие клавиши Enter во время набора статьи). Структура вашей статьи содержит именно такие теги, когда вы начинаете новый абзац. Вот для него мы и задаем необходимые параметры.

То, что стоит в представленном коде после этой буквы p , а именно first-child:first-letter, позволяет автоматически вычислить первую букву в статье.

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

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

Делаем большую букву кроссбраузерной вручную

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

Чтобы подобное реализовать, необходимо будет в файле стилей style.css прописать любое название класса с атрибутами из примера выше. Выглядеть это будет примерно так (класс bigletter я придумал):

Bigletter { float: left; color: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Bigletter { float : left ; color : #0078BF ; font-size : 75px ; line-height : 60px ; padding-top : 4px ; padding-right : 8px ; padding-left : 3px ; font-family : Georgia ; }

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