0

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

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



    По принцип искам да ви покажа какви чудеса можете да създадете, ако промените размера и цвета на рамката. Можете да използвате кодовете на тези рамки, можете да персонализирате цвета и фона на текста в тях. Копирайте кода и го вложете в редактора на публикацията си в 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: #E6E8FAborder-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://lh3.googleusercontent.com/-ojNWcIqC5Q0/WijYIUfWuwI/AAAAAAAAGRc/UQOj1rEwf8kV2bpKSv64n1REf8TMW5VEgCLcBGAs/h120/Question_book.png" width="30" /><img align="right" height="30" src="https://lh3.googleusercontent.com/-fEjIHA_DfcI/WijYAYYJ4KI/AAAAAAAAGRY/h0WXVhY4TBQmdSWZ_1XPl_ojmJVPzXu9ACLcBGAs/h120/Nuvola.png" width="30" /> TEXT
    </div>
    </div>
    </div>

    </div>



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

    Няма коментари :

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита