Leggerai questo articolo in: 2 minuti

Dai vari miei smanettamenti in giro per la rete, oggi voglio segnalarti il servizio offerto da www.css3.me.

Il tool si chiama CSS3 Generator e permette in pochissimo tempo di generare il codice css3 da associare ad un nostro div.

css3 generator

Come si nota dall’interfaccia molto intuitiva, abbiamo la possibilità di scegliere diversi settaggi secondo le nostre preferenze in modo estremamente semplice e veloce.

In particolare possiamo definire le seguenti caratteristiche:

  • Raggio del bordo che il nostro div dovrà avere.
  • Ombra.
  • Colore del gradiente.
  • Opacità.

Il tutto con un paio di click!

Associare il codice generato dal tool al nostro div è semplicissimo, ecco un esempio:

Se il nostro div si chiama Pincopallino:

1
2
3
<div id="Pincopallino"> Vogliamo associare 
il codice generato dal tool
 a questo div! </div>

Basterà associare nel nostro css al div in questione il codice generato dal programma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#Pincopallino{
background-color:#ffffff;
border-width:2px;
border-color:#999999;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 4px #000000;
-webkit-box-shadow:0px 0px 4px #000000;
box-shadow:0px 0px 4px #000000;
/*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
background: -moz-linear-gradient(top, #5c92ff, #000000);
background: -webkit-gradient(linear, center top, center bottom, from(#5c92ff), to(#000000));
background: -o-linear-gradient(top, #5c92ff, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c92ff', endColorstr='#000000');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c92ff', endColorstr='#000000')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(top, #5c92ff, #000000);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
}

Nella speranza ti risulti utile per i tuoi lavori ti auguro una splendida giornata!

Conoscevi CSS3 Generator? Non dimenticare di condividere l’articolo con i tuoi amici!

[adsense]