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: 12774 12774 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:
« 12 3
comenteaza printeaza

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:

Pagina:
« 12 3
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 claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5330
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5285
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5125
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
5115
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4860
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Flash Dreamweaver Ruby on Rails MySQL JSON Swift 3D COREL DRAW Verilog AJAX Vista Action Script Powerpoint Lightroom HTML SEO CSS StyleSheet Fireworks Photoshop XHTML XML PHP Fotografie PSD Javascript Gimp Outlook Java Sony Vegas Bridge Excel Illustrator RoR Python SWF Word
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