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: 11666 11666 afisari   |   Comentarii  0   |   Rating   |   (2 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 2 3 »
comenteaza printeaza

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.

Pagina:
« 1 2 3 »
comenteaza printeaza

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

Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(2 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
4800
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4735
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4610
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4545
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4405
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Powerpoint Lightroom Ruby on Rails XML COREL DRAW Java Vista AJAX Action Script JSON Javascript Dreamweaver Verilog Gimp SEO PHP Swift 3D Excel PSD Fireworks Photoshop SWF Python Bridge Flash Fotografie MySQL CSS Illustrator Outlook XHTML RoR HTML Sony Vegas Word StyleSheet
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