lek med CSS3 & ikoner

Tro jag hade dåligt tråkigt ikväll eller, skulle spela men så blev det inget, var inge sugen på att jobba med något riktigt så surfade runt lite. Började läsa om former och så i Css, fick se lite grejer folk hade gjort och kände mig inspirerad. Jag har haft mycket Facebook på huvudet idag pga jobbet och fick därför idén att leka med Facebook-ikonen. I övrig notis så bakade jag även scones som resultat av det rubbade kvällsschemat.

En sak som är lite trevlig med css är att det blir webbläsaren som ritar upp det, vilket också gör att det skalerar väldigt bra. dvs du kan zooma och joxxa utan elaka pixelmonster. Här valde jag för demonstrationssyftet att rendera några versioner med hjälp av “zoom:” elementet i css. Eftersom många webbläsare är lite svältfödda på vissa attribut så tog jag även en bild.

fbIcons Css3

Allt är som sagt gjort med hjälp av Css3, användningsområdet är än så länge obestämt. Men om man har några timmar över och vill rita med kod så kör.

Html
[sourcecode language=”html”]
<div class="fbIcon zoom1">
<div class="outerbox">outer</div>
<div class="bottombox">bottom</div>
<div class="boxring">box</div>

<div class="white f1">f1</div>
<div class="white f2">f2</div>
<div class="white f2_2">f2_2</div>

<div class="white f3">f3</div>
</div>
[/sourcecode]

unt der css,
[sourcecode language=”css”]
.fbIcon {
margin: auto;
position: relative;
display: block;
height: 700px;
width: 700px;
text-indent: -9999px;
margin: 5px;
float: left;
}

.fbIcon div {
position: absolute;
display: block;
}

.fbIcon .outerbox {
height: 700px;
width: 700px;
border-radius: 60px;
background: #4370a9;
background: -moz-linear-gradient(-90deg, #164c8b, #4370a9);
background: -o-linear-gradient(#164c8b, #4370a9);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#164c8b), to(#4370a9));
}

.fbIcon .bottombox {
width: 645px;
height: 160px;
border-radius: 40px;
bottom: 25px;
left: 30px;
background: #6d84b5;
background: -moz-linear-gradient(-90deg, #6d84b5, #83a3d3);
background: -o-linear-gradient( #6d84b5, #83a3d3);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#6d84b5), to(#83a3d3));
}

.fbIcon .boxring {
height: 670px;
width: 670px;
border-radius: 60px;
background: transparent;
top: 5px;
left: 5px;
border: 10px solid #164C8B;
}

.white { background: #fff; }

.fbIcon .f1 {
width: 125px;
bottom: 25px;
height: 530px;
right: 180px;
}

.fbIcon .f2 {
width: 280px;
bottom: 360px;
height: 100px;
right: 80px;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
transform: skew(-5deg);
}
.fbIcon .f2_2 {
height: 100px;
right: 350px;
width: 20px;
bottom: 360px;
}
.fbIcon .f3 {
width: 240px;
height: 100px;
bottom: 555px;
right: 65px;
border-top-left-radius: 100px 100px;
}
[/sourcecode]