Cum să setați gradienții în css3

Cum să setați gradienții în css3

Bună ziua tuturor. Astăzi, vom vorbi despre cum să creați gradienți în CSS3.

Mai întâi, vom crea un bloc, folosind exemple ca exemple.

Lățimea CSS .container: 400px;
înălțime: 300px;
float: stânga;
margine: 40px;
fundal: # 999;
raza de graniță: 5px;
box-shadow: 0 8px 15px rgba (0,0,0, .6);
>

Deci, avem un blocaj. Acum vom lua în considerare declivitățile. Ele sunt stabilite în fundal.

fundal al containerului: gradient linear (# 333, #bbbb);
>

Acesta este setul minim de parametri. Prima culoare este înlocuită treptat de culoarea inferioară. Cu toate acestea, primul parametru este deplasarea în grade.

fundal: gradient linear (45deg, # 333, #bbb);

Valoarea poate fi, de asemenea, negativă. De asemenea, valoarea de compensare poate fi specificată și în cuvinte.

fundal: gradient linear (partea dreaptă sus, # 333, #bbb);

Ie Gradientul va porni din colțul din dreapta sus, în acest caz.

De asemenea, puteți seta valoarea în procente

fundal: gradient linear (40% 10%, # 333, #bbb);

Putem specifica culori-stoppers. Ele sunt date după culoare. Apoi gradientul va fi mai abrupt.

fundal: gradient linear (60% 10%, # 333 30%, #bbb 50%);

Deci, cu gradienti liniare sortate, puteti merge la gradienti radiali. și anume circulare. Tot ceea ce sa spus despre gradientele liniare. este, de asemenea, valabil pentru radial. Singura diferență este că ele sunt circumscrise.

fundal: radial-gradient (centru, # 333 70%, #bbb 100%);

În cele din urmă, trebuie spus că pot exista mai multe gradienți. Pentru a face acest lucru, pur și simplu listați-le cu o virgulă.

Deci, asta e tot. Astăzi, ne-am dat seama cum să setăm gradienții în CSS3. Vă mulțumim pentru atenție și vă vom vedea în curând!

Recomanda acest articol prietenilor tai:

Dacă ți-a plăcut site-ul, atunci trimiți un link spre el (pe site-ul tău, pe forum, în contact):

Se pare ca aceasta:

  • Codul BB al legăturilor pentru forumuri (de exemplu, îl puteți pune în semnătură):


















  • Trimiteți-le prietenilor: