Красивые блоки для сайта в стиле WP — Note

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

Эти блоки предназначены для выделения какого-то важного контента и за счет красивого оформления должны сразу привлекать внимание. Да и сама страница с таким блоком приобретает более симпатичный вид.

Вот и я захотел выводить такие красивые блоки. Но так-как писать свой CSS код мне в тот момент было не когда я решил установить плагин WP-Note, который и выводит такие вставки в контент.

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

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

Вообщем вот эти стили добавляйте в файл style.css — код вывода красивых блоков для сайта.

Я не стал публиковать HTML и CSS код блоков по отдельности, а просто закомментировал, думаю разберетесь.

< --! HTML -->
<div class="note"><div class="noteclassic">Классический блок</div></div> < --! блокнот -->
<div class="note"><div class="noteimportant">Ключевая фраза</div></div> < --! ключи -->
<div class="note"><div class="notewarning">Блок внимание</div></div> < --! знак внимание -->
<div class="note"><div class="notetip">Блок подсказка</div></div> < --! лампочка -->
<div class="note"><div class="notehelp">Блок help</div></div> < --! вопрос -->

Я данный HTML код просто скопировал и пользуясь приграммой мульти-копи-паст просто добавляю в нужное место публикации. Можно так-же вывести нужные кнопки прямо в визуальный редактор WordPress.

/*
CSS код
*/
.note
{
text-align: center;
}
.noteclassic, .noteimportant, .notewarning, .notetip,.notehelp{
width: 80%;
margin-top:2em;
margin-left: auto;
margin-right: auto;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px 20px 15px 80px;
margin: 0px 0px 0px 0px;
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
/*IE min-height hack*/
min-height:40px;
height:auto !important;
height:40px;
overflow:visible;
position:relative;
bottom:6px;
right: 6px;
border: 1px solid #999999;
/*Set the position of the background image*/
background-position: 20px 50%;
background-repeat: no-repeat;
text-align: justify;
}
.noteclassic, .noteimportant, .notewarning, .notetip,.notehelp{
/* IE5 hack */
\margin: 0px 0px -3px 0px;
ma\rgin: 0px 0px 0px 0px;
}
.noteclassic {
background-color: #EEF;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/note.png);
}
.noteimportant {
background-color: #FFC;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/important.png);
}
.notewarning {
background-color: #FDD;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/warning.png);
}
.notetip {
background-color: #E4F6F8;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/tip.png);
}
.notehelp {
background-color: #D8F3C9;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/help.png);
}

В нужные места в CSS пропишите ваш путь к картинкам.

И напоследок, чтобы красивые блоки для сайта выводились с картинками скачайте архив, распакуйте его, поместите в домашний каталог вашего сайта, или в папку с темой, не важно, главное правильно прописать путь к картинкам. Все, красивые блоки div теперь можно добавлять в любые публикации.
Cкачать архив с картинками для блоков с Яндекс Диска
Если вам пригодилась статья «Красивые блоки для сайта в стиле WP-Note», жмите кнопки соц. сетей, так-же оформите подписку на новые публикации.

Похожие по Тегам статьи

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Добавляем атрибут title в редактор WordPress

Начиная с версии 3.5 WordPress из редактора удалена функция автоматического добавления атрибута title, что…