In my leisure time (really?) I have made Delicious icon with pure CSS just for fun.
Compatibility: IE7, IE8, IE9, Firefox 3.8+, Safari 5+, Chrome 14+, iPhone, Android, iPad, BlackBerry, Windows Mobile
HTML
<!DOCTYPE html>
<html>
<head>title>CSS Social Icon - Delicious</title></head>
<body>
<b class="delicious s64"><b id="d1"></b><b id="d2"></b><b id="d3"></b><b id="d4"></b></b>
</body>
</html>
CSS
.delicious {
border: 1px solid #ccc;
float:left;
margin-right: 24px;
}
.delicious b{float: left}
#d1{background: #fff;}
#d2{background: #06c;}
#d3{background: #444;}
#d4{background: #ddd;}
.s64{width:64px}
.s64 b{
height: 32px;
width: 32px;
}
OUTPUT
16 x 16
<b class="delicious s16"><b id="d1"></b><b id="d2"></b><b id="d3"></b><b id="d4"></b></b>
<style type="text/css">
.s64{width:16px}
.s64 b{ height: 8px; width: 8px; }
</style>
32 x 32
<b class="delicious s32"><b id="d1"></b><b id="d2"></b><b id="d3"></b><b id="d4"></b></b>
<style type="text/css">
.s64{width:32px}
.s64 b{ height: 16px; width: 16px; }
</style>
Leave a Reply