Як зробити гарну плашку в дописі блогу

15.06.2013 - 21:15
Інформаційні технології
WWW
Увага! Цей допис містить багато незрозумілих слів та кодів і призначений лише для тих, хто хоче гарно оформлювати свої матеріали і готовий потратити на це час.

Пропоную вашій увазі матеріал про те, як зробити гарну плашку для статті в блозі. Власне, я наведу зразок HTML-коду і поясню, з чого він складається, щоб ви могли замінити мої параметри на свої. Цей спосіб підійде для будь-якого ресурсу, де допускається свій HTML-код у дописах і не фільтрується параметр style. Раніше в LiveJournal також не фільтрувався параметр class, тому можна було загнати свій код у CSS-стилі і не писати його щоразу у новому дописі.

Отже, код плашки, що ви бачите вище, має наступний вигляд:

<div style="min-height:115px; margin: 10px; padding: 10px 10px 10px 140px; background-image:url(http://img18.imageshack.us/img18/2677/19z.png); background-position: 10px 10px; background-repeat: no-repeat; background-color: yellow; border: 2px solid red; font-size:14pt;">Увага! Цей допис містить багато незрозумілих слів та кодів і призначений лише для тих, хто хоче гарно оформлювати свої матеріали і готовий потратити на це час.</div>

Цей код можна скопіювати до себе в блог, чи куди там захочете. Як ви вже зрозуміли, замість мого тексту можна вставити свій, оскільки він не є частиною коду. Знаходиться він усередині тегу div (блок), у відкриваючій частині якого написано style="купа_незрозумілих_літер". От їх ми і розглянемо.

  • min-height:115px; — мінімальна висота блоку у пікселях, якщо текст не заповнює його повністю. Зроблено для того, щоб вміщався графічний знак. Якщо ви захочете використати зображення іншої висоти, можете змінити цей параметр, якщо у плашці достатня кількість тексту.
  • margin: 10px; зовнішні відступи плашки.
  • padding: 10px 10px 10px 140px; внутрішні відступи плашки. Остання цифра — відступ від лівого краю, зроблено великим, щоб текст не наклазив на графічний знак. Якщо ви використовуєте зображення інших розмірів, змініть цю цифру.
  • background-image:url(...); посилання на зображення із вашим знаком.
  • background-color: yellow; колір фону. Список кольорів у HTML можна знайти тут.
  • border: 2px solid red; товщина у пікселях, тип (solid/dotted/none) та колір границі плашки.
  • font-size:14pt; розмір шрифту у пунктах, як у M$ Word. Окрім цього можна дописати color: red — колір тексту.

Насправді, там можна дописати набагато більше, список можливих опцій великий. Якщо будуть запитання або побажання до наявного дизайну — пишіть.