Home-theater-designers
Si porteu més d’uns minuts a Internet, és probable que us hagueu trobat amb un gradient CSS. La propietat de fons CSS es pot utilitzar per crear diversos estils, i un dels tipus més interessants és el que pot fer amb el valor del gradient.
Saber dissenyar i crear diferents gradients CSS és un avantatge per a qualsevol dissenyador o desenvolupador de programari. A partir d’aquest article, aprendreu tot el que heu de saber per començar a incorporar gradients CSS als vostres projectes.
Què és un degradat CSS?
Un degradat CSS és essencialment la combinació de dos o més colors que transiten sense problemes d'un a l'altre. L'estat de transició d'un gradient CSS depèn del tipus de gradient utilitzat. Hi ha dos tipus principals de degradats que s’utilitzen habitualment en el disseny de programari: lineals i radials.
No obstant això, hi ha un tercer tipus de degradat menys popular i conegut com a gradient cònic.
Sintaxi de gradients CSS
Background-image: gradient-type (direction, color1, color2);
El degradat CSS s'ha d'assignar a la propietat CSS de la imatge de fons. El tipus de gradient pot ser un dels diversos; gradient lineal, gradient radial o gradient cònic. El tipus de degradat és seguit per claudàtors d'obertura i tancament que contenen la direcció de transició del degradat, així com els colors que s'inclouran al degradat.
Relacionat: Com definir una imatge de fons a CSS
L'exemple anterior mostra dos colors, però un degradat pot contenir diversos colors diferents. L'únic requisit és que cada color de la llista estigui separat per una coma.
Què és un degradat lineal?
El gradient lineal és el gradient CSS més popular. Crea un degradat de transició horitzontal, vertical o diagonal mitjançant dos o més colors.
Exemple de gradient lineal CSS
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
El codi anterior produirà el següent degradat CSS:
Hi ha un component important de la sintaxi del degradat que s’omet a l’exemple anterior. Aquest component és la direcció de transició del gradient i es va ometre perquè l'alineació per defecte del gradient lineal és vertical (de dalt a baix); aquesta és la sortida desitjada en aquest exemple.
El codi anterior produeix el mateix resultat que la següent línia de codi. L'única diferència entre tots dos és la secció de direcció del codi.
Utilitzant l'exemple de degradat lineal inferior
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Com podeu veure a la sortida, el codi anterior crea un degradat que comença amb blau a la part superior i, a continuació, transita lentament al taronja a la part inferior. Si volguéssiu invertir l'ordre dels colors, simplement substituireu el fins a baix amb a dalt i això invertirà la direcció del gradient, produint la següent sortida:
De manera similar a l'alineació vertical, l'alineació horitzontal d'un degradat es pot aconseguir amb l'ús de dos conjunts de paraules clau de direcció: a la esquerra i a la dreta , que produirà els següents resultats, respectivament.
quina generació és l'iPad més recent
Gradient lineal diagonal
És possible aconseguir una transició de gradient lineal diagonal en qualsevol direcció d’un gradient lineal. Només hi ha quatre llistes específiques de paraules clau que heu de conèixer per fer-ho possible.
- A la part inferior dreta
- A la part inferior esquerra
- A la part superior dreta
- A la part superior esquerra
Utilitzant l'exemple de degradat lineal diagonal
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
L'exemple anterior produeix la sortida següent:
Com podeu veure a la sortida anterior, el gradient lineal fa la seva transició en direcció diagonal movent-se de la secció superior esquerra a la secció inferior dreta del gradient.
Gradient lineal multicolor
Un degradat lineal pot tenir dos o més colors, però, com es veuen més colors en un degradat? Una disposició de color de gradient lineal multicolor depèn de la seva direcció. Els de transició en direcció horitzontal faran que cada nou color aparegui a l'esquerra o a la dreta del gradient lineal, en funció de la direcció exacta del gradient lineal.
Exemple de degradat lineal multicolor
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
La línia de codi anterior produirà la sortida següent:
Com podeu veure, cada nou color s'afegeix a la dreta del degradat, creant el que finalment es transforma en un arc de Sant Martí. Es pot aconseguir la mateixa sortida en direcció vertical; tanmateix, la disposició específica del color en el gradient lineal dependrà de la paraula clau de direcció vertical (cap amunt o cap avall).
Què és un degradat radial?
El degradat radial crea un degradat en espiral de dos colors més que comencen per defecte des del centre. Quan el gradient lineal produeix un gradient recte que flueix vertical o horitzontalment, el gradient radial produeix un gradient circular que flueix del centre a les vores exteriors.
Utilitzant l'exemple de degradat radial
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
La línia de codi anterior produirà la sortida següent:
Canvi del centre de degradat radial
Per defecte, un degradat radial comença al centre del degradat; no obstant això, és possible canviar el punt d'origen amb la introducció d'algunes paraules clau.
suport per a telèfons mòbils de bricolatge per a cotxe
Canvi de l'exemple de posició inicial del degradat radial
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
La línia de codi anterior produirà la sortida següent:
Com podeu veure a la sortida superior, el degradat ara comença des de la cantonada superior dreta en lloc del centre. Aquest canvi és possible a causa de la inclusió de la paraula clau dalt a la dreta al codi anterior. La següent llista de paraules clau també es pot utilitzar per canviar el punt d'origen del gradient radial:
- A dalt a l'esquerra
- Abaix a la dreta
- Baix a l 'esquerra
Gradients radials multicolors
Igual que el gradient lineal, el gradient radial també pot utilitzar dos són més colors, la diferència principal és que quan el gradient lineal s’afegeix al gradient en línia recta, el gradient radial afegeix nous colors a la vora exterior.
Exemple de degradat radial multicolor
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
La línia de codi anterior produirà la sortida següent:
Personalització de degradats
Fins ara heu vist com canviar la direcció i el punt central d’un degradat, però no heu vist com personalitzar un degradat. Personalitzar un degradat pot semblar molt de treball, però un cop hàgiu entès els conceptes bàsics per crear un degradat de fons CSS, el següent pas evident és aprendre a fer que els vostres gradients CSS siguin més únics.
com fer que Windows 10 sembli Windows XP
Per defecte, els colors d’un degradat ocupen una quantitat d’espai uniformement distribuïda amb cada color que transita sense problemes cap al següent. Per tant, si es combinen dos colors per formar un degradat, cada color ocuparà la meitat de l’espai disponible mentre es transita d’un a l’altre. Si es combinen tres colors, cada color ocuparà un terç de l'espai disponible.
Amb un degradat personalitzat, podeu definir la quantitat d’espai que un color ocuparà en un degradat assignant explícitament el posició color-stop .
Personalització d'un degradat lineal Exemple 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
La línia de codi anterior produirà la sortida següent:
La sortida anterior mostra el segon color del degradat lineal que s’atura al 30% del primer color del degradat, en lloc de la seva posició habitual, i perquè el segon color també és el color final del degradat que s’estén naturalment fins al final .
Si col·loquéssiu el 30% al codi anterior al final del primer color, les coses haurien de quedar més clares.
Personalització d'un degradat lineal Exemple 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
El codi anterior produirà la següent sortida.
La sortida anterior mostra clarament el primer color del degradat que s’atura al 30% del segon color del degradat. Aquest exemple, junt amb l’anterior, us ajudarà a facilitar la comprensió de la personalització del color.
La personalització d’un degradat radial es fa de la mateixa manera que un degradat lineal. L'únic que heu de fer per aconseguir els mateixos resultats anteriors en un gradient radial és canviar el tipus i la direcció del gradient.
Crear gradients CSS mai ha estat tan fàcil
Aquest article de tutorial us proporciona les eines per identificar i crear gradients lineals i radials. Si heu arribat a aquest punt, heu après a canviar la direcció i el centre d’un gradient. A més, ara teniu habilitats per personalitzar els degradats CSS i crear degradats de fons únics.
Tanmateix, si no voleu continuar directament en la creació de gradients nous i únics, podeu començar creant-ne de preexistents.
Compartir Compartir Tweet Correu electrònic 27 Elegants exemples de degradat de fons CSSEls colors sòlids són així l’any passat. Ja hi ha gradients. Però, com els creeu a CSS?
Llegiu a continuació Temes relacionats- Programació
- Desenvolupament web
- Web Design
- CSS
Kadeisha Kean és un desenvolupador de programari complet i escriptor tècnic / tecnològic. Té la capacitat diferent de simplificar alguns dels conceptes tecnològics més complexos; la producció de material fàcilment comprensible per a qualsevol novell en tecnologia. L’apassiona escriure, desenvolupar programes interessants i viatjar pel món (a través de documentals).
Més de Kadeisha KeanSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us