----------------------------------------------- DEMO -----------------------------------------------
----------------------------------------------- CSS3 -----------------------------------------------
.animated_tags { list-style:none; width:345px; height:220px; border:1px solid #CCC; padding:10px 20px; background:#e3ebf1; }
.animated_tags li { background: #e1ffff;
background: -moz-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(12%,#fdffff), color-stop(30%,#e6f8fd), color-stop(54%,#c8eefb), color-stop(75%,#bee4f
, color-stop(100%,#b1d8f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* IE10+ */
background: linear-gradient(to bottom, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C */
filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); /* IE6-9 */
border-radius:0px 20px 20px 0px; display:block; height:22px; line-height:24px; margin:5px 10px; padding:5px 5px 5px 20px;
position:relative; text-align:left; width:70px; border-top:1px solid #56a3d5; border-bottom:1px solid #56a3d5; float:left; }
.animated_tags li a { color:#56a3d5; display:block; font:bold 12px Arial, Helvetica, sans-serif; line-height:20px; text-decoration:none; }
.animated_tags li a:hover { color:#000; display:block; font:bold 12px Arial, Helvetica, sans-serif; line-height:20px; text-decoration:none; }
.animated_tags li:before { content:""; float:left; position:absolute; top:0; left:-17px; width:0; height:0;
border-color:transparent #56a3d5 transparent transparent; border-style:solid; border-width:17px 17px 17px 0; }
.animated_tags li:after { content:""; position:absolute; top:15px; left:8px; float:left; width:6px; height:6px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; }
.animated_tags li span { background:#56a3d5; border-color:#3591cd #318cc7 #2f86be; background-image:-webkit-linear-gradient(top, #6aaeda, #4298d0);
background-image:-moz-linear-gradient(top, #6aaeda, #4298d0); background-image:-o-linear-gradient(top, #6aaeda, #4298d0);
background-image:linear-gradient(to bottom, #6aaeda, #4298d0); border-radius:0 20px 20px 0; color:transparent; display:inline-block; height:24px;
line-height:24px; padding:5px; width:5px; position:absolute; text-align:center; top:-1px; right:0; -webkit-transition:width 0.3s ease-out;
-moz-transition:width 0.3s ease-out; -o-transition:width 0.3s ease-out; transition:width 0.3s ease-out; }
.animated_tags li:hover span { width:20px; color:#FFF; }
----------------------------------------------- HTML5 -----------------------------------------------
