» » Оформление текста Blogger

Оформление текста Blogger

Предлагаю посмотреть варианты оформления текста в статье. 

Способ 1

Текст передвигается. Проверить работу кода можно в визуальном редакторе.
Код:
<style>
 text {
        font-size: 28px;
        color: #8f64ff;}
    text {
  animation-duration: 3s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
    </style>
<text>Ваш текст</text>

Красным выделила — ваш текст, который нужно вставить в код 
Синим — размер текста 
Зелёным — цвет текста
Первая буква в статье
Красиво оформить текст в статье можно, выделением первой буквы поста. Нужно всего лишь добавить небольшой код в шаблон выше строки ]]></b:skin>. Сделать букву можно большого размера, в квадратной или круглой рамке, с узором, любого цвета, можно установить другой шрифт для буквы и так далее. Нужно придумать, как оформить буквицу, а потом добавить в коды изменения.
Сам код цветной большой буквицы выглядит так:
.post-body:first-letter {
  font-size: 30px;
  margin-right: 2px; 
  color: #8f64ff;
  font-weight: bold;
  text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99;
}
Получилось:
первая буква 5
Выделила в коде всё, что можно поменять:
Красным — размер шрифта
Зелёным — размер и цвет тени
Синим — цвет буквы.

Код буквицы в рамке, добавляем в шаблон выше строки ]]></b:skin>:
.post-body:first-letter {
  font-size: 20px;
  padding: 2px 10px;
  margin-right: 5px; 
  background: #FAF4F4;
  border: 6px double;
  color: #879539;
  float: left;
  font-weight: bold;
}
Получится:
первая буква 4
Красный — размер буквы
Синий — цвет внутри рамки
Оранжевый — цвет рамки и буквы

Код с картинкой-узором, добавляем в шаблон выше строки ]]></b:skin>
 .post-body:first-letter {
  font-size: 20px;
  padding: 2px 10px;
  margin-right: 5px; 
  background: url(https://i.yapx.ru/ICwA7.jpg);
  border: 2px solid #8f64ff;
  color: #1e1f1b;
  float: left;
  font-weight: bold;
  box-shadow: 1px 1px 1px #9E9D99;
}
Получится:
первая буква 3
Меняем:
Красный — размер шрифта
Зелёный — цвет рамки и размер
Синий — цвет буквы
Оранжевый — цвет тень и размер тени
Фиолетовый — ссылка на картинку-узор. Картинка всего 9px, вырезана из бесшовного узора.

Если нужно сделать красивые буквы в каждом абзаце, то пишем в шаблоне выше строки            ]]></b:skin> такой код:
p:first-letter{
  font-size: 20px;
  padding: 5px 10px;
  margin-right: 5px; 
  background: #8f64ff;
  color: #FAF4F4;
  float: left;
  border-radius: 50% 0;
  font-weight: bold;
}
А в редакторе, в режиме HTML, нужно каждый абзац обернуть в теги <p>.................</p>
Получится:
первая буква 2
Или вот так, смотря какой код применить.
первая буква





























































Ваши комментарии:

Комментарии со спамом удаляются.