Tutorial contur colțuri rotunjite pentru Blogspot

De acum încolo voi posta săptămânal câte un tutorial HTML, CSS, JAVASCRIPT, JQUERY și în același timp îmi voi acorda un timp de aprofundare în tainele acestor limbaje. Cunoscătorii știau că până a apărea CSS3, conturul (border) putea fi doar rectangular. Bloggerii foloseau pentru sidebar și main o imagine GIF sau PNG care imita colțul rotunjit. Problema era destul de sensibilă pentru că îți punea capul la contribuție la numărat pixelii pentru o afișare corectă. Nu mai spun de browserele păcătoase care vedeau cu totul altceva decât ai fi sperat.
După cum puteți vedea, Borarola.ro a avut parte de o mică schimbare. A moștenit contur pentru sidebar și corpul articolelor. Banal dar îmi place.


Tutorial pentru Blogspot:
Dacă doriți contur rotunjit pentru întreg blogul dați un search în codul șablonului, bifați Extindeți șabloanele control și căutați după termenul #outer-wrapper. În interiorul acestuia veți introduce codul respectiv. În cazul meu, am vrut un contur rotunjit pentru partea de articole și un alt contur pentru sidebar.

În #main-wrapper:

border-radius:25px; 
-moz-border-radius:25px; /* Old Firefox */ 
border: 1px solid #ccc;

A fost adăugată o linie de cod suplimentară (Old Firefox) în cazul în care clientul navighează de pe un browser Firefox versiune veche.

În #sidebar-wrapper am:

border-top-right-radius:5em;
border-top-left-radius:1em;
border-bottom-right-radius:3em;
border-bottom-left-radius:1em;
-moz-border-top-right-radius:5em; /* Old Firefox */
-moz-border-top-left-radius:1em; /* Old Firefox */ 
-moz-border-bottom-right-radius:3em; /* Old Firefox */ 
-moz-border-bottom-left-radius:1em; /* Old Firefox */ 
border: 1px solid #BFA1AD;

Vă puteți personaliza conturul, să fie mai gros sau mai subțire sau culoarea prin atributul border. Fiecare colț poate fi modificat prin atributul border-[sus/jos]-[stânga/dreapta].

Atenție, CSS3 nu poate fi văzut de Internet Explorer 8 sau versiunile mai vechi. Pentru o documentație completă de contur intrați pe w3schools.com.