• Home
  • Servizi Web
  • Counseling e Life Coach
  • Blog
    • CMS e Web Design
    • SEO e Web Marketing
    • Tips and Tricks
    • Cose da Nerd
  • Portfolio
  • Glossario
  • Arti Antiche
  • Fotografia
  • Contatti
  • Home
  • Servizi Web
  • Counseling e Life Coach
  • Blog
    • CMS e Web Design
    • SEO e Web Marketing
    • Tips and Tricks
    • Cose da Nerd
  • Portfolio
  • Glossario
  • Arti Antiche
  • Fotografia
  • Contatti

Border Radius CSS 3 su tutti i browser…

30 Maggio, 2013

Il Border Radius CSS 3 è conosciuto ormai da tempo e, fortunatamente, anche i browser più "legnosi" lo compilano "quasi" correttamente.
Uno strumento comodissimo per scrivere in due secondi le righe di codice necessarie per creare bordi stondati in Internet Explorer 9, Firefox ed i Browser Webkit based, stile Safari e Chrome, è border-radius.com, che potete utilizzare direttamente da questa pagina…

La pagina risulta molto minimale ed elgante; ci propone 4 campi, agli angoli, nei quali inserire il border radius css 3 che si vuole attribuire a ciascuno spigolo ed una textarea centrale nella quale viene generato il codice non appena modificheramo il primo campo…

Davvero uno strumento utile sia per chi non ha mai usato il border radius css 3, o non molto pratico di CSS, sia per chi non ha spesso voglia di scrivere manualmente tante righe di codice per rendere il bordo stondato in css 3 visibile su tutti i browser…

Ecco un esempio di come utilizzare il tool qui sopra:

Inserire nei 4 angoli della pagina le misure che seguono:
Top Left:             10
Top Right:           5
Bottom-Right:      10
Bottom-Left:        5
…il codice generato è il seguente:

div{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 5px;
}

Una volta scoperto, uno strumento del genere, non resta che aggiungerlo ai preferiti… per ritornarci ogni volta che, lavorando sul css del proprio sito web, si ha la necessità di stondare il bordo di qualche div 😛

Commenti

csscss3html
Share

Tips and Tricks

You might also like

Conta Caratteri – Come contare i caratteri di un testo in un clic!
5 Giugno, 2013
Includere file php in Joomla, dentro ad articoli e moduli…
31 Gennaio, 2013
  • Tempo di Lettura: < 1 minuto
  • Categorie

    • Blog
      • CMS e Web Design
      • Cose da Nerd
      • SEO e Web Marketing
      • Tips and Tricks
    • Glossario
    • Portfolio
      • 2012 / oggi – Web Alchemy
      • 2016 / 2017 – iLike Network
      • 2013 / 2017 – UAN Web
      • 2009 / 2012 – Ricreativi
      • 2008 / 2012 – Bordersite
  • Ultimi Articoli

    • 2012 / oggi – Web Alchemy – Il Laboratorio di Idee Digitali a Bologna
    • Passwords Generator – Creazione di password sicure e protette – Generatore di password
    • Aggiornamenti Algoritmi Google
  • Preventivi e Info Online:

      Nome (*)

      Email (*)

      Messaggio

      Accetto il Trattamento dei Dati Personali e le Condizioni d'Uso

    • Tag Cloud

      accessori geek adwords chrome plugin CMS comunicazione web css css3 design download fantasy gdr google google apps google chrome hootsuite html javascript joomla landing page mac Mail motori di ricerca nerd stuff osx osx facile osx finder php plesk podcast posizionamento organico posizionamento sui motori di ricerca retrogame sem SEO seo tools server social marketing social network star wars terminale osx twitter web design web marketing wordpress wordpress plugin



    Tutti i Diritti Riservati a Andrea Lolli - LLLNDR86R25A944I - Mail: [email protected] - Tel: 346 99 14 147
    Privacy policy - Cookie policy
    Powered by WebAlchLab