Каждому из нас хочется, чтобы его блог смотрелся по особенному, как-то выделялся на фоне остальных. Этому в полной мере способствуетиндивидуальный дизайн блога. Но иногда нам нужно выделить всего лишь какой-то абзац или фразу в тексте статьи. Когда это требуется раз-другой, можно и покорпеть над каждым конкретным случаем. А если подобное необходимо довольно часто, но при этом не хочется каждый раз затрачивать много сил на красочное оформление? Здесь нам на помощь придут готовые решения, которые мы можем интегрировать в шаблон нашего блога.
Вы видите как оформлена эта надпись? Такое оформление несложно заполучить, если один раз приложить немного усилий. А ведь можно использовать и несколько различающихся стилей для разного типа материала!
А как вам такое выделение текста? Думаете этого сложно добиться? Поверьте, это не проблема. Я объясню, как получить такое оформление. Это не многим сложнее, чем с первым вариантом.
А может вам нравится такой дизайн? Поверьте, и здесь нет ничего сложного! А при желании, так и, вообще, вы сможете разработать свой неповторимый стиль, перемешав идеи, почерпнутые из этой статьи.
Я на этом сайте ограничился всего лишь одним подобным стилем выделения текста - первым. Но вы можете задействовать несколько. Например, для привлечения внимания к главной мысли статьи, для выделения особо важной информации, для указания, что перед нами код и т.д. При этом, каждый вариант может иметь свои индивидуальные особенности: различные картинки оформления, разный цвет текста и фона внутри "окна" (рамки), различные цвет и форму рамки.
Перейдем от слов к делу. Перед вами код, описывающий подобные "окна" (рамки), который необходимо поместить в ваш шаблон под "/* Accents". Чтобы вам было легче подстроить его под себя, я сопроводил строки подробными комментариями:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
| .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 /* цвет текста */} |
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
| .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; /* толщина букв текста */} |
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
| .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>добавим следующий код:
1
2
3
| <!--[if lt IE 8]><script src='http://sunctorus.ucoz.net/PIE.js' type='text/javascript'/><![endif]--> |
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
| <!--[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]--> |
Теперь, если вы, предварительно адаптировав под свой дизайн, добавите любой из представленных вариантов кода в в шаблон, в блок, начинающийся с "/* Accents", то вы подготовите почву для красочного оформления отобранных вами участков текста. И если вы, например, захотите показать часть текста в стиле info, то окружите его тэгами следующим образом:
<div class="info">выделяемый текст</div>.
<div class="info">выделяемый текст</div>.
Таким вот незамысловатым способом можно внести визуальное разнообразие в ваши статьи. Единственное, я хотел бы предупредить, что ссылки на фоновые изображения в примерах даны мной "от балды", просто для иллюстрации. Думаю, каждый из вас все равно захочет внести свои поправки в предложенные мной решения :-)
0 коммент.:
Отправить комментарий