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

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

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

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

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

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

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

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