Animasi Efek Backgroud Transisi Pada Unordered Lists

Menggunakan kode CSS3 untuk menampilkan sesuatu yang berbeda adalah sebuah hal yang sangat menyenangkan bagi sebagian orang, khususnya saya. Meskipun background saya bukanlah orang yang paham betul mengenai bahasa pemrograman web, tapi saya mempunyai minat besar untuk belajar bagaimana sebuah kode bisa membentuk suatu karakter yang sangat mengagumkan.

Pada postingan kali ini saya akan berbagi trik tentang bagaimana cara menampilkan Unordered Lists atau daftar tidak terurut menjadi lebih variatif menggunakan kode CSS3 dengan efek background transisi, dan nantinya Anda bisa memodifikasi sendiri tampilannya sesuai dengan kreatifitas Anda sendiri.

Demo: Maroon

• Tautan Satu
• Tautan Dua
• Tautan Tiga
• Tautan Empat

ul.animatedbgul a {
    text-decoration: none;
    color: #2d2d2d;
}
ul.animatedbgul a:hover {
    text-decoration: none;
    color: #FFF;
}
ul.animatedbgul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.animatedbgul li {
    width: 100%;
    clear: left;
    overflow: hidden;
}
ul.animatedbgul li span {
    display: block;
    float: left;
    min-width: 0;
    margin-bottom: 5px;
    padding: 8px;
    color: #5d5d5d;
}
ul.animatedbgul li:hover span {
    color: #fff;
    background: #ce3e3e;
    border-left: 8px solid #8B0000;
    min-width: 450px;
    -webkit-box-shadow: 0 0 5px gray;
       -moz-box-shadow: 0 0 5px gray;
            box-shadow: 0 0 5px gray;
    -webkit-transition: all .3s ease-out;
       -moz-transition: all .3s ease-out;
         -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
}

<ul class="animatedbgul">
  <li><span><a href="#">Tautan Satu</a></span></li>
  <li><span><a href="#">Tautan Dua</a></span></li>
  <li><span><a href="#">Tautan Tiga</a></span></li>
  <li><span><a href="#">Tautan Empat</a></span></li>
</ul>

Demo: Blue

• Tautan Satu
• Tautan Dua
• Tautan Tiga
• Tautan Empat

ul.animatedbgul a {
text-decoration: none;
color: #2d2d2d;
}
ul.animatedbgul a:hover {
text-decoration: none;
color: #FFFFFF;
}
ul.animatedbgul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.animatedbgul li {
    width: 100%;
    clear: left;
    overflow: hidden;
}

ul.animatedbgul li span {
    display: block;
    float: left;
    min-width: 0;
    margin-bottom: 5px;
    padding: 8px;
    color: #5d5d5d;
}

ul.animatedbgul li:hover span {
    color: #fff;
    background: #0a31f7;
    border-left: 8px solid #0721a3;
    min-width: 450px;
    -webkit-box-shadow: 0 0 5px gray;
       -moz-box-shadow: 0 0 5px gray;
            box-shadow: 0 0 5px gray;
    -webkit-transition: all .3s ease-out;
       -moz-transition: all .3s ease-out;
         -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
}

<ul class="animatedbgul">
  <li><span><a href="#">Tautan Satu</a></span></li>
  <li><span><a href="#">Tautan Dua</a></span></li>
  <li><span><a href="#">Tautan Tiga</a></span></li>
  <li><span><a href="#">Tautan Empat</a></span></li>
</ul>

Demo: Maroon Dengan Efek Gradient

• Tautan Satu
• Tautan Dua
• Tautan Tiga
• Tautan Empat

ul.animatedbgul a {
text-decoration: none;
color: #2d2d2d;
}
ul.animatedbgul a:hover {
text-decoration: none;
color: #FFFFFF;
}
ul.animatedbgul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.animatedbgul li {
    width: 100%;
    clear: left;
    overflow: hidden;
}

ul.animatedbgul li span {
    display: block;
    float: left;
    min-width: 0;
    margin-bottom: 5px;
    padding: 8px;
    color: #5d5d5d;
}

ul.animatedbgul li:hover span{
 padding-left:15px; 
 color: #fff;
 background: #ce3e3e;
 background-image:-webkit-linear-gradient(left,transparent,transparent 10%,rgba(206,62,62,0.9));
 background-image:   -moz-linear-gradient(left,transparent,transparent 10%,rgba(206,62,62,0.9));
 background-image:    -ms-linear-gradient(left,transparent,transparent 10%,rgba(206,62,62,0.9));
 background-image:    -oz-linear-gradient(left,transparent,transparent 10%,rgba(206,62,62,0.9));
 background-image:        linear-gradient(left,transparent,transparent 10%,rgba(206,62,62,0.9));
 border-bottom-left-radius:2em;
 border-top-right-radius:2em;
 border-right: 8px solid #930606;
 border-left: 8px solid #930606;
 min-width: 450px; /* animated property. Set to desired final length of background */
 -webkit-box-shadow: 0 0 5px gray;
    -moz-box-shadow: 0 0 5px gray;
         box-shadow: 0 0 5px gray;
 -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
         transition: all 0.3s ease-out;
}

<ul class="animatedbgul">
  <li><span><a href="#">Tautan Satu</a></span></li>
  <li><span><a href="#">Tautan Dua</a></span></li>
  <li><span><a href="#">Tautan Tiga</a></span></li>
  <li><span><a href="#">Tautan Empat</a></span></li>
</ul>

Kesimpulan

Kode CSS di atas bebas dimodifikasi sesuai dengan yang diinginkan untuk membuat tampilan yang lebih menarik, semoga apa yang saya sampikan kali ini bermanfaat. Selamet mencoba. 

sumber: http://www.dynamicdrive.com

—ς∞ς— 

Tweet

Postingan terkait:

Ditulis EM — Thursday 30 May 2013 — Add Comment — CSS3