TAGCLOUD

BOOOMMM

by Borna Almasi

HTML

<link href='http://fonts.googleapis.com/css?family=Patrick+Hand&v2' rel='stylesheet' type='text/css'>

<span class="surround">
    <span class="tagsh"> Tags </span>
    
</span>

CSS

.tag{
    color:white;
    font-family: 'Patrick Hand', cursive;
    font-size:15px;
    margin: 10px 20px 10px 10px;
    position:relative;
    display:inline-block;
    background: -webkit-gradient(linear,left bottom, left top,color-stop(0.4, rgb(230,0,0)), color-stop(0.75, rgb(255,110,43)));
    background: -moz-linear-gradient(center bottom,rgb(230,0,0) 40%,rgb(255,110,43) 75%);
    border-radius: 2px 0px 0px 2px;
    -moz-border-radius:  2px 0px 0px 2px; /* Firefox */
    -webkit-border-radius: 2px 0px 0px 2px; /*Chrome and Safari*/
    padding:3px 5px;
    box-shadow: 6px 4px 10px #BBBBBB;
    -moz-box-shadow:  6px 4px 10px #BBBBBB; /* Firefox */
    -webkit-box-shadow:  6px 4px 10px #BBBBBB; /* Safari, Chrome */
}

.tag:after{
    position:absolute;
    right:-15px;
    top:0px;
    content:"";
    height:24px;
    width: 15px;
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius:  0px 10px 10px 0px; /* Firefox */
    -webkit-border-radius: 0px 10px 10px 0px; /*Chrome and Safari*/
    background:-webkit-gradient(linear,left bottom, left top,color-stop(0.4, rgb(230,0,0)),color-stop(0.75, rgb(255,110,43)));
    box-shadow: 2px 4px 10px #BBBBBB;
    -moz-box-shadow:  6px 4px 10px #BBBBBB; /* Firefox */
    -webkit-box-shadow:  6px 4px 10px #BBBBBB; /* Safari, Chrome */  
}


.tag:before{ /*This is the hole in the tag */
    position:absolute;
    right:-8px;
    top:40%;
    content:"";
    height: 5px;
    width: 5px;
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /*Chrome and Safari*/
    border-radius:10px;
    background: white;
    box-shadow: 1px 1px 3px black;
    -moz-box-shadow:  1px 1px 3px black; /* Firefox */
    -webkit-box-shadow:  1px 1px 3px black; /* Safari, Chrome */
    z-index:1;
}

.plus{
    left:-14px;
    top:0px;
    position:absolute;
    z-index:2;
    border-width: 0px 5px 10px 5px;
    border-style:solid;
    border-color: transparent transparent #00a600...

JavaScript

var clearIcon ='<span id="icon_clear">☺</span>';
$('<input type="input" class="textbox"/>'+clearIcon).appendTo('.surround')
    .keyup(
       function(e){
           var $dad = $($(this).parent());
           $(this).val().length>0?
               $('#icon_clear').fadeIn(300).click(function() {
                   $('.textbox').val('');}):
                   $('#icon_clear').fadeOut(300);
           if (e.keyCode in {13:"enter",32:"space"}){              
               var text = $(this).val(); 
               $('#icon_clear').remove();
               $dad.append($('<span class="tag"><span class="plus"></span><span class="minus"></span> '+text+'</span>'));
               $dad.append($(this).val("").hide().show("slow").focus());
               $dad.append(clearIcon);
           } ;});