Оформление текста в Blogger
Когда только начинал вести блог, я часто сохранял для себя полезные находки по оформлению и настройке шаблонов. Сегодня хочу поделиться простыми, но эффектными стилями для выделения текста в Blogger. Они помогают структурировать материал: советы можно оформить в синем блоке, предупреждения – в красном, а важную информацию выделить нейтральным серым. Удобно и выглядит аккуратно 😉
CSS-блоки с иконками
Сначала добавляем стили CSS в шаблон перед строкой ]]></b:skin> или </style>:
.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding-left: 10px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEo3IYJQGgHiGaf3XNDE2UMFWR_v7YCxHZnAQtPvgLI6VaUFpNku9AimApRXg-HbXqWeCCndHtriHLvSOzWcBn6tHOBNmqfUjQ1xBjzMI0R_N7oxgaF-8jJX2_iYzLd2mU8XcySgoc_7s/s1600/info.png') no-repeat 12px 8px;
color: #222;
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2G3beHtYzkoFTKORshlz9Fy9j_DeRvqLt-Z2HfLDbpL3eRB5yCe_ZPValeBRFpFxWEOzaUmutz-dIxlmHxxzP5_O3CoX6nkOzPheGnwD0iNFihfTFXWjBrxNyqNCyIPKyoVauGarzus/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56UmDm2EOigM5O5BlTwIRVyZb54SVy3uqZSVu5qf2CbmeJ32BI_MC-a5DtCgUbMfkiY23ib5DhoqsOyfQQSVzvefmvZHSkbPtQtgU56-ZJjRXLX5rQzZWh9yb3Q3zFMhGdVGefXO2dA4/s1600/warning.png') no-repeat 12px 8px;
color: #fff;
}
Теперь в редакторе можно обернуть текст в нужный блок. Например:
<div class="info">Ваш текст...</div>
И получится вот так:
Цветные блоки без иконок
Если иконки не нужны, можно использовать более минималистичный вариант. Добавляем в шаблон такие стили:
.colorbox {
overflow: hidden;
position: relative;
margin: .5rem 0 1rem;
transition: box-shadow .25s;
border-radius: 2px;
color: #fff;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
padding: 20px;
font-size: 14px;
}
.colorbox.blue {background:#03a9f4}
.colorbox.green {background:#4CAF50}
.colorbox.red {background:#F44336}
.colorbox.orange {background:#ff9800}
.colorbox.purple {background:#673ab7}
Использование простое:
<div class="colorbox purple">Ваш текст...</div>
И результат:
Таким образом можно быстро и красиво выделять важные части статьи. А чтобы не искать пример каждый раз – я и сохранил его у себя в блоге 😊
Источник: idblanter.com
Комментарии
Отправить комментарий