Bună seara,

În primul rând tutorialele pe care le voi face pe acest mini-blog se adresează celor familiarizaţi deja cu (măcar) următoarele limbaje : (x)HTML, CSS, Javascript, jQuery, PHP. Din moment ce bănuiesc că majoritatea dintre cei interesaţi de aceste tutoriale sunt începători, nivelul de dificultate va fi mic spre mediu, aşa că dacă nu stăpâniţi în totalitate limbajele de mai sus, nu ar trebui să vă speriaţi. Dacă totuşi doriţi să aprofundaţi limbajele mai sus menţionate vă recomand site-urile următoare :

– Pentru (x)HTML, CSS si JavaScript : W3Schools Online Web Tutorials

– Pentru jQuery : jQuery: The Write Less, Do More, JavaScript Library

– Pentru PHP : PHP: Hypertext Preprocessor

Bănuiesc că majoritatea dintre voi aţi aflat deja de HTML5 şi de CSS3. Ar trebui să începem printr-o descriere a acestora, dar nu cred că este necesar în momentul de faţă, având în vedere că nu vreau sa irosesc timpul nimănui (nici pe al meu şi nici pe al dumneavoastră) aşa că voi încerca să relatez totul cât mai pe scurt.

Mini-Capitolul 1.  De ce să folosesc CSS3 în locul metodei deja tradiţionale a imaginilor?

Există câteva argumente pentru care codul scris în CSS3 este mai avantajos decât cel al imaginilor :

1. Încărcare mai rapidă a paginilor, având în vedere că nu se preiau imagini.
2. Culorile se pot schimba mult mai rapid, în cazul în care este necesar.
3. Flexibilitate, în sensul că block-ul dumneavoastră poate fi mărit sau micşorat atât pe lăţime cât şi pe înălţime fără a vă deteriora colţurile.

Mini-Capitolul 2. Există dezavantaje?

Da. Există un dezavantaj destul de mare, în sensul că browserele mai vechi nesuportând CSS3 nu vor recunoaşte codurile necesare, şi deci colţurile vor rămâne drepte. Browserele care suportă în momentul de faţă sunt :

1. Mozilla Firefox (3+)
2. Safari (3+)
3. Google Chrome
4. Opera (10.5+)

Mini-Capitolul 3. Codul propriu-zis

În momentul de faţă, atributele CSS pentru colţuri rotunjite nu sunt încă finalizate astfel încât, anumite browsere (Mozilla, Google Chrome sau Safari) folosesc anumite convenţii. Astfel, pentru Mozilla avem :

-moz-border-radius // (toate colţurile)
-moz-border-radius-topright // (colţul din dreapta sus)
-moz-border-radius-bottomright // (colţul din dreapta jos)
-moz-border-radius-topleft // (colţul din stânga sus)
-moz-border-radius-bottomleft // (colţul stânga jos)

Pentru Google Chrome sau Safari avem :

-webkit-border-radius // (toate colţurile)
-webkit-border-top-right-radius // (colţul din dreapta sus)
-webkit-border-bottom-right-radius // (colţul din dreapta jos)
-webkit-border-top-left-radius // (colţul din stânga sus)
-webkit-border-botom-left-radius // (colţul stânga jos)

 

Standardul CSS :

border-radius // (toate colţurile)
border-radius-topright // (colţul din dreapta sus)
border-radius-bottomright // (colţul din dreapta jos)
border-radius-topleft // (colţul din stânga sus)
border-radius-bottomleft // (colţul stânga jos)

Atât pe Google Chrome cât şi pe Mozilla Firefox (versiunile noi) codul standard CSS ar trebui sa funcţioneze corect.

Mini-capitolul 4. Exemplul

Vom crea un box de culoare roşie cu toate colţurile rotunjite, direct din codul CSS:

#coltrotunjit
{
width:100px; /* latimea va avea 100px */
height:50px; /* inaltimea va avea 50px */
background:#ff0000; /*culoarea va fi rosie*/
padding:5px;
border-radius:5px;
-moz-border-radius:5px; /* pentru versiunile vechi de mozilla */
-webkit-border-radius:5px;/* pentru versiunile vechi de google chrome si safari */
}

#coltrotunjit p
{
text-align:center;
color:#fff;
font-size:14px;
}

Codul HTML pentru Output folosit de mine este următorul :

 


 
test

DEMO              |              DOWNLOAD

Sper să vă fie de folos acest mic tutorial. 🙂