Scurt tutorial CSS: elementul body

Astazi m-am uitat din nou in header-ul acestui blog si am vazut pe undeva ca scrie cate ceva despre web design :), asa ca m-am pus putintel pe treaba ca sa va pot prezenta un nou tutorial legat de folosirea css-ului in compozitia unei pagini web. Unul din elementele esentiale si cu care practic ar trebui sa se inceapa constructia propriu zisa a fisierului .css este “body“. Body este elementul care practic defineste “starea” generala a paginii si a site-ului ce se doreste a fi construit. Sa luam exemplu de mai jos:

<style>
BODY {
background-color: red;
background-image: url(imagini/imagine.jpg);
background-attachment:fixed;
background-repeat: repeat-y;
}
</style>

Prin background-color: blue; se seteaza culoarea fundalului, in acest caz, culoarea rosie (red). In loc de “red”, puteam scrie numele oricarei alte culori, insa e preferabil codul hexazecimal al acesteia (#FF0000 pentru rosu) sau transparent, care de fapt este valoarea implicita.


Prin background-image; url(imagini/imagine.jpg); se impune ca fundal imaginea imagine.jpg din directorul imagini.

Scriind background-attachment: fixed; se va otine un fundal static.

Sa presupunem ca avem un fundal rosu de 50×50 pixeli, avand in centru un cerc alb. Implicit, fundalul se va repeta de un numar de ori pe verticala si de alt numar de ori pe orizontala. Daca dorim ca acest jundal sa se repete doar pe o directie, vom folosi background-repeat: repeat-y; sau background-repeat: repeat-x; pentru a repeta imaginea pe verticala, respectiv orizontala.

Daca insa dorim ca fundalul sa nu se repete, atunci vom scrie: background-repeat: no-repeat;.

In concluzie, proprietatea background-repeat poate lua 4 valori:

  • repeat ( care e implicita )
  • repeat-x
  • repeat-y
  • no-repeat.

Pozitia imaginii de fundal va fi stabilita atribuind valori proprietatii background-position. Aceste valori pot fi:

  1. Un ansamblu de doua procente:
    Exemplu: background-position: 15% 50%;. In acest caz, coltul din stanga-sus al imaginii se va afla, fata de coltul din stanga-sus al paginii, la 15% pe orizontala si 50% pe verticala.
    Setarea implicita este: background-position: 0%0%;. Daca scriem background-position: 100%100%;, coltul din dreapta-jos al imaginii se va afla in coltul din dreapta-jos al paginii.
  2. Un singur procent:
    Se subintelege ca acesta se refera la directia orizontala. Implicit, pentru verticala avem 50%.
  3. Un ansamblu de doua distante:
    Exemplu: background-position: 10px 15px;. Coltul din stanga-sus al imaginii e la 10 pixeli pe orizontala si la 15 pixeli pe verticala de coltul din stana-sus al ecranului. Aceste distante pot lua si valori negative (-5px sau -10px, etc. )
  4. O combinatie procent + distanta:
    Exemplu: background-position: 10cm 15%;
  5. Un cuvant-cheie sau o combinatie de doua cuvinte-cheie:
    Cuvintele-cheie sunt top, center, bottom pentru directia orizontala si left, center, right pentru verticala. Cuvintele-cheie nu pot fi combinate cu un procent sau o distanta.

Exemplul 2:

<style>
BODY {
background-image: url(imagini/imagine.gif);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: 20%;
}
</style>

Codul de mai sus va avea ca rezultat o pagina web av�nd imagine.gif din directorul imagini drept fundal. Fundalul este fix si nu se repeta. Imaginea imagine.gif se va afla la 20% pe orizontala si la 50% pe verticala de coltul din stanga-sus al paginii.

Exemplul 3:

<style>
BODY {
background-image: url(fundal.gif);
background-repeat: no-repeat;
}
</style>

Aceste doua linii de cod CSS rezolva o problema pe care HTML-ul nu era capabil sa o rezolve satisfacator: problema repetarii fundalului. Ca sa nu se repete la rezolutia de 800 x 600 de exemplu, ar fi fost necesar ca fundalul sa fie o imagine de 800 x 600; totusi, la rezolutii mai mari, fundalul s-ar fi repetat. Designerul paginii ar fi putut realiza un fundal avand dimensiunile egale cu cea mai mare rezolutie folosita pe monitoarele actuale, dar acesta ar fi avut dimensiuni de zeci de KB si deci n-ar fi fost practic. Paginile web de acest gen nu mai sunt la moda, insa o practica des intalnita acum este acea de a folosi sintagma background-repeat: repeat-x; in combinatie cu o imagine avand doar 1 pixel latime si o marime mult mai mare pe inaltime. De exemplu, o imagine in degrade de la rosu spre alb (de sus in jos) de doar 1×500 pixeli nu este foarte mare in KB, iar daca o punem sa se repete doar pe axa x a site-ului, vom obtine un efect reusit cu minim de efort si cu un consum foarte redus de banda. Astfel de imagini in degrade se mai numesc si gradieti, sau “gradients” in engleza (sper ca e ok traducerea).

Daca sunteti in lipsiti de inspiratie, iata mai jos o mica lista cu gradienti, pusa la dispozitie de www.dezinerfolio.com:


(click aici pentru download)
Fisierul se poate importa in Photoshop, insa daca folositi alte programe, se pot folosi cu usurinta culorile sau combinatiile de culori folosindu-va de un Color Picker.

O alta practica obisnuita pentru imaginile de background ale site-urilor, este folosirea imaginilor dingate (cam asa cum se vede in partea de sus a acestui site. Aceste imagini sunt putini mai mari, insa ideea de baza este aceeasi: folosirea unei imagini care se repeta pe axa x in general. Acest blog foloseste de exemplu urmatorul cod pentru background:

background:#1e1e1e url(images/headerstripe_loop.jpg) repeat-x 0 0;

Deja stiti ce inseamna fiecare, nu? Si o ultima recomandare: daca nu vreti sa va chinuiti sa faceti imaginea “dungata”, gasiti pe internet o serie de astfel de generatoare gratuite cu ajutorul carora puteti genera o imagine dungata in cateva minutele. Poate cel mai bun exemplu in acest sens il gasiti la www.stripegenerator.com.Si cu asta…basta. Spor la treaba :)

One thought on “Scurt tutorial CSS: elementul body

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>