¿Qué es lo primero que notas cuando navegas por algunos de tus sitios favoritos? Tal vez primero las imágenes, luego los colores y la tipografía. ¿Qué pasa con las formas?
Las formas están en todas partes en el diseño web. Los más comunes son los cuadrados y los rectángulos porque maximizan el espacio en los dispositivos rectangulares en los que se muestran (computadoras, tabletas, dispositivos móviles e incluso muestras inteligentes). Pero si desea que su sitio se destaque y capte la atención de sus visitantes, puede intentar usar círculos. Aquí hay un ejemplo ridículamente genial de un diseño circular:
Ahora que comprendemos algunos de los beneficios de incluir círculos en el diseño de su sitio, echemos un vistazo a cómo crear un círculo, un div circular y un óvalo usando CSS.
Cómo hacer un círculo perfecto con un radio de borde en CSS
- Agregue un elemento HTML.
- Asígnele el mismo ancho y alto.
- Establezca la propiedad border-radius de CSS en 50%.
Paso 1: agregue el elemento HTML.
Suponga que desea crear un círculo perfecto a partir de una imagen. En este caso, agregue un elemento de imagen con el atributo alt y fuente en HTML.
Aquí hay un ejemplo:
<img src="https://images.unsplash.com/photo-1622322062536-895d869b09ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="distressed Italian wall in pink and grey hues">
Paso 2: asígnele el mismo ancho y alto.
Para que un elemento forme un círculo perfecto, debe tener un ancho y una altura constantes e iguales. Así que establezca el ancho y la altura en el mismo valor en CSS.
Paso 3: establezca la propiedad border-radius de CSS en 50 %.
La propiedad border-radius se puede usar para crear rectángulos con bordes redondeados, elipses y otras formas, incluido un círculo perfecto. Para crear un círculo perfecto, establezca el valor de la propiedad border-radius en 50%.
Aquí está el CSS y el resultado:
ver la pluma Elipse de Christina Perricone (@hubspot) en CódigoPen.
Cómo crear un círculo Div usando CSS Border-Radius
Para crear un div CSS circular, siga los mismos pasos que arriba. Agregue un div en HTML. Luego establezca el ancho y la altura del elemento en el mismo valor. Finalmente, establezca el valor de la propiedad border-radius en 50%.
Aquí hay un ejemplo:
ver la pluma Cómo crear un círculo Div usando CSS Border-Radius de Christina Perricone (@hubspot) en CódigoPen.
Tenga en cuenta que el div se ha convertido en un contenedor flexible para que pueda poner texto en el div y centrarlo con las propiedades align-items y allow-content.
Para obtener más información sobre este proceso, consulte 11 formas de centrar un div o texto en un div en CSS.
Cómo hacer un óvalo con un radio de borde en CSS
Crear un óvalo es casi el mismo proceso que crear un círculo perfecto. Agregas un elemento HTML. Pero en lugar de asignarle el mismo ancho y alto, configúrelos para que sean diferentes. Luego establezca la propiedad border-radius de CSS en 50%. El resultado es un óvalo.
Aquí hay un ejemplo:
ver la pluma Cómo hacer un óvalo con un radio de borde en CSS de Christina Perricone (@hubspot) en CódigoPen.
Dibujar círculos en CSS
Crear y agregar círculos a su sitio web o aplicación puede ayudar a captar la atención de sus visitantes y mejorar su diseño. ¿La mejor parte? Puede crear círculos fácilmente con la propiedad border-radius de CSS. Para crear esta forma única, solo necesita conocer los conceptos básicos de HTML y CSS.
