FaceBook logo pomocí html a CSS3 Shapes
Novinky v CSS3 nám přináší hodně možností. Jednou z nich jsou takzvané “Shapes”. Vše funguje tak, že vykreslíte jakoby několikrát. Přičemž změnou polohy a vlastností lze docílit neuvěřitelných kousků. Jedním z takových triků je například logo Facebooku. V podstatě se jedná o písmeno F v modrém čtverečku.
Novinky v CSS3 nám přináší hodně možností. Jednou z nich jsou takzvané “Shapes”. Vše funguje tak, že vykreslíte jakoby několikrát. Přičemž změnou polohy a vlastností lze docílit neuvěřitelných kousků. Jedním z takových triků je například logo Facebooku. V podstatě se jedná o písmeno F v modrém čtverečku. Ano, jedna možnost taková je. V tomto článku však ukážu, jak takové logo facebooku lze vytvořit mnohem jednodušeji.
První si vytvoříme HTML tag. Ja použiji DIV.
HTML
<a href="#" target="_blank" title="titl"><div id="facebookikona"></div></a>
Tento DIV bude sloužit pro vykreslení všech částí, tedy v HTML kódu budete mít opravdu pouze tento řádek. Nyní přijde na řadu samotné vykreslování. Nejdříve trochu teorie.
Co potřebujeme vytvořit:
- Modrý čtvereček
- Svislou část písmene F, tu uděláme pomocí rohu (s radiusem) čtverce, s rozdílnou barvou pro pozadí a okraj (okraj bude to písmeno)
- Vodorovnou čáru v písmenu F
CSS3
#facebookikona {
background: blue;
text-indent: -999em;
width: 25px;
height:30px;
border-radius: 3px;
position: relative;
overflow: hidden;
border: 5px solid blue;
border-bottom: 0;
}
#facebookikona::before {
content: "/20";
position: absolute;
background: blue;
width: 20px;
height: 40px;
left:10px;
top:0px;
border: 9px solid white;
border-radius: 10px;
}
#facebookikona::after {
content: "/20";
position: absolute;
width: 15px;
top: 15px;
height: 9px;
background:white;
right: 2px;
}
Já jsem osobně přidal opacity:0.5; a po :hover opět na 1. Ikona pak není tak výrazná, dokud na ní uživatel nenajede myší.
Zde máme jak to vlastně funguje, máme základní čtverec, modry s červeným okrajem. Dále zeleno hnědý a jako poslední růžový. Po vykreslení prvního základního, do něj vykreslíme druhý s malým posunem dolu a posunem doprava tak, aby byla vidět část okraje jako na obrázku. Jako poslední pak klasický čtvereček na místo vodorovné části Fka. Tloušťka červeného okraje nám udává, jak bude písmeno odsazeno od okraje, tloušťka zeleného okraje nám určuje tloušťku samotného písmene. A poslední růžové čárce by jsme měli dát výšku takovou, jako je široký zelený okraj.
Rozdílné barvy pro pozadí a okraje