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

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


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

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

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

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

Пользовательский поиск
Foto Saya
My Photo