[Tutorial CSS] Desenarea unui logo

Locked
♠ℱreshXL♠™
Membru
Membru
Posts: 286
Joined: 8 years ago
Location: Bacau
Has thanked: 0
Been thanked: 0
Zodiac:
Age: 22
Contact:
Status: Offline

7 years ago

Nume Tutorial: Desenarea unui logo
Descriere: 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.
Download: [Please login or register to view this link]
Autor: Pustiu
Sursa (Link-ul oficial): [Please login or register to view this link]
Propria parere: Scurt si la obiect
Tutorialul:
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:

Code: Select all

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

Code: Select all

<div class="continut-IE">
    <div id="continut">
        ...
    </div>
</div>
Iar in fisierul .css urmatoarele:

Code: Select all

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.

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.[/size]

Code: Select all

.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");
}
  • Image
  • Image


Image
Locked

Return to “CSS”