Sari la conținut

[Tutorial] Desenarea unui logo in CSS

KRANOS

De KRANOS
în IT & internet

 Share

Postări Recomandate

KRANOS Mentor

KRANOS

Postat
Postat (editat)

 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:


 

Spoiler

 

<!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:

Spoiler


<div class="continut-IE"> <div id="continut"> ... </div> </div>

 

 

   Iar in fisierul .css urmatoarele:

Spoiler

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 */ }

 

Editat de AliNNN
Link spre comentariu
Distribuie pe alte site-uri
Vizitator
Acest topic este acum închis pentru alte răspunsuri.
 Share
Mergi la listare topic-uri
×
×
  • Creează nouă...

Informații Importante

Am plasat cookie-uri pe dispozitivul tău pentru a îmbunătății navigarea pe acest site. Poți modifica setările cookie, altfel considerăm că ești de acord să continui. Also by continuing using this website you agree with the Terms of Use and Privacy Policy.