Pubblicato il 29/03/13e aggiornato il

Come creare CSS per bordi arrotondati, gradienti e ombreggiature.

Come generare dei fogli di stile per gradienti, texture, bordi arrotondati e ombreggiatura con CSS Matic - The Ultimate CSS Tool.
Nel precedente articolo abbiamo visto come creare dei fogli di stile per gradienti senza usare strumenti di grafica ma utilizzando l'estensione ColorZilla per Chrome e Firefox. I disegnatori web sono soliti creare, oltre che con le sfumature di colore, anche degli elementi con bordi arrotondati o con ombreggiature. Ci sono dei tool online che agevolano questo compito inserendo semplicemente i parametri per ottenere il codice già pronto e funzionante con tutti i browser più recenti. Un esempio è lo strumento Border Radius che genera il codice a partire dai raggi di curvatura dei vari angoli che possono anche essere tutti diversi.

CSS Matic è un tool più evoluto che ci consente di generare codici per gradienti, come ColorZilla, per bordi arrotondati (border radius), per texture e per ombreggiature (box shadow). Si clicca su uno dei quattro tool presenti in Homepage per iniziare


css-matic-creare-gradienti-bordi   
Lo strumento per il gradiente è molto simile a quello di ColorZilla mentre Noise Texture serve per creare una trama che poi può essere scaricata in formato PNG. In Box Shadow dobbiamo impostare i parametri della lunghezza orizzontale e verticale dell'ombreggiatura, il Blur e lo Spread Radius, il colore del box e quello dell'ombra. Dopo aver scelto il livello di opacità dell'ombra si copia il codice

box-shadow-css-matic

Vediamo più in dettaglio come utilizzare lo strumento per la creazione dei bordi arrotondati. Si può scegliere di impostare lo stesso raggio di curvatura per tutti gli angoli oppure di metterlo diverso per ciascuno di essi. Gli altri parametri sono la larghezza, lo stile e il colore del bordo

creare-bordi-arrotondati

Si va su Copy Text per ottenere il codice che può essere inserito in un modello, in un articolo o in un widget. A titolo di esempio ecco come potrebbe essere usato un tale CSS

<style>
#contenitore {
width:250px;
height:150px;
background-color:#e7a61a;
color:#003366;
font-size:20px;
padding:8px;
CODICE OTTENUTO DA CSS MATIC
}
</style>
<div id="contenitore">Testo inserito in un rettangolo con angoli arrotondati di raggio 30 pixel, con caratteri da 20 pixel e colore #003366.</div>

dove i parametri in viola possono essere personalizzati e dove è stato inserito il codice per i bordi arrotondati ottenuto da CSS Matic. Il risultato visivo è il seguente


Testo inserito in un rettangolo con angoli arrotondati di raggio 30 pixel, con caratteri da 20 pixel e colore #003366.

In questo esempio si possono inserire anche altre righe che riguardino altri parametri.




4 commenti :

  1. Questo mi interessa parechhio. Grazie Ernesto.

    RispondiElimina
  2. Mi sembra non aver trovato un articolo ad hoc quindi te lo domando qui. Ho un modello fantastico, su blogger, che ho personalizzato (mettendo il read more automatico, seguendo le istruzioni di un tuo articolo). Volendo arrotondare i bordi dei post, o dei widget, dove vado ad agire?

    RispondiElimina
    Risposte
    1. @# Per i post prova a incollare questo codice subito sopra alla riga con /b:skin


      div.date-outer:nth-child(1) > div:nth-child(2), date-outer:nth-child(1) > div:nth-child(2) {
      border-radius: 30px 30px 30px 30px;
      -moz-border-radius: 30px 30px 30px 30px;
      -webkit-border-radius: 30px 30px 30px 30px;
      border: 1px solid #000;
      }

      Serve per i post in homepage. Se funziona trova gli altri selettori con questo strumento
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html

      Elimina

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.