Desenarea unui logo în CSS
Desenarea formelor de bază în canvas
July 23, 2012 |
Tutorial publicat și pe E-learn.ro |
Pana acum desenarea unui logo se facea folosind un program de grafica precum Adobe Photoshop sau Corel Draw, sau cu intermediul Javascript-ului prin metode ceva mai recente. Dar in acest tutorial vom invata ca aceste variante nu sunt singurele, si ca design-ul unui logo se poate face folosind exclusiv CSS.
Am folosit ca exemplu, logo-ul devenit deja celebru al retelei de socializare Facebook. Imaginea de referinta precum si fisierele sursa pentru rezultatul final le puteti descarca folosind linkul de Download de la inceputul tutorialului.
Pentru inceput, vom crea un fisier .html si unul .css in care ne vom "scrie" logo-ul. Pornim de la o structura de baza pentru fisierul .html, cu referinta catre fisierul facebook.css, ca mai jos:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook CSS Logo</title>
<link rel="stylesheet" type="text/css" href="facebook.css" />
</head>
<body>
<!-- aici vom insera codul pentru logo -->
</body>
</html>
In continuare, vom crea forma de baza a logo-ului, un patrat cu colturi rotunjite. Si deja din acest punct incep sa devina lucrurile interesante.
In arhiva de resurse am adaugat si fisierul .psd in care am evidentiat dimensiunile tuturor elementelor, pentru o mai buna intelegere a valorilor de dimensiuni, ce vor urma a fi folosite.
In fisierul .html, adaugam urmatoarele randuri:
<div class="continut-IE">
<div id="continut">
...
</div>
</div>
Iar in fisierul .css urmatoarele:
body{
margin:0px;
padding:0px;
text-align:center;
}
.continut-IE{
overflow: hidden;
width:500px;
height:500px;
margin:0 auto;
border-radius:70px;
}
#continut{
width:500px;
height:500px;
position:relative;
margin:0 auto;
border-radius:70px;
background:#32528f;
background:
-webkit-gradient( /* pentru browser webkit */
linear,
left bottom,
left top,
color-stop(0, rgb(50,80,142)),
color-stop(1, rgb(54,84,147)));
background:
-moz-linear-gradient( /* pentru mozilla */
bottom,
rgb(50,80,142) 0%,
rgb(54,84,147) 100%);
background:
-o-linear-gradient( /* pentru opera */
bottom,
rgb(50,80,142) 0%,
rgb(54,84,147) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#365493', endColorstr='#32508e', GradientType="0"); /* pentru IE */
}
Acum sa vedem ce inseamna toate. In body am centrat toate elementele si am resetat padding-ul si margin-ul la valoarea 0. Doar pentru a usura prezentarea.
Clasele .continut-IE si #continut, folosite pentru cele doua div-uri trecute in fisierul .html ne asigura crearea patratului, avand colturi rotunjite, si un gradient usor pe fundal. Proprietatile width si height sunt evidente - dau dimensiunea logo-ului, position si margin ne pozitioneaza div-ul, border-radius ne creaza colturile rotunjite. background ne va crea gradientul fin de care mentionam la inceput. Motivul pentru care acesta este in mai multe variante, este ca pentru fiecare browser proprietatea trebuie scrisa in mod diferit. O singura mentiune este de facut - proprietatea filter, are printre parametrii GradientType ce suporta doua valori: 0 si 1. 0 inseamna de sus in jos, 1 inseamna de la stanga la dreapta.
Problema apare cu Internet Explorer, care nu mai recunoaste colturile rotunjite, daca a fost folosita si proprietatea filter. Din acest motiv am creat clasa .continut-IE, care se comporta ca o masca.
In acest moment ar trebui sa avem ceva similar cu imaginea de mai jos, indiferent de browser.
Mai departe vom crea reflexia din partea de sus. Pentru aceasta este nevoie de doua forme, una pentru reflexia propriu zisa, cea de-a doua pentru bordura acesteia. Fiind implicati gradienti si colturi rotunjite din nou, vom folosi aceeasi metoda ca mai sus. Cream o clasa pentru IE si una pentru continut.
.a-IE{
width:500px;
height:250px;
border-radius:85px 85px 300px 300px / 85px 85px 70px 70px;
overflow:hidden;
}
#a{
width:500px;
height:250px;
border-radius:100px 100px 300px 300px / 100px 100px 70px 70px;
top:0px;
left:0px;
background:#6a81b3;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(80,105,162)),
color-stop(1, rgb(185,197,221)));
background:
-moz-linear-gradient(
bottom,
rgb(80,105,162) 0%,
rgb(185,197,221) 100%);
background:
-o-linear-gradient(
bottom,
rgb(80,105,162) 0%,
rgb(185,197,221) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9c5dd', endColorstr='#5069a2', GradientType="0");
}
#a:after{
content:"";
position:absolute;
width:488px;
height:250px;
top:5px;
left:6px;
border-radius:100px 100px 300px 300px / 100px 100px 70px 70px;
background:#6a81b3;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(60,90,150)),
color-stop(1, rgb(138,156,194)));
background-image:
-moz-linear-gradient(
bottom,
rgb(60,90,150) 0%,
rgb(138,156,194) 100%);
background-image:
-o-linear-gradient(
bottom,
rgb(60,90,150) 0%,
rgb(138,156,194) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9c5dd', endColorstr='#5069a2', GradientType="0");
}
In afara de proprietatile care deja se repeta, si sunt explicate mai sus, intalnim si pseudo-selectorul :after. Nu voi intra in detalii in acest tutorial despre :after (si :before), insa mentionez doar ca permite adaugarea unor elemente fara codare suplimentare in HTML.
Asadar, adaugam dimensiunile, setam border-radius, pozitionam elementele si le umplem cu gradientii potriviti. De observat ca border-radius a primit doua seturi de valori. In acest caz, valorile furnizate sunt folosite pentru a defini, in ordine, razele orizontala si verticala ale unui sfert de elipsa, care la randul sau determina curbura aleasa.
In acest moment, totul ar trebui sa arate ca in imaginea de mai jos.
Mai departe vom crea forma din partea de jos a logo-ului. Va fi ceva mai simplu, deoarece implica doar un dreptunghi, cu colturile din partea de jos rotunjite, umplut cu o singura culoare, fara nici un gradient.
Pentru asta nu trebuie decat sa cream un alt div, si sa ii atribuim urmatoarea clasa:
#b{
background:#6981af;
border-radius:0px 0px 85px 85px;
width:500px;
height:96px;
bottom:0px;
left:0px;
}
Acum sa ne ocupam de litera f. Pentru ca nu avem la dispozitie fontul cu care a fost realizata, vom crea litera folosind forme. Urmatoarele trei clase vor defini trei forme ce vor compune la sfarsit litera f.
#c{
border-left: 0 solid transparent;
border-right: 8px solid transparent;
border-top: 71px solid #ffffff;
height: 0;
width: 194px;
top:233px;
left:200px;
}
#d{
border:80px solid #ffffff;
border-radius: 100px 0 0 0;
border-style: solid none none solid;
border-width: 72px 0 57px 86px;
bottom:250px;
left:248px;
height: 80px;
width: 65px;
}
#e{
background:#ffffff;
bottom:0px;
left: 248px;
width:86px;
height:276px;
}
Sunt lucruri simple, intrucat nu folosim decat latimi, inaltimi, si border-uri, prin combinatia carora reusim sa cream formele dorite.
Fisierul .html final ar trebui sa arate asa:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook CSS Logo</title>
<link rel="stylesheet" type="text/css" href="facebook.css" />
</head>
<body>
<div class="continut-IE">
<div id="continut">
<div class="a-IE">
<div id="a"></div>
</div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</div>
</div>
</body>
</html>
Si logo-ul nostru e gata:
