Home » Web Designs » Mendesain List Menggunakan CSS3

Mendesain List Menggunakan CSS3

mendesain list dengan CSS3

Mendesain sebuah list untuk sebuah website memang harus penuh trik. Banyak cara untuk menjadikan sebuah list menjadi lebih keren dan enak dilihat. Orang bebas menggunakan teknik yang mana. Pada tulisan ini akan saya ulas teknik mendesain list menggunakan CSS3.

Pada contoh kali ini ada beberapa elemen CSS3 yang saya gunakan, diantaranya transform:rotate(360deg) untuk memutar elemen, box-shadow untuk memberikan bayangan pada obyek, border-radius untuk membuat lengkungan, transition:all .3s ease-out untuk memperhalus gerakan, dan content:counter(li); counter-increment:li; untuk membuat penomoran. Mari langsung praktek saja!

Script HTML

Buatlah sebuah file bernama index.html dan masukkan script di bawah ini.

<ol>
<li><a href="">Nasi Goreng Kambing</a></li>
<li><a href="">Bestik Lidah Kuah Segar</a></li>
<li><a href="">Aneka Masakan Soto</a>
<ol>
<li><a href="">Soto Sokaraja</a></li>
<li><a href="">Soto Seger Mbok Giyem Solo</a></li>
<li><a href="">Soto Tangkar Pipi Sapi</a></li>
<li><a href="">Soto Sulung</a></li>
<li><a href="">Soto Kadipiro</a></li>
</ol>
</li>
<li><a href="">Sirloin Hot Plate</a></li>
<li><a href="">Gado-Gado</a></li>
</ol>

Script CSS

Kemudian masukkan script CSS ini untuk memberikan style pada list yang telah dibuat di HTML. Script CSS bisa dimasukkan secara internal di file index.html atau bisa juga dipanggil dengan cara ekternal dalam file yang terpisah.

body{
background:#333 url(wood.png) repeat;
color:#FFF;
font: 15px arial, sans-serif;
}
.wrapper{
width:500px;
margin:0 auto;
top:50%;
bottom:50%;
}
ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{
margin: 0 0 0 2em;
}
.list-keren a{
position: relative;
display: block;
padding: .6em .4em .6em 2em;
*padding: .4em;
margin: .5em 0;
background: #333;
color: #FFF;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
box-shadow:1px 1px 1px #000000 inset;
-moz-box-shadow:1px 1px 1px #000000 inset;
-webkit-box-shadow:1px 1px 1px #000000 inset;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.list-keren a:hover{
background: #222;
box-shadow:1px 1px 1px #000000 inset;
-moz-box-shadow:1px 1px 1px #000000 inset;
-webkit-box-shadow:1px 1px 1px #000000 inset;
}

.list-keren a:hover:before{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.list-keren a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #333;
height: 2em;
width: 2em;
line-height: 2em;
border: 0.3em solid #F79C09;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
box-shadow:1px 1px 2px #000 inset;
-moz-box-shadow:1px 1px 2px #000 inset;
-webkit-box-shadow:1px 1px 2px #000 inset;
}
small a{text-decoration:none; color:#fff;font-weight:bold;}
small a:hover{text-decoration:underline;}

Nah,  kalau langkah memasang kode di atas berjalan dengan lancar maka hasilnya langsung bisa dilihat di browser.

Browser Support

Teknik ini telah sukses dicoba di browser Firefox 12. Untuk browser Chrome 19 lancar hanya saja animasi CSS3 yang rotate(360deg) belum bisa jalan.

Referensi Bacaan

http://www.w3.org/TR/CSS21/generate.html#counters

Untuk lebih jelasnya silahkan lihat demo yang sudah saya sertakan. Semoga bermanfaat :)

fittext responsive text

1 Comments

Leave a Reply

Scroll To Top