Izvēlne gaiši zilā tonī ar animācijas efektu

Lappuse 1 no 1
1

uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU APLIKĀCIJAS, SKRIPTI, SPRAUDŅI » uCoz » Izvēlne gaiši zilā tonī ar animācijas efektu

Antikrists

Pirmdiena, 23.10.2017, 5:29:30 | 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 .. :

Vertikālā izvēlne gaišam gan tumšam dizainam.

Sānu blokā

Code

<ul class="uw">

  <li><a href="LINKS">Saturs 1</a></li>
  <li><a href="LINKS">Saturs 2</a><uli>
  <li><a href="LINKS">Saturs 3</a></li>
  <li><a href="LINKS">Saturs 4</a></li>
  <li><a href="LINKS">Saturs 5</a></li>
</ul>

CSS

Code

ul.uw {-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-padding-start: 0;padding: 0px;}
ul.uw li {list-style: none;}
ul.uw li a {text-decoration: none;background-color: #fff;display: block;font-size: 15px;margin-bottom: 3px;border-left: solid 5px #4766b9;padding: 12px 0 12px 15px;color: #ffffff;background-size: 200.22% auto;-webkit-background-size: 200.22% auto;-moz-background-size: 200.22% auto;background-position: -0 0;background-image: linear-gradient(to right,rgb(1, 1, 8) 20%,rgb(69, 142, 195) 50%);transition: background-position .5s ease-out;-webkit-transition: background-position .5s ease-out;width: 250px;}
ul.uw li a:hover {background-position: -99.99% 0;color: #fff;text-shadow: 0 1px 0 #171616;}

Iznākums