Оформление текста 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;
}

Получилось:

Выделила в коде всё, что можно поменять:

Красным — размер шрифта

Зелёным — размер и цвет тени

Синим — цвет буквы.

Код буквицы в рамке, добавляем в шаблон выше строки ]]></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;
}

Получится:

Красный — размер буквы

Синий — цвет внутри рамки

Оранжевый — цвет рамки и буквы

Код с картинкой-узором, добавляем в шаблон выше строки ]]></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;
}

Получится:

Меняем:

Красный — размер шрифта

Зелёный — цвет рамки и размер

Синий — цвет буквы

Оранжевый — цвет тень и размер тени

Фиолетовый — ссылка на картинку-узор. Картинка всего 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>

Получится:

Или вот так, смотря какой код применить.