Hiệu ứng động cho định dạng list bằng CSS3

Nguồn: red-team-design.com

Đối với dân mê vọc css thì css3 quả là 1 công cụ trên cả tuyệt vời. Css3 ra đời đã giúp cho việc thiết kế, trình bày trang web hay blog trở nên nhẹ nhàng và đẹp mắt hơn. Đây cũng là nguồn cảm hứng để các designer sáng tạo nhiều hiệu ứng tuyệt vời trang hoàng cho blog...

1. Định dạng lại cho kiểu list đánh số mặc định:

ol{
 counter-reset: li; 
 list-style: none; /* Bỏ kiểu đánh số mặc định */
 *list-style: decimal; /* Giữ kiểu đánh số mặc định cho IE6/7 */
 font: 15px 'trebuchet MS', 'lucida sans';
 padding: 0;
 margin-bottom: 4em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol{
 margin: 0 0 0 2em; /* Canh lề trái cho list con */
}

2. CSS cho kiểu Rounded-shaped numbers:

.rounded-list a{
 position: relative;
 display: block;
 padding: .4em .4em .4em 2em;
 *padding: .4em;
 margin: .5em 0;
 background: #ddd;
 color: #444;
 text-decoration: none;
 border-radius: .3em;
 transition: all .3s ease-out; 
}
.rounded-list a:hover{
 background: #eee;
}
.rounded-list a:hover:before{
    transform: rotate(360deg); 
}
.rounded-list a:before{
 content: counter(li);
 counter-increment: li;
 position: absolute; 
 left: -1.3em;
 top: 50%;
 margin-top: -1.3em;
 background: #87ceeb;
 height: 2em;
 width: 2em;
 line-height: 2em;
 border: .3em solid #fff;
 text-align: center;
 font-weight: bold;
 border-radius: 2em;
 transition: all .3s ease-out;
}

3. CSS cho kiểu Rectangle-shaped numbers

.rectangle-list a{
 position: relative;
 display: block;
 padding: .4em .4em .4em .8em;
 *padding: .4em;
 margin: .5em 0 .5em 2.5em;
 background: #ddd;
 color: #444;
 text-decoration: none;
 transition: all .3s ease-out; 
}
.rectangle-list a:hover{
 background: #eee;
} 
.rectangle-list a:before{
 content: counter(li);
 counter-increment: li;
 position: absolute; 
 left: -2.5em;
 top: 50%;
 margin-top: -1em;
 background: #fa8072;
 height: 2em;
 width: 2em;
 line-height: 2em;
 text-align: center;
 font-weight: bold;
}
.rectangle-list a:after{
 position: absolute; 
 content: '';
 border: .5em solid transparent;
 left: -1em;
 top: 50%;
 margin-top: -.5em;
 transition: all .3s ease-out;    
}
.rectangle-list a:hover:after{
 left: -.5em;
 border-left-color: #fa8072;    
}

4. CSS cho kiểu Circle-shaped numbers

.circle-list li{
    padding: 2.5em;
    border-bottom: 1px dashed #ccc;
}
.circle-list h2{
    position: relative;
    margin: 0;
}
.circle-list p{
    margin: 0;
}
.circle-list h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;    
    z-index: -1;
    left: -1.3em;
    top: -.8em;
    background: #f5f5f5;
    height: 1.5em;
    width: 1.5em;
    border: .1em solid rgba(0,0,0,.05);
    text-align: center;
    font: italic bold 1em/1.5em Georgia, Serif;
    color: #ccc;
    border-radius: 1.5em;
    transition: all .2s ease-out;    
}
.circle-list li:hover h2:before{
    background-color: #ffd797;
    border-color: rgba(0,0,0,.08);
    border-width: .2em;
    color: #444;
    transform: scale(1.5);
}

5. Sử dụng:
Tại nơi sử dụng định dạng list kể trên, chèn đoạn html sau:

<ol class="rounded-list">
 <li><a href="LINK">List item</a></li>
 <li><a href="LINK">List item</a></li>
 <li><a href="LINK">List item</a>
  <ol>
   <li><a href="LINK">List sub item</a></li>
   <li><a href="LINK">List sub item</a></li>
   <li><a href="LINK">List sub item</a></li>
  </ol>
 </li>
 <li><a href="LINK">List item</a></li>
 <li><a href="LINK">List item</a></li>      
</ol>

6. Xong!