Nonostante sia ormai un argomento quasi “datato”, nonstante i tempi per vedere i CSS3 pienamente supportati sono ancora lontani dall’essere maturi, è fondamentale conoscerne gli aspetti basilari per non farci sorprendere. Dopo l’articolo riguardante il gradiente CSS3, passiamo oggi ad analizzare una proprietà semplice da utilizzare ma che ci permetterà di risparmiare in maniera considerevole tempo e div guadagnandone in termini di versatilità del nostro modello!
Ottenere bordi arrotondati fino ad oggi è stato un grosso problema. Nei tempi che furono si utilizzava il sistema della tabella a 9 scompartimenti, in cui ad ogni estremità (quindi escludendo il blocco centrale) si assegnava un immagine che simulava il tratto curvo riferito a quell’angolo. Fatti i 4 angoli si procedeva poi a dichiarare un colore di sfondo uguale per gli altri blocchi. Ne va da sè che ogni volta che si doveva fare un intervento i tempi si allugavano notevolmente. Poi si è passati ai DIV ma la solfa, riferita a questo specifico argomento, non è cambiata, nel senso che anche qui si era costretti ad usare immagini (magari mettendole come background via css :)!) ma comunque non si è arrivati a risolvere il problema della “fluidità” del modello utilizzato. Sono stati scritti quindi script in javascript o CSS assurdi per realizzare un effetto relativamente semplice da realizzare! Per fortuna tutto questo con i CSS3 viene messo da parte per lasciare spazio al border-radius. Attraverso questa semplice dichiarazione:
-webkit-border-radius: 10px 20px 30px 60px; -moz-border-radius: 10px 20px 30px 60px; border-radius: 10px 20px 30px 60px;
possiamo fare in modo che il contenitore a cui la applichiamo venga arrotondato.
Come noterete, non basterà dichiarare border-radius, sarà infatti necessario effettuare dichiarazioni specifiche per i browser “moz” e “webkit”. In questo modo saremo sicuri che le versioni recenti di firefox, safari, chrome (opera legge la proprietà senza prefisso), ci restituiranno l’effetto desiderato. Nel momento in cui i CSS3 diventano uno standard queste dichiarazioni diventeranno superflue dal momento che non fanno altro che, per ora, invalidare la validazione del nostro foglio stile.
Ma analizziamo nel dettaglio la proprietà border radius applicando all’esempio sottostante i valori sopra dichiarati:
Come potrete notare l’ordine dei numeri segue la regola dei CSS per cui il primo valore indica il bordo in alto a sinistra, il secondo indica l’angolo in alto a destra, il terzo in basso a destra e il quarto in basso a sinistra. E’ possibile anche dichiarare un solo valore, in questo modo tutti gli angoli avranno la stessa “curva”!
Come avrete capito questa proprietà riduce molto i tempi in fase di creazione infatti:
– Non è più necessario realizzare immagini di sfondo
– Ogni intervento viene effettuato cambiando pochissime righe di codice
– Si può applicare a tutti gli elementi “block”
– La versatilità aumenta esponenzialmente
Che altro vuoi di più? 😉
