<ul class="colors">
<span style="font-family: sans-serif; color:#777">Tag Color:</span>
<li style="background: #F95;"></li>
<li style="background: #6AD;"></li>
<li style="background: #E77;"></li>
<li style="background: #6C7;"></li>
<li style="background: #AAA;"></li>
</ul>
<h1 id="title">tags<span>.css</span></h1>
<label for="tag-typer">
<div id="tags">
<span class="tag"><span class="close">×</span>such tage</span>
<span class="tag"><span class="close">×</span>so color</span>
<span class="tag"><span class="close">×</span>many type</span>
<span class="tag"><span class="close">×</span>wow</span>
<input id="tag-typer" type="text" placeholder="Add tag..."/>
</div>
</label>
#title{
font:bold 48pt "Trebuchet MS";
text-align: center;
color: #F95;
letter-spacing: -2px;
}
#title span{
font-weight: normal;
color: #BBB;
}
#tags{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 4px #CCC inset;
padding: 10px;
width: 50%;
background: #fafafa;
margin: auto;
}
#tag-typer{
outline: none;
border: none;
padding: 6px;
margin: 3px;
margin-right: -25px;
width: 100px;
background-color: transparent;
font-size: 14px;
color: #333;
}
.tag{
display: inline-block;
background: #F95;
color: #FFF;
padding: 5px 10px;
margin:2px 2px 2px 20px;
font: normal 16px sans-serif;
position: relative;
cursor: default;
box-shadow:1px 1px 0 rgba(0,0,0,.2);
-webkit-transform-origin:0% 50%;
-webkit-animation: swing 1s;
-o-animation: swing 1s;
animation: swing 1s ;
}
.tag:before{
content: "";
position: absolute;
width: 0;
background: inherit;
height: 10px;
border: 10px solid #fafafa;
border-right-color: transparent;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
left: -20px;
top: 0;
}
.tag:after{
content: "";
width: 6px;
height: 6px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #FFF;
position: absolute;
left: -3px;
top: 12px;
box-shadow:inset 1px 1px 0 #CCC;
}
.tag .close{
position: absolute;
background: inherit;
left: -4px;
z-index: 3;
visibility: hidden;
}
.tag:hover .close{
visibility: visible;
}
.close:hover {
color: rgba(0,0,0,.5);
}
.colors {
list-style:none;
}
.colors li{
display: inline-block;
width:15px;
height: 15px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes swing
{
0% {-webkit-transform: rotate(100deg)}
25% {-webkit-transform: rotate(-25deg)}
50% {-webkit-transform: rotate(15deg)}
100% {-webkit-transform: rotate(0deg)}
}
@keyframes swing
{
0% {-webkit-transform: rotate(-200)}
25% {-webkit-transform: rotate(-70)}
50% {-webkit-transform: rotate(-185)}
100% {-webkit-transform: rotate(-180)}
}
$(document).ready( function() {
$("#tag-typer").keypress( function(event) {
var key = event.which;
if (key == 13 || key == 44){
event.preventDefault();
var tag = $(this).val();
if(tag.length > 0){
$("×"+tag+" ").insertBefore(this).fadeIn(100);
$(this).val("");
}
}
});
$("#tags").on("click", ".close", function() {
$(this).parent("span").fadeOut(100);
});
$(".colors li").click(function() {
var c = $(this).css("background-color");
$(".tag").css("background-color",c);
$("#title").css("color",c);
});
});