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

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

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

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

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

Введите Ваш email