10 CSS Tricks pe care orice Web Designer ar trebui sa le cunoasca

 

CSS Tricks

Acesta este un ghid pentru incepatori. Deindata ce vei intelege cum functioneaza float-ul si box model-ul, pozitionarea, etc., vei fi gata sa jonglezi si sa te folosesti de informatiile utile prezentate in acest articol, conceput pentru dezvoltarea ta ca web designer.

Am creat o lista de tehnici, CSS tricks, care te va ajuta sa-ti creezi design-ul dorit pentru site-ul tau, si te va face sa intelegi mai bine puterea CSS-ului.

Trucuri pe care orice Web Designer ar trebui sa le cunoasca

1. Pozitionarea absoluta

Daca vrei sa controlezi pozitia unui element in pagina, pozitionarea absoluta (position: absolute) este cheia! Daca iti imaginezi ca browserul este o cutie, pozitionarea absoluta iti permite sa controlezi unde elementul va fi pozitionat in acea “cutie”.

– foloseste top, right, bottom si left (pixeli sau %), pentru a controla pozitia elementului

Ex:

{

position: absolute;
bottom: 80px;
left: 10px;

}

Cod-ul de mai sus seteaza pozitia unui element la 80px de bottom, si la 10px de stanga.

2. Centrarea

Centrarea poate fi putin tricky, deoarece depinde ce doresti sa centrezi (o imagine, un text etc).
Exemplu:

Continut: Un div, sau orice alt element, poate fi centrat adaugandu-i proprietatea “block”, dupa care folosirea auto-margini.
CSS:

#div1 {
display: block;
margin: auto;
width: orice sub 100%;
}

Text:
Textul este centrat folosind comanda “text-align: center;”. Daca doresti ca textul sa fie pozitionat in alta parte, folosesti right sau left, in loc de center.

3. Suprascrierea (!important)

Ar trebui evitata folosirea deasa a suprascrierii, deoarece daca aplici pe mai multe elemente aceasta regula, vor aparea multe probleme care-ti vor da multe batai de cap.
Dar daca doresti sa suprascrii un style de CSS pe un element specific, foloseste “!important” dupa regula, in CSS stylesheet-ul tau.
De exemplu: Daca as vrea ca toate paragrafele dintr-o anumita sectiune din site sa fie verzi, in loc de rosii, as folosi urmatorul CSS:

.section p { color: green !important; }

4. * + Selector

Acest * selecteaza toate elementele unei pagini, sau unui selector.
De exemplu, daca folosesti *h2 { color: blue; } in stylesheet.css, vei observa ca toate elementele cu tag-ul h2 din pagina, sunt albastre. Aceasta iti usureaza munca si iti permite sa targetezi parti din site la nivel global.

5. Efecte pe Hover

Hoverul este folosit ca efect pe butoane, texte de linkuri, diferite sectiuni ale site-ului, icoane etc. Daca doresti ca un efect sa apara pe un element, in momentul in care vizitatorul duce cursorul pe acel element (hover), foloseste acelasi CSS (selector), dar adauga si “:hover”, ca in exemplul de mai jos:

.baboon h3 {
color: #fff
font-size: 48px;
}
.baboon h3: hover {
color: #e3e3e3;
background-color: #ff0000;
}

CSS style de mai sus, in momentul in care vizitatorul duce cursorul pe elementul cu tag-ul h3, background-ul si culoarea acestuia se vor schimba.
Pentru efectele de hover folosite pe meniu sau imagini, recomand sa adaugi o tranzitie (transition – vezi css style mai jos), pentru ca efectul sa se produca in 0.9 secunde, si nu instant, deoarece da un efect mai placut ochiului si este mai putin deranjant.

Ex:

.baboon h3:hover {
color: #e3e3e3;
transition: all 0.9s ease;
}

6. Redimensionare imagini pentru buna incadrare

Cateodata te afli in situatia in care imaginile trebuie sa se incadreze intr-un anumit width, care sa fie proportionale. Cel mai simplu mod de a face asta este:

div img {
max-width: 100%;
height: auto;
}

Style-ul de mai sus inseamna: dimensiunea celei mai mari imagini sa fie de 100%, iar height-ul sa fie calculat automat, bazat pe width-ul imaginii.

7. Aplica CSS pe mai multe clase sau selectori

Sa spunem ca vrei adaugi padding si border in jurul tuturor imaginilor din footer si sidebar. Pentru asta nu e nevoie sa scrii de 3 ori acelasi CSS. Doar enumera elementele, separate de virgula, ca in exemplul de mai jos:

.footer, img, .sidebar  {
border: 1.5px solid black;
padding: 10px;
}

Stiind cele de mai sus, iti va simplifica munca si nu vei fi nevoit sa umpli stylesheet-ul cu mult cod scris degeaba.

8. Box-sizing: border-box;

Este cel mai des intalnit si folosit de web designeri, deoarece rezolva problema padding-ului si problemele legate de layout. Cand setezi box-ului un width specific, si-i adaugi si un padding, padding-ul se aplica in functie de dimensiunea box-ului. Folosind box-sizing: border-box;, box-ul ramane la dimensiunea la care ar trebui sa fie.
https://jsfiddle.net/AdrianOber/pfsdz7to/2/

9. :Before si :After

Este un selector ce iti permite sa alegi un CSS element si sa adaugi continut inainte (:before) sau dupa (:after) acesta. Exemplu: Sa zicem ca ai un site unde vrei sa ai un text specific inainte/dupa fiecare tag “h2” si “h3”. Gasesti mai jos structura, pentru a intelege cat mai usor aceste doua CSS-uri:

h2: before {
content: “Baboon: “;
}
h3: after {
content: “Web Design: “;
}

10. CSS Reset

Unele browsere au setari default diferite ale CSS-ului, dar este necesar sa aplici un reset pe acestea. Aceasta metoda seteaza o baza standard pentru toate site-urile, dand o consistenta la punctul de plecare al CSS-ului (pornesc de la aceleasi reguli CSS). Aceasta metoda sterge toate bordurile, marginile, paddingurile etc. nedorite.
Accesand urmatorul link, veti gasi o structura a metodei CSS Reset: http://meyerweb.com/eric/tools/css/reset/

Sper ca acest articol sa fie de ajutor, sau macar sa starneasca interes pentru studiu CSS-ului, intelegerea buna a functionalitatii si puterii acestuia, si dezvoltarea ta ca web designer.