эффект появления рамки при наведении курсора

Всем, привет. На блоге уже куча статей про оформление текста в красивые рамки. Ещё один эффект анимации рамки от центра к краям на CSS. Можно оформить участок текста или картинку.

рамка для текста


Вообще, такие не сложные динамичные детали привлекают внимание посетителей, да и дизайн выглядит более стильно и уникально. 

В Блоггере реализуется достаточно просто. В редакторе сообщений в режиме 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>

Так же вместо текста можно и картинку вставить. Я сейчас в коде поменяла только цвет рамки и изменила размер, соответственно ширине изображения.





Код такой

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

Потом, там где нужно, в сообщении уже прописывать код HTML с нужным текстом.

Благодарю за визит и до встречи.

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


7 комментариев:

  1. Ух ты! Очень полезный пост. Возьму на заметку)))

    ОтветитьУдалить
  2. Виктория, у меня вопрос на засыпку. Как поисковик воспринимает такой текст: как текст или как картинку? Спасибо заранее за ответ!

    ОтветитьУдалить
    Ответы
    1. Привет, Виктория. Текст так и воспринимает как текст. Картинку как картинку. У меня в примере использован Lorem. Почитайте в википедии, для чего да и вообще познавательно. https://ru.wikipedia.org/wiki/Lorem_ipsum

      Удалить
  3. Вика, приветик. Очень понравился вариант. Пора бы мне чего-нибудь применить из твоих полезностей. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Привет, Люба. Не сомневаюсь, что ты найдёшь этому применение.

      Удалить
  4. Ух ты, прикольно! Можно цитату выделить или полезную информацию какую..

    ОтветитьУдалить
    Ответы
    1. Да, Наташа это тоже идея. Можно вместо класса item поставить blockquote и все цитаты будут с таким эффектом. Ты умничка.

      Удалить

Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск
Foto
My Photo