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



Семь рамок для выделения текста в блоге


Здравствуйте гости и читатели моего блога. Сегодня предлагаю для выделения текста в Ваших блогах семь стильных рамок со свечением цвета и изображениями. В моем блоге достаточно информации о разных типах рамок, но со свечением цвета не было. Поэтому выбирайте, оформляйте, чтобы блоги Ваши надолго запомнились посетителям и привлекали новых читателей.

Так как я не имею возможности вставить все предлагаемые коды рамок в шаблон этого блога, пример рамок будете смотреть в тестовом блоге, а в этом копировать коды приглянувшейся рамки.

Примеры рамок

Код для выделения текста вставляете в шаблон-резервная копия-изменить шаблон. Ищем строку ]]</b:skin> и выше устанавливаем код. Для тех, кто еще не знает как найти строку в шаблоне блога, почитайте пост как быстро и красиво оформить текст в блоге. Далее в редакторе сообщений blogger, где мы пишем свои посты, переходим по вкладке HTML и заключаем необходимый текст вот в такой код

<div class="code">код или текст</div>

Code 1

.code1 {
  margin: 10px; 
  padding: 20px;
  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(http://3.bp.blogspot.com/-7BPOTkYGTxg/TlpSQjCGdMI/AAAAAAAABn4/u-L9h0RB4Pg/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(http://4.bp.blogspot.com/-qpVGdBSTCAE/VAYW72tSAMI/AAAAAAAADs0/smydgNxSRso/s1600/v-gol.ru%2Blamp3.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(http://4.bp.blogspot.com/-rAJrF3SnsjQ/VAYYiG1e4wI/AAAAAAAADtA/wfGpd4ycGvk/s1600/v-gol.ru%2Blamp3.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 (серый).

У меня на сегодня все. Понравились рамки? Поделитесь со своими друзьями и знакомыми в социальных сетях. Всего всем Доброго и до новых встреч.




Автор статьи ✎ Olga Protasova Выпуск ✹ 10/13/2014 Ярлыки ►


Открыть комментарии →

12 коммент. :

  1. Оля, привет! Рамочки красиво смотрятся! Аккуратные и выбор большой. Вопрос можно? Код в шаблоне установить и тогда не нужно каждый раз его добавлять по-новому?

    ОтветитьУдалить
    Ответы
    1. Ирина приветик! Да, код установи один раз, затем когда надо будет выделить текст в посте, просто заключи его в тэг в редакторе сообщений по вкладке HTML.

      Удалить
  2. Ответы
    1. Ира не в тэг, а в код. В начале статьи посмотри. В голове одни тэги.

      Удалить
    2. Ира, если тебе будет трудно, можно сделать проще, оформи цитатой. В коде CSS вместо слова code1, code2 и.т.д вставь blockquote (обрати внимание, точка впереди должна отсутствовать). В редакторе сообщений выдели нужный текст в посте и нажми сверху в меню на кавычки (цитата). Так намного проще.
      Если ты захочешь разнообразить свои выделенные тексты, тогда вставляй в шаблон парочку кодов CSS и пиши blockquote1; blockquote2. В таком случае в режиме HTML нужно будет просто добавить нужную цифру. Я тебя не очень напрягла.? Расписалась как будто пост пишу.

      Удалить
  3. Оля, привет. Утром написала комментарий. Может ты не одобрила. Может тех. ошибка. Продублирую. Очень нравится последнее время проделывать фокусы с кодами CSS. В свободное время просто играюсь с ними. Поменяла недели 3 назад дизайн шаблона, с помощью подобных кодов.
    Оля, а я эти коды не всегда вставляю в шаблон. Просто в редакторе сообщений. И так же код вызова. Очень удобно.

    ОтветитьУдалить
    Ответы
    1. Вика здравствуй. А ты в демо блоге оставляла коммент? У меня были не настроены комментарии в том блоге. Меня уже давно тема CSS интересует. Вика, не совсем поняла, что за код вызова. В редактор не пробовала, насколько мне известно в редакторе нужные темы заключаются в тэг div. Поделись опытом или напиши пост.

      Удалить
  4. Оля-я, полный "абзац"((( Давай так, когда решусь, то ты мне на "пальцах" все покажешь. Хорошо?

    ОтветитьУдалить
    Ответы
    1. Ирина, решайся побыстрей, я тебе вышлю готовый код на почту, только выбери рамку. Останется только вставить код CSS в шаблон, это просто. В любом случае, что будет непонятно, задавай вопросы-отвечу.

      Удалить
    2. Ира, для начала тебе задание. Шаблон у тебя не blogger, сторонний. Почитай мой пост о выделении части текста цитатой здесь
      http://www.bdblogov.ru/2013/08/blog-post_7.html
      Затем в черновике напиши любой текст, выдели цитатой и посмотри. В твоем шаблоне может присутствовать настройка выделения текста цитатой.

      Удалить
  5. Оля. Наверное там оставила. А с этими кодами так. (Блин)Не принял в комментариях мои коды. Зайди прочитай тут http://www.shpargalochki.ru/2014/10/kak-stilnoe-vydelit-tekst.html#more. Чё-то мне такой вариант больше по душе. Чтоб лишний раз в шаблон не лезть.

    ОтветитьУдалить
  6. Nice Tricks. Thx for this share, I used in my blog too
    see you more

    ОтветитьУдалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *