Paziņojuma vai jebkura cita satura logs ar mainīgu fonu

Lappuse 1 no 1
1

Antikrists

Pirmdiena, 23.10.2017, 6:51:18 | Ieraksts #1

FORUMA APSARGS

Foruma ieraksti: 606

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@Antikrists raksta .. :

Jebkāda satura logs kas iederēsies tumšā dizainā jo ir balts bet uzejot sarkans ar interesantu fona maiņas veidu.

Satura logs strādā arī kā poga uz citu mājaslapu.

Kur vēlies redzet liec

Code

<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

Code

.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%;
}

Iznākums