Стильные рамки со свечением цвета и изображением

Семь рамок для выделения текста в блоге:  http://www.bdblogov.ru/2014/10/Stylish-frame-with-glow-colors-and-image.html  Примеры рамок :  http://application-1.blogspot.com/2014/10/blog-post_13.html Код для выделения текста вставляете в шаблон-резервная копия-изменить шаблон. Ищем строку ]]</b:skin> и выше устанавливаем код. Далее в редакторе сообщений blogger, где мы пишем свои посты, переходим по вкладке HTML и заключаем необходимый текст вот в такой. <div class="code">код или текст</div>  код  Code 1 .code1 { margin: 10px; border: 3px solid #855e42; border-radius: 8px; -moz-border-radius: 8px: -webkit-border-radius: 8px; box-shadow: inset 0 0 20px #855e42; -moz-box-shadow: inset 0 0 20px #855e42; -webkit-box-shadow: inset 0 0 20px #855e42; background: #f8f4cb; text-align:justify; color: #108fce; font-weight: bold; } Code2 .code2 { 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; /* цвет фона */ text-align:justify; /* выравнивание текста */ color: #108fce; /* цвет текста */ font-weight: bold; /* толщина букв текста */ } Code3 .code3 {   margin: 10px;    padding: 20px;   border: 3px solid #029d74;    border-radius: 8px;   -moz-border-radius: 8px;   -webkit-border-radius: 8px;   box-shadow: inset 0 0 20px #029d74;   -moz-box-shadow: inset 0 0 20px #029d74;   -webkit-box-shadow: inset 0 0 20px #029d74;   background: #f8f8ff;   text-align:justify;   color: #444444;   font-weight: bold; } Code4 .code4 { overflow:auto;width:400px;height:auto; font-family: "Consolas", "Courier New", Courier, mono, serif; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 60px; clear : both; color:#000; list-style-type : none; background : #F5F3F3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left; border : 1px solid #ccc; border-right:15px solid rgba(0, 0, 0, .100); -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; -webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); } .code4:hover{ overflow:auto;width:400px;height:auto; background : #F5F3F3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left; border : 1px solid #ccc; border-right:15px solid rgba(0, 0, 0, .100); -webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); } Code5 .code5 {       margin : 15px 35px 15px 15px;   padding : 20px 10px 10px 40px;   background : #f8f4cb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GDmZyrBNuubpFZgo-Ii4Gg0vJkPaqZ8nSb3ZyY0nFTo8aguYHOenzy-OnUu2WkK_tNZrQD4OKgTkYHTdsc0AFNtpe8AwBxTFcE2GasLe9_slTJBaUb6PW6FqyFEMU2MK_F_C2dGGCIEX/s800/kod.jpg) repeat-y top left;   border-top : 1px solid #800000;   border-right : 1px solid #800000;   border-bottom : 1px solid #800000;   border-left : 1px solid #800000;   border-radius: 5px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   } Code6 .code6 { overflow:auto;width:400px;height:auto; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#7A6417; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 url(http://1.bp.blogspot.com/-GYYwrX408NQ/Tv7JAIEwfMI/AAAAAAAACHc/w8IcSIvTsmc/s1600/000.JPG) repeat-y top left; border : 1px solid #D8C37D; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code6:hover{ border : 1px solid #D8C37D; -webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); -moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } Code7 .code7 { overflow:auto;width:503px;height:120px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#eeeeee; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #b561ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0O_ZFZnsa5Fhgn4aAPpLzez2ZEopjyCbEvlDwcl_cji-PZEf_3LpKKgHkO9EnEIsCOuZ3nJK2mju_jC5stcRSIMxBHWBu9kNxnDBgq9IWBtV5ExECmZUGnXcaf_rixdbUPBEx3Ngd2Zg/s1600/v-gol.ru+lamp3.JPG) repeat-y top left; border : 2px solid #b561ff; border-left:20px solid #b561ff; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code7:hover{ background : #3d162e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizW7iLp-JzCVVR1JCJibA_wmAOJYtWwFy3_O6G_bhA7H5AsD_zfLy-ro3cbyABV-GNGfubiqiVzctuJ2bPGuwQ4YboVcnz3fjUO3jhTuBtW1a1-8yJjKLKdtUZspnqwKlLSqYvjC3axdzR/s1600/v-gol.ru+lamp3.JPG) repeat-y top left; color:#fff; border : 2px solid #b561ff; border-left:20px solid #b561ff; -webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }

В коде 2 расписаны все настройки для 1,2,3 рамок.

Обратите внимание на заголовок-тень текста. Можно таким образом выделить безо всяких рамок, если необходимо обратить внимание на запись.

<div style="text-shadow: 4px 4px 8px black;">ваш текст</div>

Код устанавливайте в редакторе сообщений, в режиме HTML.

Можно также записать текст в виде HTML кода, заключить в этот код и вставить в дизайн-добавить гаджет.
Выделенное синим-это цвет тени:
black (черный);
green (зеленый);
brown (коричневый);
grey (серый).