Funcionament de la propietat CSS border-radius
La propietat border-radius de CSS defineix com s'arrodoneixen els cantons dels elements de la interfície web. Aquest generador permet ajustar la curvatura d'una caixa de manera visual i obtenir el codi CSS corresponent a l'instant.
El comportament de la propietat es basa en la definició de radis de curvatura per a cadascun dels quatre cantons de l'element. Els valors s'apliquen seguint el sentit de les agulles del rellotge, començant pel cantó superior esquerre, seguit del superior dret, l'inferior dret i, finalment, l'inferior esquerre. El valor inicial del lliscador és de 24, fet que genera el codi border-radius: 24px;.
Diferències entre píxels i percentatges
L'elecció de la unitat de mesura determina com es comporta l'arrodoniment quan canvia la mida de l'element:
- Píxels (px): Defineixen un radi de curvatura fix. El cantó s'arrodoneix exactament la quantitat de píxels indicada, independentment de les dimensions de la caixa.
- Percentatge (%): Defineixen un radi relatiu a les dimensions de la caixa. El percentatge horitzontal es calcula respecte a l'amplada de l'element, mentre que el percentatge vertical es calcula respecte a l'alçada. Aquesta proporcionalitat és clau en el disseny adaptatiu, ja que la curvatura s'ajusta dinàmicament si l'element canvia de mida.
El mode el·líptic i la sintaxi de barra inclinada
Quan els cantons el·líptics estan desactivats, cada cantó es comporta com un quart de cercle perfecte definit per un sol radi. En activar el mode el·líptic, cada cantó passa a tenir dos radis independents: un d'horitzontal i un de vertical. Aquesta separació permet crear corbes asimètriques i formes orgàniques més suaus, conegudes com a "gotes".
En l'àmbit del codi, el mode el·líptic utilitza la sintaxi de barra inclinada (/) de CSS. Aquesta estructura separa els radis horitzontals dels verticals. Per exemple, una configuració el·líptica s'escriu amb els valors horitzontals primer, seguits d'una barra inclinada i els valors verticals corresponents. Si es desactiva aquest mode i els cantons tornen a ser rodons, el generador prescindeix de la barra inclinada i torna a la forma curta de la sintaxi amb un sol valor per cantó.
Creació de cercles perfectes i botons en forma de píndola
El generador facilita la creació de geometries habituals en el disseny de pàgines web mitjançant regles de comportament específiques:
- Cercle perfecte: Per transformar un element quadrat en un cercle perfecte, cal enllaçar tots els cantons, seleccionar la unitat de percentatge (%) i establir el valor al 50%. El preajustament "Cercle" aplica automàticament aquesta configuració.
- Botó en forma de píndola: Per dissenyar un botó amb els extrems completament arrodonits que mantingui la forma independentment de la seva amplada, s'han d'utilitzar píxels (px). Arrossegant el lliscador d'un cantó més enllà de la meitat de l'alçada de la caixa, els costats es mantindran totalment arrodonits sense deformar-se, encara que l'element s'estiri horitzontalment.
Ús de preajustaments i aplicació del codi
L'eina inclou cinc botons de preajustament que configuren instantàniament els lliscadors per obtenir formes geomètriques concretes:
- Sencer: Restableix els cantons a un angle recte sense curvatura.
- Arrodonit: Aplica una curvatura suau estàndard als cantons.
- Cercle: Configura tots els cantons al 50% per obtenir una forma circular sobre una base quadrada.
- Gota: Activa el mode el·líptic amb valors asimètrics per crear una silueta orgànica.
- Fulla: Combina cantons oposats totalment arrodonits amb cantons oposats completament rectes.
Un cop obtinguda la forma desitjada a la vista prèvia, el codi CSS generat es mostra a la secció inferior. El botó "Copiar CSS" permet copiar el fragment de codi directament al portapapers per enganxar-lo al fitxer d'estils del vostre projecte web.
Processament local i privadesa
El funcionament d'aquest generador respecta la privadesa de les dades de l'usuari. Cada cantó es dibuixa directament al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo, garantint que tot el processament de disseny i generació de codi es realitza de manera local al dispositiu de l'usuari.
Preguntes freqüents
Com funcionen els quatre cantons i la diferència entre px i %?
Els quatre lliscadors es corresponen, en el sentit de les agulles del rellotge, amb els cantons superior esquerre, superior dret, inferior dret i inferior esquerre. En píxels, un cantó s'arrodoneix una quantitat fixa; en percentatge, s'arrodoneix en relació amb la caixa (un percentatge horitzontal segueix l'amplada i un de vertical segueix l'alçada), de manera que el 50% converteix un quadrat en un cercle.
Què fa el mode el·líptic?
Si està desactivat, cada cantó és un quart de cercle amb un sol radi. Si l'activa, cada cantó tindrà un radi horitzontal i un de vertical independents, que és com es creen formes orgàniques i suaus de tipus "gota". El generador escriu la sintaxi de barra inclinada amb dos valors i torna a la forma curta quan els cantons tornen a ser rodons.
Com puc fer un cercle perfecte o una píndola?
Enllaci els cantons, canviï a percentatge i defineixi un 50%: un quadrat es convertirà en un cercle. Per a un botó en forma de píndola, mantingui els píxels i arrossegui un cantó més enllà de la meitat de l'alçada del botó; els costats es mantindran completament arrodonits amb qualsevol amplada. El preajust Cercle configura el primer cas amb un sol clic.