Оформяне на цитати в съвременен дизайн

Оформяне на цитати
Добър ден, приятели. Красиво оформените цитати в текста не са само елемент от дизайна. На цитатите в публикацията трябва да се обърне специално внимание, тъй като едно красиво оформяне на част от текста се възприема по-добре от читателя.


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

    Първи вариант

    Първи вариант

    Код


    <blockquote>
      <p>Текст на цитата</p>
      <footer><cite>Автор</cite></footer>
    </blockquote>
    <style>blockquote {
    background: linear-gradient(135deg, #F6EEDB 50%, #F4FEF9 50%);
    padding: 50px 30px;
    text-align: center;
    position: relative;
    color: #49152C;
    padding: 30px 50px;
    font-family: 'Lato', sans-serif;
    }
    blockquote p {
    font-size: 22px;
    margin-top: 30px;
    }
    blockquote p:before {
    content: "\201C";
    font-size: 100px;
    color: #EA6844;
    font-family: serif;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    }
    blockquote cite {
    font-style: normal;
    }</style>


    Втори вариант

    Втори вариант

    Код


    <blockquote>
      <p>Текст на цитата</p>
      <cite>Автор</cite>
    </blockquote>


    <style>blockquote {
    margin: 0;
    background: white;
    border-top: 5px solid #EAF9F9;
    border-bottom: 5px solid #EAF9F9;
    color: #3A3C55;
    padding: 30px 30px 30px 90px;
    position: relative;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    }
    blockquote:before {
    content: "\201C";
    font-family: serif;
    position: absolute;
    left: 20px;
    top: 20px;
    color: white;
    background: #FB6652;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 50px;
    line-height: 1.35;
    text-align: center;
    }
    blockquote p {
    margin: 0 0 16px;
    font-size: 22px;
    letter-spacing: .05em;
    line-height: 1.4;
    }
    blockquote cite {
    font-style: normal;
    }</style>


    Трети вариант

    Трети вариант

    Код


    <blockquote>
      <p> Текст на цитата </p>
      <footer><cite>Автор</cite></footer>
    </blockquote>


    <style>blockquote {
    margin: 0;
    background: #BCE8EA;
    color: #131314;
    padding: 30px 30px 30px 90px;
    position: relative;
    font-family: 'Lato', sans-serif;
    }
    blockquote:before {
    content: "\201C";
    font-family: serif;
    position: absolute;
    top: 20px;
    left: 16px;
    color: black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    }
    blockquote:after {
    content: "";
    width: 4px;
    background: white;
    position:absolute;
    left: 70px;
    top: 20px;
    bottom: 20px;
    }
    blockquote p {
    margin-top: 0;
    font-size: 24px;
    font-weight: 300;
    }
    blockquote cite {
    font-style: normal;
    text-transform: uppercase;
    }</style>


    Четвърти вариант

    Четвърти вариант

    Код


    <blockquote>
      <p>Текст на цитата</p>
      <footer><cite>Автор</cite></footer>
    </blockquote>

    <style>
    blockquote {
    margin: 0;
    background: #FFF4ED;
    padding: 40px;
    color: #3F484D;
    position: relative;
    font-family: 'Lato', sans-serif;
    text-align: center;
    }
    blockquote:before, blockquote:after {
    font-size: 45px;
    color: #3CA1D9;
    position: absolute;
    height: 2px;
    left: 40px;
    right: 40px;
    line-height: .5;
    background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%);
    font-family: serif;
    }
    blockquote:before {
    content: "\201C";
    top: 30px;
    }
    blockquote:after {
    content: "\201D";
    bottom: 30px;
    }
    blockquote p {
    font-size: 20px;
    }
    blockquote footer {
    margin-bottom: 1em;
    }
    blockquote cite {
    font-style: normal;
    }</style>


    Пети вариант

    Пети вариант

    Код


    <blockquote>
      <p>Текст на цитата </p>
      <footer><cite>Автор</cite></footer>
    </blockquote>

    <style>
    blockquote {
    margin: 0;
    background: #F0F0F1;
    color: #333334;
    padding: 20px 30px;
    position: relative;
    border-left: 35px solid #DFDEDE;
    font-family: 'Lato', sans-serif;
    }
    blockquote:before {
    content: "\201C";
    font-family: serif;
    position: absolute;
    left: -29px;
    top: 5px;
    color: #BCBCBC;
    font-size: 50px;
    text-shadow: 1px 2px 0 white;
    }
    blockquote p {
    margin: 0 0 16px;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 1.4;
    }
    blockquote cite {
    font-style: normal;
    font-weight: 300;
    }</style>


    Уточнения

    ➤В оцветения в червено участък на кода напишете цитата и името на автора;

    ➤Общият фон на цитата се определя от свойството background: и лесно можете да изберете желания цвят, ако използвате тази цветова таблица;

    ➤Когато пишете публикация, отидете в режим HTML и инсталирайте готовия код на правилното място;

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

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

    BGtop

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