Pubblicato il 28/03/11e aggiornato il

Come creare cerchi o rettangoli con gli angoli arrotondati mediante l'HTML.

L'uscita di Internet Explorer 9 ha reso finalmente un po' più semplice la creazione di codici che possano lavorare nello stesso modo con tutti i browser. Per creare dei bottoni per il blog, se volevamo renderli più professionali e con i bordi arrotondati usando solo l'HTML, dovevamo scordarci che fossero visti correttamente con Internet Explorer. Con l'ultima versione del browser Microsoft adesso le cose sono diventate più semplici e per esempio questo bottone


sarà visto con i bordi arrotondati anche con IE9. Con le versioni precedenti si continuerà a visualizzare un semplice rettangolo. Fino a poco tempo fa per creare un rettangolo con bordi arrotondati dovevamo utilizzare questi tag per indicare il raggio di curvatura. Ciascun browser aveva il suo

-moz-border-radius su Firefox
-webkit-border-radius su Safari e Chorme
border-radius
su Opera

In buona sostanza dovevamo inserirli tutti e tre senza per questo poter vedere il rettangolo arrotondato su Internet Explorer. Adesso tutti i browser più recenti supportano il tag border-radius che è diventato praticamente universale. Per esempio con questo codice

<div style="height:200px;width:300px;background-color:#FDBCB7;margin:0 auto; border-radius:50px;">

si visualizzerà questa forma geometrica con tutti i browser

con l'esclusione di coloro che apriranno il post con il lettore di feed. Non sto a dire che l'altezza, la larghezza e il raggio di curvatura possono essere personalizzati a piacere, così come il colore. Se si opta per un quadrato con raggio di curvatura uguale alla metà del lato si ottiene un cerchio





9 commenti :

  1. Ciao!!
    Innanzitutto volevo complimentarti con te, il tuo blog è stupendo e utilissimo!
    Posso chiederti un piccolo aiuto?!
    Ho numerato i commenti secondo le tue istruzioni qui http://www.ideepercomputeredinternet.com/2010/01/come-numerare-i-commenti-in-un-blog-su.html ma il "fumettino" che ho scelto viene tagliato dal blog e non riesco a spostarlo...Puoi darmi una mano?

    RispondiElimina
  2. @Mila
    Nel codice da mettere nella sezione head trovi questa porzione
    margin-right: 25px;
    margin-top: -5px; /*posizione-del-contatore*/
    prova a mettere
    margin-right: 30px;
    e se non basta
    margin-right: 35px;
    Ciao

    RispondiElimina
  3. questo è troppo, stavo proprio cercando delle info per creare le curvature ed ecco la risposta semplice...addirittura avevo letto che molti utilizzano delle immagini che è più facile disegnare.
    (andrò a visitare quei siti che sono pubblicizzati qui....capisc a me)

    RispondiElimina
  4. @Ernesto T.
    Grazie mille proverò!
    Speriamo!!

    RispondiElimina
  5. @Ernesto T.
    Buongiorno!Ho provato a cambiare i numeri ma non succede proprio niente, l'immagine sembra non muoversi! Boh!!!

    RispondiElimina
  6. @Mila
    L'immagine non deve muoversi deve solo mutare forma e dimensioni. Prova a mettere
    height:150px; width:200px;
    border-radius:25px;
    background-color:#003366;
    e vedrai che muterà aspetto ^_^

    RispondiElimina
  7. Ciao scusa ho cercato dappertutto, ma non riesco a trovare una guida per come arrotondare o smussare gli angoli del template, ho provato ad adattarci questa tecnica ma non sono riuscito...
    Tu hai fatto una guida su questo argomento? se non l'hai fatta non potresti dirmi come si fa?
    Vorrei anche il margine superiore...

    RispondiElimina
    Risposte
    1. @Winning ...
      Per arrotondare i margini di un template bisogna inserire delle immagini di background appunto arrotondate altrimenti con IE non si vedono. E' un lavoro da grafico.

      Elimina
  8. Scusami l'insistenza ma neanche riuscire ad allontanare un po il margine superiore, perchè dopo aver tolto la navbar si è incollatto la su...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.