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

Здравейте, всички. В блога си вече има куп статии за оформяне на текст в публикация с различни по цвят и форма рамки. Днес имам за вас друга ефектна рамка, появяваща се около текст в публикация, появяваща се под курсор от центъра към краищата му. На чист 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>

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

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

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

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