27 Elegants exemples de degradat de fons CSS

Mantenir-se al dia sobre les principals tendències i estàndards de disseny web és molt important per a un dissenyador o un desenvolupador. Actualment, els degradats de fons s’utilitzen àmpliament als llocs web moderns.

En aquest article, us guiarem per diferents exemples de degradats de fons mitjançant CSS.

Gradients de fons que fan servir CSS

El degradat CSS mostra una transició suau amb dos o més colors especificats. El degradat CSS proporciona un millor control i rendiment sobre l'ús d'un fitxer d'imatge real (d'un degradat). El imatge de fons La propietat CSS s’utilitza per declarar degradats com a fons.

El controlador Xbox One USB no funciona

Hi ha tres tipus de gradients: lineal (creat amb el fitxer gradient lineal () funció), radial (creat amb gradient radial () funció), i cònica (creat amb el fitxer gradient cònic () funció). També podeu crear gradients que es repeteixen amb el fitxer gradient-lineal-repetitiu () , gradient radial repetitiu () , i repetitiu-cònic-gradient () funcions.

MDN Docs defineix aquestes funcions com a:

gradient lineal () : La funció CSS de gradient lineal () crea una imatge que consisteix en una transició progressiva entre dos o més colors al llarg d’una línia recta. El seu resultat és un objecte de la tipus de dades, que és un tipus especial .

gradient radial () : El gradient radial () La funció CSS crea una imatge que consisteix en una transició progressiva entre dos o més colors que irradien des d’un origen. La seva forma pot ser un cercle o una el·lipse. El resultat de la funció és un objecte del fitxer tipus de dades, que és un tipus especial .

gradient cònic () : El gradient cònic () La funció CSS crea una imatge que consisteix en un degradat amb transicions de color girades al voltant d'un punt central (en lloc de radiar des del centre). Els gradients cònics d’exemple inclouen gràfics circulars i rodes de colors. El resultat de la gradient cònic () funció és un objecte de la tipus de dades, que és un tipus especial .

gradient-lineal-repetitiu () : El gradient-lineal-repetitiu () La funció CSS crea una imatge que consisteix en repetir gradients lineals. És similar a gradient / linear-gradient () i pren els mateixos arguments, però repeteix que el color s’atura infinitament en totes les direccions per cobrir tot el contenidor. El resultat de la funció és un objecte del fitxer tipus de dades, que és un tipus especial .

gradient radial repetitiu () : El gradient radial repetitiu () La funció CSS crea una imatge que consisteix en gradients repetitius que irradien des d’un origen. És similar a gradient / radial-gradient () i adopta els mateixos arguments, però repeteix que el color s’atura infinitament en totes les direccions per cobrir tot el contenidor, de manera similar a gradient / repeating-linear-gradient (). El resultat de la funció és un objecte del fitxer tipus de dades, que és un tipus especial .

repetitiu-cònic-gradient () : El repetitiu-cònic-gradient () La funció CSS crea una imatge que consisteix en un degradat que es repeteix (en lloc d’un únic degradat) amb transicions de color girades al voltant d’un punt central (en lloc de radiar des del centre).

Aquí teniu la sintaxi oficial de cada tipus de degradat.

Sintaxi oficial de gradients lineals

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Sintaxi oficial de gradients radials

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Sintaxi oficial de gradients cònics

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

Aquests són alguns exemples de degradats de fons impressionants que poden millorar la interfície d’usuari del vostre lloc web fins al següent nivell.