Давно собирался сделать себе классы для красивого выделения текста рамками, но все как-то руки не доходили. В своих публикациях я, правда, выделял коды HTML, CSS и т.д. (был у меня создан для этого класс), но захотелось чего-нибудь более оригинального. Увидел я на одном сайте, что люди еще к выделяемому тексту и картинки приделывают. А я, что, хуже что-ли?!
Решил я себе сделать подобное оформление.
Решил я себе сделать подобное оформление.
Так выделяем важную информацию
В этом блоке даем какую-то информацию.
А так оформляем код.
.vagno, .kod, .info {
margin:10px;
padding:15px 20px 15px 80px;
border:1px solid #999999;
border-radius: 10px;
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:20px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}
.vagno {
background-color:#FFD4A0;
background-image: url("http://lh4.ggpht.com/_G92voTj-
yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");
}
.info {
background-color:#FFFF00;
background-image: url("http://lh5.ggpht.com/_G92voTj-
yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png");
}
.kod { background-color:#E7E7E7 ;
Color: blue;
background-image: url("http://lh3.ggpht.com/_G92voTj-
yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png");
}
margin:10px;
padding:15px 20px 15px 80px;
border:1px solid #999999;
border-radius: 10px;
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:20px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}
.vagno {
background-color:#FFD4A0;
background-image: url("http://lh4.ggpht.com/_G92voTj-
yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");
}
.info {
background-color:#FFFF00;
background-image: url("http://lh5.ggpht.com/_G92voTj-
yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png");
}
.kod { background-color:#E7E7E7 ;
Color: blue;
background-image: url("http://lh3.ggpht.com/_G92voTj-
yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png");
}
А вызывать будем вот так:
<div class="info">В этом блоке даем какую-то информацию.</div>
<div class="kod">А так оформляем код.</div>
Вы, конечно можете все отредактировать на свой вкус, в частности:
- Цвет тела в рамке(просто измените на свой, в background-color).
- Вывод картинки, вставьте ссылку вашей картинки, в background-image. Если картинка не нужна, просто удалите ссылку с путем картинки.
- Можно изменить радиус закругления рамки и другие параметры.
Пользуйтесь на здоровье!
P.S. Если хотите, можете посмотреть летние фотографии(в санатории). Адрес альбома: Летние фотографии
P.S. Если хотите, можете посмотреть летние фотографии(в санатории). Адрес альбома: Летние фотографии
