Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

2018-05-26

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

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



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



    ДЕМО


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

    Кодът е:

    <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>


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

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

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

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

    BGtop



    4 коментара:

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

      +1

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

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

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

        Изтриване