CSS3 Gradient Background Images - GM Multimedia

Vai ai contenuti

Menu principale:

CSS3 Gradient Background Images

HTML.HTML5.PHP CSS.CSS3.Javascript



Questo codice funziona con:

                
Safari  --  Chrome  --  Firefox  --  IE 10  --  Opera

          Il codice CSS funziona nei browser (compreso Internet Explorer 10, Chrome, Firefox, Opera, Safari) che supportano i CSS3 gradienti in forma senza prefisso o con uno qualsiasi dei seguenti vendor prefix:-ms-,-moz-,-o-,-webkit

GRADIENTE LINEARE:

Codice gradiente lineare: dal basso a destra all'alto a sinistra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN BASSO A DESTRA


Codice gradiente lineare: dal basso all'alto 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN BASSO


Codice gradiente lineare: dal basso a sinistra all'alto a destra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top right, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(top right, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom left, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN BASSO A SINISTRA


Codice gradiente lineare: da destra a sinistra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(left, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #FFFFFF 0%, #00A3EF 100%);

DEMO

DA DESTRA


Codice gradiente lineare: da sinistra a destra
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(right, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #FFFFFF 0%, #00A3EF 100%);

DEMO

DA SINISTRA


Codice gradiente lineare: dall'alto a destra al basso a sinistra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(bottom left, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom left, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top right, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN ALTO A DESTRA


Codice gradiente lineare: dall'alto a in basso
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN ALTO


Codice gradiente lineare: dall'alto a sinistra a in basso a destra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top left, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN ALTO A SINISTRA



GRADIENTE CIRCOLARE

Codice gradiente circolare: dall'alto a sinistra
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left top, 0, left top, 974, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN ALTO A SINISTRA


Codice gradiente circolare: dall'alto 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center top, 0, center top, 552, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center top, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN ALTO


Codice gradiente circolare: dall'alto a destra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(right top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(right top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(right top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, right top, 0, right top, 974, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(right top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at right top, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN ALTO A DESTRA


Codice gradiente circolare: da sinistra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(left center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(left center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left center, 0, left center, 943, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at left center, #FFFFFF 0%, #00A3EF 100%);

DEMO

A SINISTRA


Codice gradiente circolare: centrale 
1
2
3
4
5
6
7
8
9
10
11

12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 496, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #00A3EF 100%);

DEMO

AL CENTRO


Codice gradiente circolare: a destra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(right center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(right center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(right center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, right center, 0, right center, 962, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(right center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at right center, #FFFFFF 0%, #00A3EF 100%);

DEMO

A DESTRA


Codice gradiente circolare: in basso a sinistra 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(left bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(left bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left bottom, 0, left bottom, 974, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at left bottom, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN BASSO A SINISTRA


Codice gradiente circolare: Dal basso al centro 
1
2
3
4
5
6
7
8
9
10
11

12
13
14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(center bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(center bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 544, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center bottom, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN BASSO AL CENTRO

>
Codice gradiente circolare: Dal basso a destra 
1
2
3
4
5
6
7
8
9
10
11
12
13

14
15
16
17
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(right bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(right bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(right bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, right bottom, 0, right bottom, 978, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(right bottom, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at right bottom, #FFFFFF 0%, #00A3EF 100%);

DEMO

IN BASSO A DESTRA




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