E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Desenarea unui logo in CSS

26.08.2012
Desenarea unui logo in CSS

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.

Total vizualizari: 20604 20604 afisari   |   Comentarii  0   |   Rating   |   (3 voturi)   |   Timp necesar: 35 min 35 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Autor: Pustiu Expert
Download
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1 23 »
comenteaza printeaza

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 */
    
}
Pagina:
1 23 »
comenteaza printeaza

Cuvinte cheie:   tutorial limba romana,   css,   logo,   desenare,   border-radius,   gradient,   proprietati,  

Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(3 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
8210
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
7965
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
7815
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
7770
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
7500
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Excel SEO AJAX RoR Fotografie PHP PSD Outlook Fireworks HTML Bridge SWF XML COREL DRAW Vista Flash Illustrator Javascript Python MySQL JSON Sony Vegas Action Script Lightroom Gimp Dreamweaver Java CSS Ruby on Rails Word Photoshop Powerpoint StyleSheet Verilog Swift 3D XHTML
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software