4

Публикация. Появяваща се рамка на текст или изображение

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



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

    Lorem ipsum dolor sit amet, vim nemore conceptam id, an has iusto paulo omittam. Pro eu legere scripserit! Ad magna iisque consequuntur mei, laudem prompta prodesset ad eum, ut illud facilisi assueverit usu? Cu quas aeque per. Praesent philosophia eum ex, vel noster consequat conceptam te! Eu graeci legimus quo, an nibh tractatos eos, usu suscipit tractatos ei.

    Появяваща се рамка на текст

    Кодът е:

    <style>.item{width:90%;margin:auto;position:relative;padding:20px;}
    .item:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
    .item:hover:after{border:5px solid red; position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}</style>

    <div class="item">
    Тук е участъкът от вашия текст, който искате да оформите в рамка
    </div>


    Тук width:90%;  е ширината на абзаца от текста, а border:5px solid red;  е дебелината и цветът на рамката. Вместо 5px  и red  можете да сложите друга дебелина и цвят, например: 8px и #2288bb.

    Появяваща се рамка на изображение

    В кода можете да вмъкнете изображение. Сложете курсора върху изображението по-долу.




    Кодът е:

    <style>.item1{width:50%;margin:auto;position:relative;padding:20px;}
    .item1:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
    .item1:hover:after{border:5px solid Green; position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}<style>
    <br />
    <div class="item1">
    <img src="адрес на изображението" />
    </div>


    В този код също можете да промените участъците, отбелязани в червено и синьо.
    Ако възнамерявате често да използвате този тип плъзгаща се рамка за текстовете или изображенията си, по-добре е да поставите първата част от CSS кода директно в темата на блога преди реда ]]> </ b: skin>. Само премахнете от него отварящия и затварящия маркер <style> и </style>.
     

     Ето така:

    .item{width:90%;margin:auto;position:relative;padding:20px;}
    .item:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
    .item:hover:after{border:5px solid red; position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}


    И когато и където е необходимо, в публикацията, в HTML режим вписвате остатъка от кода около желания текст. Ето така:


    <div class="item">
    Тук е участъкът от вашия текст, който искате да оформите в рамка
    </div>


    Същото се отнася и за изображенията, които искате да оформите в появяваща се рамка.

    Това е за днес. Благодаря ви за посещението ви и скоро ще се видим отново.

    Успех на всички ни!


    4 коментара :

    1. Много интересен урок, който може да ми е полезен за някоя статия.

      +1

      ОтговорИзтриване
      Отговори
      1. Наистина, за да се акцентира върху част от текст, е интересно. Благодаря Ви!

        Изтриване
      2. peSho, направих малка промяна в Политика на конфиденциалност и защита https://www.blogzablogove.com/p/www.html, моля, прочетете и ми дайте съвет. Разчитам на вас.

        Изтриване
      3. Извинявам се, че чак сега виждам написаното. Според мен е станало много добре и е правилно структурирано. В моя блог забелязах, че друг читател беше дал мнение по въпроса. Предполагам, че е изразил своята гледна точка като е искал само да помогне.

        Изтриване


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