7 czerwca 2016

Strony - różne efekty po najechaniu

Znalazłam kilka kodów, które ułatwią każdemu urozmaicenie szablonu.

EFEKT:
 EFEKT PO NAJECHANIU:

.PageList LI.selected A {font-weight:normal;}
.tabs-outer {
position:fixed;
left:0;
top:50%;
width:250px;
overflow:hidden;
transform:translateY(-50%);
margin-top:-50px;
}

.tabs-inner {
  padding:50px;
}
.tabs .widget li, .tabs .widget li {float:none;}

.tabs li a {
font:normal normal 8px Verdana;
letter-spacing:3px;
border:1px solid;
color:#fff;
padding:15px;
text-transform:uppercase;
display: block;
margin-bottom:5px;
transition:.4s;
}
.tabs li a:before, .tabs li a:after {
content:"";
width:20px;
height:20px;
background:#fff;
display:block;
position:absolute;
transform:rotate(45deg);
transition:.4s;
}
.tabs li a:before{
  margin-top: -5px;
left: -75px;
}
.tabs li a:after{
right:-75px;
  margin-top: -14px;
}
.tabs-inner li a:hover::before{
left:-61px;
}
.tabs-inner li a:hover::after{
right:-61px;
}
.tabs-inner li a:hover{
border:1px solid transparent;
}
.tabs-inner li a:active{
opacity:.5;
}

Brak komentarzy:

Prześlij komentarz