Angoli arrotondati senza immagini! Solo CSS

In questo articolo viene spiegato come creare dei box (div o quant’altro) creando i bordi arrotondati con il solo utilizzo dei CSS.
Cosa significa? Altro spazio che viene salvato dal caricamento, se il cliente vuole modificare dei colori (o voi stessi per il vostro sito) basterà cambiare il colore di sfondo del vostro contenitore e gli angoli rimarranno invariati, velocizzando molto il processo lavorativo e ottenendo (molte volte è così) un risultato migliore.

Vediamo come fare. Chiaramente Safari, Firefox e Chrome lavorano tranquilli con i CSS3, quindi basterà scrivere:

.box-arrotondato {
     -moz-border-radius: 20px;
     -webkit-border-radius: 20px;
     -khtml-border-radius: 20px;
     border-radius: 20px;
}

Per il “simpatico” Internet Explorer serve un trucchetto.
Basta scaricare un file e inserirlo sul vostro spazio web (per semplicità mettetelo nella cartella dove si trova il vostro CSS).
Curverd Corner è il file .htc che implementerà l’uso di border-radius in IE.
Poi inserire nel CSS queste righe:

.box-arrotondato {
     border-radius: 20px;
}

Quindi mettendo insieme il tutto avrete:

.box-arrotondato {
     behavior: url(css/border-radius.htc);
     -moz-border-radius: 20px;
     -webkit-border-radius: 20px;
     -khtml-border-radius: 20px;
     border-radius: 20px;
}

Provato e perfettamente funzionante!

Annunci

, , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: