Fw

Wordpress Creative Developer

Generatore CSS3 – Bordi arrotondati, Ombre e Gradienti

  • Html Css
  • -

Appuntamento che oggi raddoppia con le risorse per web designer 😀

Infatti ti voglio segnalare un servizio che ho scovato per generare codice CSS3, CSS3 Generator: angoli arrotondati, ombre e gradienti in 3 minuti.

Generatore css3 - Bordi arrotondati, ombra,gradiente

Basterà operare sui quattro selettori per impostare quello che ci serve e ottenere il codice da associare.

Come associare il codice?

Una volta prelevato magari potresti chiederti: e ora dove lo metto? Supponiamo che tu abbia il div “pippo” che vuoi arrotondare.

Per favore mi arrotondi, mi metti l'ombretta e anche un bel gradiente?

Ora vai nel foglio di stile CSS e incolla il codice che hai ottenuto in questo modo, associandolo a pippo:

#pippo {
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 7px #000000;
-webkit-box-shadow:0px 0px 7px #000000;
box-shadow:0px 0px 7px #000000;
/*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
background: -moz-linear-gradient(top, #ff4900, #591300);
background: -webkit-gradient(linear, center top, center bottom, from(#ff4900), to(#591300));
background: -o-linear-gradient(top, #ff4900, #591300);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4900', endColorstr='#591300');
/*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='#ff4900', endColorstr='#591300')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(top, #ff4900, #591300);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/

}

 

Ah dimenticavo..e il mitico Internet Explorer? Per quello c’è CSS3PIE 😉

4 Commenti

  1. Ma il file pie.htc dove si mette? nella stessa cartella del css o dove ci son le pagine web?

  2. ma i tuoi bellissimi tutorial che fine hanno fatto :(?

  3. http://www.css3maker.com/index.html

    Segnalo anche questo CSS3 editor che trovo anche più completo. Saluti!

  4. @Daniele
    Ciao e benvenuto nel blog 😉
    Devi metterlo nel foglio di stile dove sono presenti anche le proprietà css3.

    @F
    Ti riferisci a jQuery? torneranno presto! comunque lunedì scorso ho proposto un mini tutorial 😉

    @Luca
    Ti ringrazio per la segnalazione!

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *