Фон для текста

Озадачился, на днях, я вопросом, как из основного текста публикации выделить более значащую его часть, чтобы именно на неё пользователь обратил больше внимания своего.

Естественно, можно использовать уже встроенный функционал текстового редактора блоггера: выделить полужирным шрифтом, курсивом, ~~зачёркнутым~~или же подчёркнутым; увеличить/уменьшить размер шрифта или же другим (например, салатовым) цветом выделять; можно играть стилем шрифта и т.д...
Но весь этот стандартный набор редактора меня уже не устраивал. Мне надо был текст выделенный именно на другом, отличающемся от основного, сплошном фоне или, что лучше, в рамке!

Решение, как оказалось, было практически на поверхности...
Тянуть резину больше не буду...

Выделение части текста на сплошном фоне (без рамки)!

допустим, что эта часть содержимого статьи должна привлечь больше внимания посетителя, поэтому мы её выделили таким образом.
Код данного фона такой:
<span style="background: #eeeeee; padding: 10px; display: block;">текст, который хотите выделить</span>
Где:
- background: #eeeeee; - цвет фона (в данном случае, #eeeeee - цвет "Морской пены") - можете свой цвет подбирать;
- padding: 10px; - определяет значение (отступ) полей вокруг текста (содержимого) - от ноля до... сами можете подобрать;
- display: block; - этот параметр как раз и задаёт блочность содержимого. Без него не будет работать весь код (вернее, фон не будет одним сплошным блоком) - не удаляйте его с кода!

Как видите, сейчас фон сплошной, то есть, как отдельный, независимый блок

Выделение части текста на сплошном фоне (в рамке)!

<span style="background: #eeeeee; border: 10px inset #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>
Где:
- background: #eeeeee; - цвет фона (в данном случае, #eeeeee - цвет "Морской пены")
- border: 10px inset #798081; - ширина рамки (в данном случае, 10px, ), стиль рамки (в данном случае, inset), цвет рамки ( в данном случае #798081)
- display: block; - задаёт блочность содержимого. без этого параметра не будет работать весь код (вернее, фон не будет одним сплошным блоком)
- padding: 10px; - определяет значение (отступ) полей вокруг текста (содержимого).

Вот примеры и значения стилей рамки:

dotted  dashed  solid  double  groove  ridge  inset  outset

Помимо рамки вокруг нашего текста (содержимого), можно бордюрчик сделать лишь с левой, например, стороны (border-left):
<span style="background: #eeeeee; border-left: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

или с правой (border-right):
<span style="background: #eeeeee; border-right: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

верхний бордюр (border-top)
<span style="background: #eeeeee; border-top: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

нижний бордюр (border-bottom)
<span style="background: #eeeeee; border-bottom: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

двухсторонний можно (прописываем border-left и border-right вместе):
<span style="background: #eeeeee; border-left: 10px solid #798081; border-right: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

Задайте для правого бордюра стиль dotted, а для левого ridge и получится вот так:
<span style="background: #eeeeee; border-left: 10px ridge #798081; border-right: 10px dotted #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

И т.д. можно фантазировать...

В принципе, можно ещё добавлять параметр, который будет задавать отбрасываемую от текста тень. Влепить в код параметр, который рамку будет делать визуально, как бы в трёхмерном формате... Но не всегда эти все рюшечки на столько необходимы, да и информации, думаю, пока что достаточно!

Удачи!

P.S. Хоть кому-то пригодится данная информация?

ДЕЛАЕМ КАРТИНКУ ФОНОМ СООБЩЕНИЯ В BLOGGER(BLOGSPOT)

Иногда при оформлении постов блога, хочется сделать что-нибудь необычное, чего невозможно реализовать используя простые стилевые свойства цвета, тени, градиента или даже все это вместе. В таких случаях всегда приходит на помощь старая, добрая картинка. И вот, продолжая тему изменения шаблона Blogger при помощи CSS, хочу рассказать как сделать в блоге фоном сообщения изображение.
Конечно же, нет ничего сверхсложного в том, чтобы использовать картинку как фон поста. Но в этой статье, я и хочу уделить внимание некоторым важным моментам, при использовании полноразмерного изображения и реализации такого дизайна именно в Blogger, так как кое-какие трудности в этом есть. Вариантов, в данном случаи, не много, а точнее всего два. Но начнем с того, что в стандартном шаблоне уже имеются все необходимые нам селекторы, от нас лишь потребуется добавить к ним новые и/или изменить уже существующие свойства. Все они находятся после строки:

/* Posts
----------------------------------------------- */

Теперь по вариантам.

Скриншот блога на Blogger с картинкой как фоном поста

Рис 1. Фон поста (без повторения)

1. Самый простой вариант - вместо цвета указать ссылку на картинку, результат показан на рисунке 1.
Следует обратить внимание что фоновое изображение подложено только под сообщение - без заголовка и "подвала". Также, в данном случаи выбрана картинка с "рваными" краями, которая не предусматривает повторения ни по вертикали, ни по горизонтали, по-этому в CSS для поста, нужно будет указать значения для свойств высоты и ширины соответствующие значениям выбранного изображения и при необходимости добавить полосу вертикальной прокрутки.
Но можно подобрать или сделать(обрезать) самостоятельно картинку так, чтобы её верхняя часть была, как бы продолжением нижней, и задать для фона вертикальное повторение, тогда для тела сообщения нужно будет задать лишь необходимую ширину, равную ширине картинки.
Чтобы реализовать данный вариант, для селектора .post-body(он есть в коде шаблона по умолчанию), нужно добавить свойства фона и остальные. Код CSS в этом случаи будет таким:

.post-body {
 font-size: 110%;
 line-height: 1.4;
 position: relative;
 background: url(.../image/post-bacground-600x1000.png) no-repeat; /*фоновое изображение без повторения*/
 height: 1000px; /*высота тела сообщения - соответствует высоте картинки*/
 overflow-y: auto; /*при большом количестве текста автоматически будет добавлена полоса вертикальной прокрутки*/
 width: 600px; /*ширина тела поста - соответствует ширине изображения*/
}

Не забывайте оптимизировать картинки, используя программы для сжатия изображений, перед тем как залить их на хостинг или к себе в блог.

Рис 2. Фон из фрагментов одного изображения

2. Этот вариант немного сложнее, так как придется немного повозится с картинкой и применить свои математические способности, но я считаю его лучше и правильнее. Здесь, в отличии от первого варианта, будет использоваться несколько частей одного изображения.
В данном случаи, с помощью любого графического редактора, картинка делится на три части: верхнюю - для заголовка, среднюю(центральную) - непосредственно для текста(тела поста) и нижнюю - для "подвала", которые и будут использоваться как фон этих блоков. При этом, нужно учитывать тот момент, что центральная часть выбранного изображения должна быть обрезана таким образом, чтобы при вертикальном повторении, стыки были не заметны. Тут же, в редакторе, корректируется и ширина изображения относительно желаемой ширины поста. Результат показан на рисунке 2.
CSS код для реализации такого варианта оформления

h3.post-title,
.post,
.post-footer {
 padding: 0;
 margin: 0;
/*
указываем одинаковое значение ширины
для всех необходимых элементов,
равное ширине картинки
*/
 width: 600px;
}
h3.post-title {
 background: url(.../image/post-header-600x138.png) no-repeat;
 height: 138px; /*высота равна высоте отрезка изображения*/
 text-align: center;
}
.post {
 background: url(.../image/post-body-600x517.png) repeat-y; /*для фона поста задаем вертикальное повторение*/
 height: 100%;
}
.post-footer {
 background: url(.../image/post-footer.png)no-repeat;
 height: 116px; /*высота равна высоте отрезка изображения*/
}
/*Стили для внутренних элементов*/
h3.post-title a {
 color: #fff;
}
.post-body {
/*отступы, выравнивают текст поста по центру*/
 margin-left: 120px;
 margin-right: 120px;
 width: auto;
}
.post-footer-line {
 padding: 10px;
 margin: 10px 120px;
}

Чтобы долго не расписывать что к чему, изобразил схематично:

Схема подготовленного изображения и селекторов

Вот картинка, которую я использовал в примере, можете поэкспериментировать.Кирпичи.JPG
Кирпичи.PNG

Приведенные в статье размеры блоков указаны для примера и соответствуют размерам используемого в примерах изображений. Их нужно подбирать самостоятельно и индивидуально.

Вот пожалуй и все, удачных вам дизайнерских решений.

2+2 Онлайн - Дивись прямий ефір каналу 2+2

Зараз в ефірі

Загублений світ

Програма-дайджест складається з п’яти не пов'язаних між собою неймовірних історій, зазвичай, містичних , що доводять: «Потойбічне існує!». Ведучий програми Геннадій Попенко зн...

Новини проекту

Антикваріат – користь чи небезпека?

03 04 2018

Загублений світ

Сувеніри, що ви привозите з собою з відпустки, можуть вбити вас… або навпаки, принести шалений успіх. Тож як користуватися старими речами без негативних наслідків?

Народні цілителі: рятівники чи шарлатани?

03 04 2018

Загублений світ

Цілителі за гроші обіцяють вилікувати вас від хвороб звичайними примовляннями та власноруч зробленими "ліками". Такі процедури нерідко закінчуються загостренням існуючих проблем та виникненням нових хвороб.

Хто тероризує українські Карпати?

02 04 2018

Загублений світ

Експедиція Загубленого світу на 2+2 з’ясує, що за істота наводить жах на місцевих мешканців і кого зафіксували на камеру туристи та мисливці!

Горох і картопля – перші космічні овочі

02 04 2018

Загублений світ

У Загубленому світі на 2+2 унікальне інтерв’ю легенди українського космосу Леоніда Каденюка – про колонізацію космосу та вирощування овочів у невагомості.

Людство знищують за допомогою секонд-хенду

02 04 2018

Загублений світ

Експерти переконані, що вживані речі – зброя, яка може знищити людство. Але хто нею керує?

Дивитись більше

Меню для блоггер с фоном градиента

Всем здравствуйте. В этой статье поговорим об актуальной теме-меню для наших блогов. Сегодня хочу предложить простое горизонтальное и вертикальное меню с фоном градиента. Пример меню горизонтального:

Фон градиент каждый сможет оформить или выбрать под свой дизайн, и меню в Вашем блоге будет отличаться от всех других. А сейчас начнем создавать меню. Я буду использовать обычные ссылки в контейнере nav без маркированного списка ul и пунктов li: <a href = "#">Главная</a>

<nav>

<a href = "#">Главная</a>

<a href = "#">Контакты</a>

<a href = "#">Карта блога</a>

</nav>

Добавим оформление, используя стили CSS

<style>

nav a{

display:block;

}

nav a{

float: left; *// блочные свойства ссылок

font-size:14px; *// размер шрифта

text-decoration: none;

border-right: 1px solid #000; *// цвет разделителя справа

padding: 8px;

background:linear-gradient(to right, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); *// фон градиент

border-bottom:2px solid rgba(206,220,231,1); *// размер, форма и цвет нижней границы

border-radius:px; *//радиус скругления углов

}

nav a:hover{

background:rgba(167,199,220,1); *// фон при наведении

}
a:link{
color:#fff; *// цвет ссылок
}

</style>

Для вертикального меню удалите с кода CSS свойство float: left; пример:

Как формить, используя стили CSS, выбор фона на сайте генератор фона CSS

Цвет шрифта ссылок можно настроить в конструкторе тем (дизайнер шаблонов прежнее название). С кода CSS стилей удалить строку a:link{color:#fff;}

Для любителей плавающего меню, зафиксировать, добавим свойство fixed;

nav{

position: relative;

width:100%;

z-index: 5;

border:1px solid rgba(206,220,231,1);

position: fixed; top: 0px; left:0px;

}

Как закрыть ссылки от индексации и открыть в новом окне читайте в статье Горизонтальное фиксированное многоуровневое меню для блоггер;

При желании можете добавить другие эффекты оформления, нужно минимум знаний CSS. Также фоном градиент можно оформить фон шапки, сайдбар, основной фон и футер блога. Пример сходите посмотреть в тестовый блог.

Рекомендую посмотреть статью Как подобрать совместимость фонового цвета;

Хороший сервис CSS градиент генератор

настроить свой фон градиент или выбрать из предложенных сервисом фонов.

На выбор разные фоны градиент или настройте свой фон, тут уже зависит от фантазии. На этом у меня вся информация. Все вопросы в комментариях или работает форма контактов. Всего доброго.

Читайте также: