Paziņojuma vai jebkura cita satura logs ar mainīgu fonu
by Antikrists
HTML
<div class="block_services">
<a target="_blank" href="http://www.smejies.lv/?p=visi-joki&i=606">
<span>SMEJIES.LV<br><br>Sarunājas 2 meitenītes:
- Tu esi nevainīga?
- Ko?
- Nu, tu esi jaunava?
- Nē, lauva.</span>
</a>
</div>CSS
.block_services a:before,.block_services a:after,.block_services a:hover span{
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.block_services a{
position:relative;
overflow:hidden;
padding:15px;
display:inline-block;
color:#212121;
text-decoration:none;
width:300px;
background:#f2f2f2;
}
.block_services a:hover span{
position: relative;
z-index: 1;
}
.block_services a:hover span{
color:#fff
}
.block_services a:before,.block_services a:after{
content:'';
position:absolute;
width:300%;
height:100%;
-moz-transform: skew(-30deg, 0deg);
-o-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
-ms-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
z-index:0;
}
.block_services a:before{
top:0;
left:200%;
background:#ad131f;
}
.block_services a:after{
top:0;
right:200%;
background:#b81625;
}
.block_services a:hover:after{
right:49%;
}
.block_services a:hover:before{
left:50%;
}