Рамки с различни цветове на фона и канта

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

1. Рамки с различни цветове на фона и канта
2. Настройки в кодовете на рамки за текст
3. Уточнение

По принцип искам да ви покажа какви чудеса можете да създадете, ако промените размера и цвета на рамката. Можете да използвате кодовете на тези рамки, можете да персонализирате цвета и фона на текста в тях. Копирайте кода и го вложете в редактора на публикацията си в HTML режим.

Рамки с различни цветове на фона и канта

Пример 1

„В живота на всеки един от нас има само две възможности - да се примирим с това, което имаме днес, или да поемем отговорност за промяната в своя живот към по-добро.“Денис Уейтли

Код

<center>

<blockquote 15px="" padding:="" style="background: #E6E8FA; 
border-bottom: #0e9e08 3px solid; border-left: #444444 3px solid; border-right: #0073e9 3px solid; border-top: #FF9900 3px solid; height: 60; padding: 15px; padding: 15px; padding: 15px; width: 400;">

ваш текст</blockquote>

</center>

Пример 2

Ваш текст

Код

<center>

<blockquote 15px="" padding:="" style="background: #603300;

 border-bottom: #0e9e08 13px solid; border-left: #871F78 13px solid;

 border-right: #0073e9 13px solid; border-top: #FF9900 13px solid;

height: 100; padding: 15px; padding: 15px; padding: 15px; width: 400;">

 ваш текст</blockquote>

<center>

Пример 3

Ваш текст

Код

<center>

<blockquote 15px="" inset="" padding:="" style="background: #CDC9A5; 
border-bottom: #0e9e08 10px solid; border-left: #CDC9A5 13px solid; border-right: #0073e9 10px solid; border-top: #CDC9A5 13px solid; height: 100; padding: 15px; padding: 15px; padding: 15px; width: 400;">

Ваш текст</blockquote>

</center>

Пример 4

Ваш текст

Код

<center>

<blockquote 15px="" inset="" padding:="" style="background: #CDC9A5;

border-bottom: #0e9e08 10px solid; border-left: #CDC9A5 13px solid;

border-right: #0073e9 10px solid; border-top: #CDC9A5 13px solid;

height: 100; padding: 15px; padding: 15px; padding: 15px; width: 400;">

Ваш текст</blockquote>

</center>

Пример 5

Ваш текст

Код

<center>

<blockquote 15px="" padding:="" ridge="" style="background: #F8F8FF;

border-bottom: #0e9e08 10px solid; border-left: #CDC9A5 13px solid;

border-right: #CDC9A5 10px solid; border-top: #CDC9A5 13px solid; height: 100; padding: 15px; padding: 15px; padding: 15px; width: 400;">

Ваш текст</blockquote>

</center>

Пример 6

Ваш текст

Код

<center>

<blockquote 15px="" padding:="" ridge="" style="background: #F8F8FF;

border-bottom: #047AFE 11px solid; border-left: #99CC32 11px solid;

 border-right: #eeeeee 5px solid; border-top: #eeeeee 5px solid; height: 200; padding: 15px; padding: 15px; padding: 15px; width: 250;">

Ваш текст</blockquote>

</center>

Пример 7

Ваш текст

Код

<center>

<blockquote 15px="" padding:="" style="background: #F8F8FF;

border-bottom: #0e9e08 5px solid; border-left: #eeeeee 5px solid;

border-right: #eeeeee 5px solid; border-top: #029D74 5px solid; height: 60; padding: 15px; padding: 15px; padding: 15px; width: 400;">

Ваш текст</blockquote>

</center>

Настройки в кодовете на рамки за текст

А сега да уточним настройките в кодовете на рамки за текст. Имаме следния примерен код за рамка.

<center><blockquote 15px="" padding:="" style="background: #E6E8FA; border-bottom: #0e9e08 3px solid; border-left: #444444 3px solid; border-right: #0073e9 3px solid; border-top: #FF9900 3px solid; height: 60; padding: 15px; padding: 15px; padding: 15px; width: 400;">Ваш текст</blockquote></center>

В него следните значения могат да бъдат променяни според вашите предпочитания.


background: #E6E8FA; - цвят на фона, върху който е текста в рамката

border-bottom: #0e9e08 3px - цвят и размер долната окантовка на рамката

border-left: #444444 3px - цвят и размер на лявата окантовка на рамката

border-right: #0073e9 3px - цвят и размер на дясната окантовки на рамката

border-top: #FF9900 3px - цвят и размер на горната окантовка на рамката

width: 400; - ширина на рамката ; height: 60; - височина на рамката

Уточнение

Когато пишете текст в рамка, използвайте настройките за разположение в център, ляво или дясно. Напишете текста и не движете курсора. Текста ще се разположи автоматично според избраните настройки.

Това е всичко. Казвам ви довиждане и ви пожелавам творчески успех. Споделете с приятелите си, оставете коментари.

И още един пример:

Новият посетителски център е два пъти по-голям от стария и позволява на 1,6 милиона души, които посещават годишно мемориала на кораба "Аризона", да добият по-добра представа за нападението, което тласна САЩ във Втората световна война. Конър се надява, че новият посетителски център ще помогне на хората да си спомнят по-добре за уроците от 7 декември 1941 и главно за необходимостта да бъдат подготвени.

Кодът е:

<div align="center" style="border: 2px solid #2288BB;">

<div style="background-color: white; border-style: solid; color: red; padding: 4px;">

<div style="color: black; font-style: italic; font: 14px &quot;arial&quot;; padding: 4px; text-align: center;">

<img align="left" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnWEf2o_OtR2nmz4_uilfme2f26NgsOsB0hODazhhyqRLKSHBwHDo9JR51XNhB-96H5a_E7c93PYbSOdFA8-Rhjj3Axo1YX-hQCjWgXw448pEPffUIKHMnelz4jgXIf8t2hjbjlYDdJw/h120/Question_book.png" width="30" /><img align="right" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvSho7LkNQkRSmgrwd4nfx2z4G1kgw3MoS2rRiJYk2ct9wctmM0UxGX5JMs7BZ3kpBwfPmpIllOzXubyRn7uppSOZXyk09zJMpC9RpsKmessgafwI9GnfOeRhjp65hEHloPr-QQpN-TU/h120/Nuvola.png" width="30" /> TEXT

</div>

</div>

</div>

</div>

по материали на Олга Протасова

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: