CSS Gradient Background Cross Browser - GM Multimedia

Vai ai contenuti

Menu principale:

CSS Gradient Background Cross Browser

HTML.HTML5.PHP CSS.CSS3.Javascript



Questo codice funziona con:

                                                   
Safari >= 4  --  Google Chrome  --  Mozilla Firefox >= 3.6  --  MSIE >= 5,5

          Da sempre, per ottenere un background sfumato (gradiente) si usava un'immagine, ora con le nuove versioni di CSS e browser, è possibile ottenere dei nackground gradienti senza l'uso delle immagini, ma con solo qualche riga di codice.

Codice per gradiente verticale.
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
/* fallback (Opera) */
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #00FF00, #000000);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#00FF00), to(#000000));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#00FF00', EndColorStr='#000000',
GradientType=0);
}

Esempio codice gradiente verticale

          Come si può intuire, è possibile fare anche gradienti berticali, manipolando un po' il codice CSS. Ecco come fare!

Codice per gradiente orizzontale. 
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
/* fallback (Opera) */
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(left, #00FF00, #000000);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, right top, from(#00FF00), to(#000000));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#00FF00', EndColorStr='#000000',
GradientType=1);
}


          Ecco! Così non abbiamo più bisogno delle immagini, basta un po' di CSS per ottenere un gradiente Cross-Browser.

          Meraviglia dele meraviglie! É possibile applicare il gradiente anche ai div espandibili.

Come qui:
Oh ragazzo, quando si fa clic su questo, è meglio essere seduti.



Visitatori online:
Sei il nostro visitatore n°:
© - Copyright 2015. - Tutti i diritti riservati - G.M. Multimedia
Torna ai contenuti | Torna al menu