Generador de propietats CSS

Un generador de propietats CSS és una eina que crea codi CSS per a un efecte visual a partir d’un conjunt de controls lliscants i selectors de colors, en lloc que l’usuari hagi d’escriure el codi manualment. Aquest cobreix quatre efectes: degradats, ombres de caixa, radi de la vora i ombres de text. Cada panell mostra una previsualització en directe i produeix codi CSS llest per copiar.

Què genera

• Degradats: transicions lineals o radials entre dos colors
• Ombres de caixa: una ombra projectada o una ombra interior al voltant d’un element, amb controls per al desplaçament, el difuminat, l’expansió, el color i l’opacitat
• Radi de les cantonades: cantonades arrodonides, iguals a les quatre cantonades o configurades individualment
• Ombres de text: una ombra darrere del text, amb controls per al desplaçament, el difuminat, el color i l’opacitat

Cada paràmetre actualitza alhora la previsualització i el codi CSS generat, de manera que els canvis es poden comprovar abans de copiar el codi.

Com es calcula un degradat lineal CSS

Un degradat lineal va d’un color a un altre al llarg d’una línia recta. La seva sintaxi CSS és:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

L’angle es mesura en graus, de 0 a 360. position1 i position2 indiquen el punt en què cada color arriba a la intensitat màxima, com a percentatge de la longitud del degradat.

Exemple resolt

Els valors inicials del generador són un angle de 90 graus, #ff5f6d a 0 % i #ffc371 a 100 %. Això produeix:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

La primera línia és una alternativa de color senzilla per als navegadors que, per algun motiu, no poden representar el degradat. La segona línia és el degradat pròpiament dit.

Fórmula del degradat radial

Un degradat radial s’estén cap enfora des d’un punt central, en lloc de seguir una línia:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Aquest generador sempre produeix un degradat radial circular. No ofereix l’opció de forma el·líptica ni cap manera de moure el punt central; només es poden canviar els dos colors i les posicions dels punts d’aturada.

Els dos tipus de degradat d’aquesta eina utilitzen exactament dos colors, configurats amb els selectors Color 1 i Color 2. No hi ha cap opció per afegir una tercera aturada de color.

Fórmula de l’ombra de caixa CSS

Una ombra de caixa és una ombra dibuixada al voltant de les vores d’un element:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset i v-offset mouen l’ombra horitzontalment i verticalment. Els valors positius la desplacen cap a la dreta o cap avall; els negatius, cap a l’esquerra o cap amunt. blur suavitza la vora de l’ombra; un valor més alt estén més aquesta suavitat. spread augmenta o redueix la mida de l’ombra abans d’aplicar-hi el difuminat. Si s’afegeix la paraula clau inset davant dels desplaçaments, l’ombra es dibuixa a l’interior de la vora de l’element en lloc de fer-ho a l’exterior.

Exemple resolt

Amb els paràmetres predeterminats (desplaçament horitzontal de 5px, desplaçament vertical de 5px, difuminat de 10px, expansió de 0px, negre amb una opacitat del 20 %), l’eina produeix:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

El control lliscant d’opacitat del selector de colors va de 0 a 100 i es converteix a l’escala de 0 a 1 que utilitza rgba(), de manera que 20 % es converteix en 0,2.

Fórmula del radi de la vora CSS

El radi de la vora arrodoneix les cantonades d’un element. Hi ha dues formes:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Quan les quatre cantonades comparteixen un valor, el generador escriu la forma abreujada. Quan són diferents, enumera els quatre valors exactament en aquest ordre: superior esquerra, superior dreta, inferior dreta i inferior esquerra.

Exemple resolt

El radi predeterminat és de 10px a cada cantonada:

1border-radius: 10px;
2

Una imatge d’avatar circular sol utilitzar border-radius: 50%, tot i que aquest valor queda fora de l’interval que permet el control lliscant del generador (de 0 a 100 píxels).

Fórmula de l’ombra de text CSS

Una ombra de text funciona com una ombra de caixa, però no té cap valor d’expansió i s’aplica a les lletres en lloc de fer-ho a la caixa d’un element:

1text-shadow: h-offset v-offset blur color;
2

Exemple resolt

Amb els paràmetres predeterminats (desplaçament horitzontal de 2px, desplaçament vertical de 2px, difuminat de 3px, negre amb una opacitat del 50 %):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Quins codis de color accepta el generador

Cada control de color té una mostra i un quadre de text. El quadre de text accepta un codi de color hexadecimal, la forma # utilitzada arreu del CSS. Són vàlides quatre longituds: tres dígits (#f00), quatre dígits (#f00c), sis dígits (#ff0000) i vuit dígits (#ff0000cc). Les formes curtes representen el mateix color que les llargues, perquè cada dígit es duplica: #123 representa el mateix color que #112233.

L’últim dígit de la forma de quatre dígits i l’últim parell de la forma de vuit dígits defineixen la transparència. Els generadors d’ombres ignoren aquests dígits i prenen el valor alfa del control lliscant d’opacitat, de manera que el control lliscant sempre mostra la transparència que s’aplica realment. Si el quadre de text conté alguna cosa que no és un color hexadecimal, com ara un codi escrit només a mitges, l’ombra recorre al negre en lloc de produir una declaració incorrecta.

Com s’utilitza el generador de propietats CSS

1. Trieu una pestanya: Degradat, Ombra de caixa, Radi de la vora o Ombra de text.
2. Ajusteu els controls lliscants, els selectors de colors i les caselles de selecció. Cada control lliscant té un quadre numèric al costat per escriure-hi un valor exacte. El panell de previsualització i el codi CSS s’actualitzen immediatament.
3. Seleccioneu el botó «Copy to Clipboard» i enganxeu el codi en un full d’estils o en un atribut style.
4. Seleccioneu «Reset» per tornar tots els camps de les quatre pestanyes als seus valors inicials. Això també torna a activar la pestanya Degradat, encara que se n’estigués consultant una altra.

Preguntes freqüents

Per a què serveix un generador de propietats CSS? Converteix les entrades dels controls lliscants i del selector de colors en codi CSS acabat per a degradats, ombres i cantonades arrodonides, de manera que la persona que l’utilitza no ha d’escriure ni memoritzar aquesta sintaxi manualment.

Quina diferència hi ha entre un degradat lineal i un de radial? Un degradat lineal canvia de color al llarg d’una línia recta amb un angle determinat. Un degradat radial canvia de color cap enfora des d’un punt central. L’opció radial d’aquesta eina sempre utilitza una forma circular.

Pot aquesta eina crear un degradat amb més de dos colors? No. Tant el panell de degradat lineal com el de degradat radial admeten exactament dos colors, Color 1 i Color 2, cadascun amb la seva pròpia posició d’aturada.

En què es diferencia una ombra de caixa interior d’una de normal? Una ombra de caixa normal se situa fora de les vores de l’element, com la llum que cau darrere seu. Una ombra interior se situa dins de les vores, de manera que l’element sembla enfonsat en lloc d’estar aixecat.

Per què els valors de les cantonades arrodonides apareixen en l’ordre superior esquerra, superior dreta, inferior dreta i inferior esquerra? Aquest és l’ordre en què la propietat CSS border-radius espera que s’escriguin quatre valors separats, avançant en el sentit de les agulles del rellotge a partir de la cantonada superior esquerra.

Funciona el CSS generat en tots els navegadors? Els degradats, les ombres de caixa, el radi de la vora i les ombres de text són compatibles amb les versions actuals de Chrome, Firefox, Safari i Edge. No s’afegeixen prefixos de fabricant a la sortida.

Referències

1. MDN Web Docs: Ús dels degradats CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow