Foi de Stil Web
Indrumari si Trucuri CSS

Colturi rotunjite si cutii cu umbre

CSS3 va avea proprietati pentru a face granite rotunjite, granite consistand din imagini si cutii cu umbre, dar cu putin efort le puteti deja simula pe cateva din ele cu CSS2 — si fara nici un tabel sau marcaj extra.

Aceasta pagina a fost inspirata de cea creata de Arve Bersvendsen. El are mult mai multe demo-uri CSS interesante.

Desigur, granitele si umbrele rotunjite vor fi mult mai simple cu CSS3. De exemplu, pentru a da unui paragraf o margine rosie groasa cu colturi rotunjite, ati avea nevoie doar de doua linii de CSS3 similar cu aceasta:

P { border: solid thick red;
    border-radius: 1em }

Si pentru a adauga o umbra cazuta estompata la o jumatate de em mai jos si spre dreapta paragrafului, doar o linie ar fi destul:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Puteti incerca aici daca functioneaza deja.) Dar daca aveti nevoie de ele acum si nu va supara complexitatea si lipsa de flexibilitate, puteti utiliza tehnica de mai jos. Cel putin va fi un test frumos pentru browsere cu bug-uri…

Cinci imagini pe un element

Trucul principal este sa se utilizeze continut generat ('::before' si '::after') pentru a pune patru imagini extra pe un element. Pseudo-elementul '::before' poate avea o imagine de fundal si una de prim-plan, pseudo-elementul '::after' deasemenea, si elementul insusi poate avea un fundal, pentru un total de cinci imagini.

Creem cinci imagini PNG si le punem in cele patru colturi si pe marginea din dreapta a elementului. Iata imaginile:

coltul stanga sus:

marginea de sus si coltul din dreapta sus:

partea din mijloc si muchia din dreapta:

coltul din stanga jos:

marginea de jos si coltul din dreapta jos:

Si iata regulile CSS pentru pozitionarea lor:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Deoarece imaginea noastra de fundal este lata de 620 pixeli, nu putem permite cutii mai largi de 620 de pixeli fara a avea goluri. Asta e de ce proprietatea 'max-width' este acolo. Proprietatea 'display: block' este necesara pentru a fi siguri ca si continutul generat formeaza cutii de unele singure deasupra si dedesubtul continutului principal, in loc de a fi inserate pe prima si ultima linie. 'line-height: 0' se asigura ca nu exista spatiu lasat deschis pentru ascenders and descenders deasupra si dedesubtul imaginilor in proprietatea 'content'.

Rezultatul

Si iata cum arata:

Sursa HTML este cu adevarat nu mai mult decat ar trebui sa fie:

<blockquote>
<p>Vedeti o cutie verde pal cu colturi rotunjite si o umbra cazuta pe un 
fundal alb? Daca nu, browserul dumneavoastra nu gestioneaza
 corect continut generat (sau poate chiar deloc).
</blockquote>

Si daca doriti sa testati daca browserul dumneavoastra poate face asta in mod CSS3, puteti incerca asta aici.