Кожному з нас хочеться, щоб його блог виглядав по-особливому, як-то виділявся на тлі інших. Цьому в повній мірі сприяє індивідуальний дизайн блогу . Але іноді нам потрібно виділити всього лише якийсь абзац або фразу в тексті статті. Коли це потрібно один-два рази, можна і покорпеть над кожним конкретним випадком. А якщо подібне необхідно досить часто, але при цьому не хочеться кожен раз витрачати багато сил на барвисте оформлення? Тут нам на допомогу прийдуть готові рішення, які ми можемо інтегрувати в шаблон нашого блогу. Ви бачите як оформлена цей напис? Таке оформлення нескладно отримати, якщо один раз докласти трохи зусиль. Але ж можна використовувати і кілька розрізняються стилів для різного типу матеріалу!
А як вам таке виділення тексту? Думаєте цього складно домогтися? Повірте, це не проблема. Я поясню, як отримати таке оформлення. Це не всім складніше, ніж з першим варіантом.
А може вам подобається такий дизайн? Повірте, і тут немає нічого складного! А при бажанні, так і, взагалі, ви зможете розробити свій неповторний стиль, перемішавши ідеї, почерпнуті з цієї статті.
Я на цьому сайті обмежився всього лише одним подібним стилем виділення тексту - першим. Але ви можете задіяти кілька. Наприклад, для залучення уваги до головної думки статті, для виділення особливо важливої інформації, для вказівки, що перед нами код і т.д. При цьому, кожен варіант може мати свої індивідуальні особливості: різні картинки оформлення, різний колір тексту і фону всередині "вікна" (рамки), різні колір і форму рамки.
Перейдемо від слів до справи. Перед вами код, що описує подібні "вікна" (рамки), який необхідно помістити в ваш шаблон під "/ * Accents". Щоб вам було легше підлаштувати його під себе, я супроводжував рядки докладними коментарями:
.info {margin: 10px; / * Відступ рамки від зовнішніх елементів * / padding: 15px 17px 15px 80px; / * Відступ вкладеного тексту від рамки * / border: 1px solid # 1e8fce; / * Товщина, формат і колір рамки * / border-radius: 10px; / * Радіус заокруглення кутів рамки для IE9 і Opera * / -moz-border-radius: 10px; / * Радіус заокруглення кутів рамки для Firefox * / -webkit-border-radius: 10px; / * Радіус заокруглення кутів рамки для Safari і Chrome * / box-shadow: 2px 2px 3px #bbb; / * Зміщення, товщина і колір тіні рамки для Opera * / -moz-box-shadow: 2px 2px 3px #bbb; / * Зміщення, товщина і колір тіні рамки для Firefox * / -webkit-box-shadow: 2px 2px 3px #bbb; / * Зміщення, товщина і колір тіні рамки для Safari і Chrome * / background: #fff url (http://www.aboutblogger.ru/info.png) 15px 50% no-repeat; / * Колір фону, посилання на фонове зображення і вказівка його розташування * / text-align: justify; / * Вирівнювання тексту * / color: # 000 / * колір тексту * /}
.special {margin: 10px; / * Відступ рамки від зовнішніх елементів * / padding: 15px 15px 10px; / * Відступ вкладеного тексту від рамки * / border: 6px solid # 1e8fce; / * Товщина, формат і колір рамки * / border-radius: 20px 0; / * Радіус заокруглення кутів рамки для IE9 і Opera * / -moz-border-radius: 20px 0; / * Радіус заокруглення кутів рамки для Firefox * / -webkit-border-top-left-radius: 20px; / * Радіус округлення верхнього лівого кута рамки для Safari і Chrome * / -webkit-border-bottom-right-radius: 20px; / * Радіус заокруглення нижнього правого кута рамки для Safari і Chrome * / box-shadow: 2px 2px 3px #bbb; / * Зміщення, товщина і колір тіні рамки для Opera * / -moz-box-shadow: 2px 2px 3px #bbb; / * Зміщення, товщина і колір тіні рамки для Firefox * / -webkit-box-shadow: 2px 2px 3px #bbb; / * Зміщення, товщина і колір тіні рамки для Safari і Chrome * / background: #fff url (http://www.aboutblogger.ru/special.png) repeat-x; / * Колір фону, посилання на фонове зображення і вказівка його розташування * / text-align: justify; / * Вирівнювання тексту * / text-shadow: 2px 2px 3px #bbb; / * Зміщення, товщина і колір тіні тексту * / color: # 108fce; / * Колір тексту * / font-weight: bold; / * Товщина букв тексту * /}
.code {margin: 10px; / * Відступ рамки від зовнішніх елементів * / padding: 20px; / * Відступ вкладеного тексту від рамки * / border: 3px solid # 1e8fce; / * Товщина, формат і колір рамки * / border-radius: 8px; / * Радіус заокруглення кутів рамки для IE9 і Opera * / -moz-border-radius: 8px; / * Радіус заокруглення кутів рамки для Firefox * / -webkit-border-radius: 8px; / * Радіус заокруглення кутів рамки для Safari і Chrome * / box-shadow: inset 0 0 20px # 1e8fce; / * Зміщення, товщина і колір світіння рамки для Opera * / -moz-box-shadow: inset 0 0 20px # 1e8fce; / * Зміщення, товщина і колір світіння рамки для Firefox * / -webkit-box-shadow: inset 0 0 20px # 1e8fce; / * Зміщення, товщина і колір світіння рамки для Safari і Chrome * / background: #fff url (http://www.aboutblogger.ru/code.png) 97.7% 80% no-repeat; / * Колір фону, посилання на фонове зображення і вказівка його розташування * / text-align: justify; / * Вирівнювання тексту * / color: # 108fce; / * Колір тексту * / font-weight: bold; / * Товщина букв тексту * /}
Кожен з представлених варіантів коду описує стиль одного з "вікон" (рамок), представлених вище. Умовно я дав назви цим "вікнам": info, special і code.
Щоб обрізка кутів, тіні і свічення, що використовуються в даних "вікнах", відображалися в IE9, необхідно трохи видозмінити один з meta-тегів . Для молодших же версій Internet Explorer доведеться використовувати сурогати. Причому, з восьмою версією я нічого не можу вдіяти - всі скрипти, які я перепробував, в IE8 конфліктують зі скриптом коментарів. А ось щоб обрізка кутів і тіні відображалися в IE7 і молодше, перед закриває тегом </ head> додамо наступний код:
<! - [if lt IE 8]> <script src = 'http: //sunctorus.ucoz.net/PIE.js' type = 'text / javascript' /> <! [Endif] -> А перед закривається тегом </ body> цей:
<! - [if lt IE 8]> <script type = 'text / javascript'> $ (function () {if (window.PIE) {$ ( '. Info'). Each (function () {PIE. attach (this);}); $ ( '. code'). each (function () {PIE.attach (this);}); $ ( '. special'). each (function () {PIE.attach ( this);});}}); </ Script> <! [Endif] -> Зверніть увагу на підсвічений блок. У ньому визначається class, для якого необхідно задіяти можливості CSS3. Якщо ви придивитеся, то побачите, що таких блоків рівно три - по числу наших "вікон" (рамок). Додавайте або видаляйте з коду дані блоки відповідно до ваших потреб в спец- "вікнах".
Тепер, якщо ви, попередньо адаптувавши під свій дизайн, додасте будь-який з представлених варіантів коду в в шаблон, в блок, що починається з "/ * Accents", то ви підготуєте грунт для барвистого оформлення відібраних вами ділянок тексту. І якщо ви, наприклад, захочете показати частину тексту в стилі info, то оточіть його тегами наступним чином:
<div class = "info"> виділяється текст </ div>.
Таким ось нехитрим способом можна внести візуальне різноманітність у ваші статті. Єдине, я хотів би попередити, що посилання на фонові зображення в прикладах дані мною "від балди", просто для ілюстрації. Думаю, кожен з вас все одно захоче внести свої поправки в запропоновані мною рішення :-)А якщо подібне необхідно досить часто, але при цьому не хочеться кожен раз витрачати багато сил на барвисте оформлення?
Ви бачите як оформлена цей напис?
А як вам таке виділення тексту?
Думаєте цього складно домогтися?
А може вам подобається такий дизайн?
