Красивая первая буква в сообщении.

буквица
Доброго времени суток, друзья. Как красиво оформить первую букву в названии поста я упоминала в этой шпаргалке. Посчитала нужным немного дополнить тему и облегчить для начинающих блогеров реализовать такой вариант в сообщении блога.
Существует 2 способа реализации буквицы. Можно применить тег <span> или использовать CSS псевдо-элемент :first-letter. Второй вариант не всегда может корректно отображаться в разных браузерах, но всё же рассмотрим оба, чтобы вы могли попробовать и выбрать подходящий.

Для первого будем использовать следующий код.

<span class="drop-cap">Здесь первая буква</span>Здесь весь остальной текст.


И вот такой код CSS.

<style>span.drop-cap {
  font-size:300%;
  font-weight:bold;
  font-family:Georgia,Serif;
  float:left;
  margin-right:10px;
  padding:2px 5px;
  border:3px double #777;
  background:#ECE9D8;
}</style>


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

Для второго варианта. Обычно в стандартных шаблонах Блоггер всё содержание поста заключено в теги <div> с атрибутом class='entry-content' или class='post-body'. Теперь зная родительский элемент зададим следующее.

<div class="post-body ">Здесь ваш текст</div>


И зададим стили CSS для первой буквы.

<style>.post-body:first-letter {
  font-size:300%;
  font-weight:bold;
  font-family:Georgia,Serif;
  float:left;
  margin-right:10px;
  padding:2px 5px;
  border:3px double #777;
  background:#ECE9D8;
}</style>


Если нужно, чтобы постоянно таким образом отображалась первая буква, то разумнее будет установить выбранный вами код CSS, только без тегов <style>, перед строкой ]]></b:skin>, непосредственно в шаблоне блога. А потом уже в сообщении прописывать нужный HTML код.

буквица CSS

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

Спасибо вам за внимание и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


4 комментария:

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

    ОтветитьУдалить
  2. Наташа, если туту ещё со стилями поработать вообще конфетка будет.

    ОтветитьУдалить
  3. Анонимный1/13/2018

    Добрый день,
    Подскажите пожалуйста, как установить в CSS положение первой буквы ниже уровня первой строки, а также, как увеличить отступ снизу?

    Спасибо!

    ОтветитьУдалить
  4. За положение буквы отвечает свойство padding:2px 5px; Играйтесь с ним. Про отступ снизу не совсем поняла. прочитайте этот пост http://www.shpargalochki.ru/2017/01/svoistva-margin-padding.html
    И вот здесь ещё вариант http://www.shpargalochki.ru/2014/12/krasivo-oformit-pervuju-bukvu.html

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск