We're growing into something new. Read More
amatyr4n

Amatyr4n


<style type="text/css">
/* global settings */
body {
    background: #eee;
}
div {
    margin: 10px;
}
/* icons settings */
.s256,
.s128,
.s64,
.s32,
.s16 {
    color: transparent;
    display: block;
    position: relative;
    box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.4),
        inset 0px 0px 1px rgba(255, 255, 255, 0.4);
    -moz-box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.4),
        inset 0px 0px 1px rgba(255, 255, 255, 0.4);
    -webkit-box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.4),
        inset 0px 0px 1px rgba(255, 255, 255, 0.4);
}
.s256 {
    width: 256px;
    height: 256px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}
.s128 {
    width: 128px;
    height: 128px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}
.s64 {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.s32 {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.s16 {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
/* Flickr */
.sflickr {
    background: #fff;
    border: 1px solid #fefefe;
    background: -moz-linear-gradient(
        top,
        #fefefe 0%,
        #d6dde1);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#fefefe),
        to(#d6dde1));
}
.sflickr::before,
.sflickr::after {
    content: "";
    position: absolute;
    background: #5c82c1;
}
.sflickr::after {
    background: #f92f93;
}
.s256.sflickr::before,
.s256.sflickr:after {
    width: 96px;
    height: 96px;
    top: 80px;
    left: 22px;
    border-radius: 48px;
    -moz-border-radius: 48px;
    -webkit-border-radius: 48px;
    box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.4);
}
.s256.sflickr::after {
    left: 138px;
}
.s128.sflickr::before,
.s128.sflickr::after {
    width: 48px;
    height: 48px;
    top: 40px;
    left: 12px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4);
}
.s128.sflickr::after {
    left: 70px;
}
.s64.sflickr::before,
.s64.sflickr::after {
    width: 24px;
    height: 24px;
    top: 20px;
    left: 6px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.s64.sflickr::after {
    left: 34px;
}
.s32.sflickr::before,
.s32.sflickr::after {
    width: 12px;
    height: 12px;
    top: 10px;
    left: 3px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.s32.sflickr::after {
    left: 17px;
}
.s16.sflickr::before,
.s16.sflickr::after {
    width: 6px;
    height: 6px;
    top: 5px;
    left: 2px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.s16.sflickr::after {
    left: 9px;
}
</style>
<div class="s256 sflickr"></div>
<div class="s128 sflickr"></div>
<div class="s64 sflickr"></div>
<div class="s32 sflickr"></div>
<div class="s16 sflickr"></div>

Multiple-size fancy Flickr icons created with CSS3

Hi Forrst, my first post here :) also my first experiment with CSS3, creating a fancy icons in multiple sizes (256x256, 128x128, 64x64, 32x32, 16x16) using CSS3 pseudo-elements, border-radius, box-shadow, background gradient, etc. No images are used here :) Demo: jsfiddle.net/MpcRa/8/