HTML, HTML5, XHTML, XML, CSS, CSS2, CSS3, JS, PHP, ASP, .NET…. tutti acronimi che vengono utilizzati per creare le pagine web che visitate e visitiamo tutti i giorni, ma come si fa a creare qualcosa in rete?Bhè non è che sia poi così semplice creare delle pagine web, occorre tempo, passione (soprattutto), creatività…. ma non basta, perchè ogni giorno esce una tecnica nuova e si cerca poi di utilizzarla sempre al meglio…
Quello che sto per scrivere, è un piccolo aiuto per tutti coloro che si stanno avvicinando al Web Design e cercano di migliorare sempre più (come cerco di fare anche io ogni sera che mi metto a cercar di far qualcosa di nuovo sulle mie pagine). Ultimamente la grafica dei siti si è modificata, cercando di mostrare ombre nei pulsanti, riflessi sulle icone… per non parlare dei tanti riquadri che oramai son tutti arrotondati, basta con tutti gli spigoli, ci si potrebbe far male… ma come possiamo smussare i nostri quadrati, i nostri rettangoli?
Quando creiamo un layout, utilizziamo i file CSS (i fogli di stile delle pagine) e quando impostiamo le regole dei nostri riquadri, dovremo aggiungere una semplice riga (quella in neretto):
#barramenu {
height: 30px;
padding: 0 0 0 10px;
background-color: #000000;
float: left;
margin-top: 15px;
-webkit-border-radius: 5px;
}
Poi se giocate con il valore, aumenterete o diminuirete l’arrotondamento
AGGIORNAMENTO: 17/04/12 – COMPATIBILITA’ PER I BORDI ARROTONDATI CON OGNI BROWSER
Purtroppo ahimè la parte precedente del box non è compatibile con tutti i browser, ma solo con Chrome (se non sbaglio anche safari), ora vi illustrerò come renderlo compatibile con i restanti browser (firefox, IE…)
Prendiamo spunto sempre dalla stessa parte di css illustrata qui sopra e vediamo cosa aggiungere:
#barramenu {
height: 30px;
padding: 0 0 0 10px;
background-color: #000000;
float: left;
margin-top: 15px;
-webkit-border-radius: 5px;
border-radius: 5px; /* compatibilità con IE */
-moz-border-radius: 5px; /* compatibiltà con Firefox */
behavior: url(ie-css3.htc); /*piccolo aiuto per IE a utilizzare le nuove regole css3 */
}
Come vediamo nell’esempio che ho pubblicato, ho aggiunto 2 righe per la compatibilità con IE e FF e in più c’è una 3a riga che serve ad aiutare IE a sfruttare le nuove regole del CSS3.
Vi metto a disposizione anche il file in questione.
spero di esservi stato d’aiuto e ricordate un grazie fa sempre piacere 😉
[ratings]