Belli gradienti coi CSS

Lo sfondo di gradient di default occupano l'intera area dell'elemento. Controllando le dimensioni   con la proprietà background-size  e la posizione utilizzando il background-position, è possibile creare modelli dei gradient insoliti e meravigliosi .

Questo articolo dedicherò solo ai vari esempi di utilizzo gradient e risultati finali che si possa in seguito copiando semplicemente il codice utilizzare nei propri progetti

1. Pettini

.pr1{
height: 200px;
background: radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 190px, 
radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 -10px;
background-size: 20px 20px;
background-repeat: repeat-x;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,.2), -1px -1px 2px 0 rgba(0,0,0,.2);
}

2. Modello diagonale

.pr2{
height: 200px;
background: linear-gradient(45deg, #CBDDEB, #CBDDEB 50%, #527383 50%);
background-size: 50px 50px;
}

3. Modello diagonale 2

.pr3 {
background: linear-gradient(135deg, #FABFB2, #FABFB2 25%, #FCA699 25%);
background-size: 20px 20px;
}

4. Confini a gradient

.pr4{
background-color: #9097A2;
}
.pr4 h4 {
padding: 30px 0;
color: white;
font-size: 40px;
position: relative;
margin: 0;
transform: translate(-50%, -50%);
top: 50%; 
left: 50%;  
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.3) 40%, rgba(211, 212, 218, 0.3) 60%, rgba(211, 212, 218, 0));
}
.pr4 h4:before {
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}
.pr4 h4:after {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}

Io amo gradient!

5.  Celle grandi

.pr5 {
background-image:
linear-gradient(#98B7AF 1px, transparent 1px),
linear-gradient(90deg, #98B7AF 1px, transparent 1px);
background-size: 2em 2em;
background-color: white; 
}

6. Pisseli

.pr6{
background-color: white;
background-image: radial-gradient(#9ed8d3 5px, transparent 5px);
background-size: 30px 30px;
}

7. Gradient radiale

.pr7{
background-color: #e61f59;
background-image: radial-gradient(ellipse farthest-corner at right bottom, #ADC0CE 0%, #E61F59 50%, #E4E4E4 100%);
}

8. Piastrella

.pr8 {
background-color: #DDD7D7;
background-size: 50px 50px;
background-image: 
linear-gradient(-45deg, transparent 52%, rgba(255,255,255,0.9) 54%, transparent 55%, transparent),
linear-gradient(45deg, transparent 52%, rgba(255,255,255,0.6) 54%, transparent 55%, transparent),
linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 52%, transparent 53%, transparent),
linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.05) 52%, transparent 53%, transparent);
}

9. Modello-fantasia

.pr9{
background-color: #F2D95D;
background-image: radial-gradient(#7F7E7F 76%, transparent 0),
radial-gradient(#7F7E7F 72%, transparent 0),
radial-gradient(#7F7E7F 68%, transparent 0),
radial-gradient(#7F7E7F 64%, transparent 0),
radial-gradient(#7F7E7F 60%, transparent 0),
radial-gradient(#7F7E7F 56%, transparent 0),
radial-gradient(#7F7E7F 52%, transparent 0),
radial-gradient(#7F7E7F 48%, transparent 0),
radial-gradient(#7F7E7F 44%, transparent 0),
radial-gradient(#7F7E7F 40%, transparent 0),
radial-gradient(#7F7E7F 36%, transparent 0),
radial-gradient(#7F7E7F 32%, transparent 0),
radial-gradient(#7F7E7F 28%, transparent 0),
radial-gradient(#7F7E7F 24%, transparent 0);  
background-size: 1em 1em;
background-repeat: repeat-y;
background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
}

10. Retro raggi

.pr10{
background:
linear-gradient(170deg, transparent 80%, #91CBCF 30%) ,
linear-gradient(156deg, transparent 68%, #E3D9C3 30%),
linear-gradient(135deg, transparent 60%, #91CBCF 30%),
linear-gradient(115deg, transparent 55%, #E3D9C3 30%),
linear-gradient(65deg, transparent 45%, #91CBCF 30%),
linear-gradient(45deg, transparent 40%, #E3D9C3 30%),
linear-gradient(24deg, transparent 32%, #91CBCF 30%),
linear-gradient(10deg, transparent 20%, #E3D9C3 20%),
linear-gradient(0deg, transparent 0%,  #91CBCF 0%);
background-position: center;
background-size: 100% 100%;
}

11. Pino

.pr11{
background-size: 48px 18px;
background-color: #CBCFD1;
background-image: 
linear-gradient(90deg, #607584 1%, transparent 2%), 
linear-gradient(45deg, transparent 7%, #607584 10%, transparent 10%, transparent 35%, #607584 37%, transparent 33%), 
linear-gradient(-45deg, transparent 8%, #E6EBED 10%, transparent 10%, transparent 35%, #E6EBED 37%, transparent 33%);
}

12. Pavimento piastrelato

.pr12{
background-color: #f76;
background-image:
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
background-position: 0 2em, 0 2em, 2em 4em, 2em 4em, 4em 2em, 4em 2em, 6em 4em, 6em 4em, 0 0, 2em 2em;
background-size: 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 4em 4em, 4em 4em;
}

Letto 439 volte