Cómo crear círculos con CSS

CSS

Si exploramos el gran potencial que nos ofrece CSS, seguramente podremos descubrir un mundo de posibilidades para dar estilos a los elementos de nuestras páginas HTML.

Mediante CSS3 es posible crear una gran variedad de formas, aplicando algunos trucos muy interesantes. En este artículo analizaremos como crear círculos empleando border-radius.

La propiedad border-radius

Con la llegada de CSS3, quienes llevamos años en el mundo del diseño y desarrollo Web, hemos encontramos una variada gama de características nuevas que nos facilitan el trabajo.

Entre las opciones más simples y potentes, encontramos la propiedad border-radius. Tal como su nombre en inglés lo indica, nos sirve para redondear los bordes de las cajas.

Claro que si recurrimos a nuestra creatividad, podremos crear también círculos, aplicando los valores adecuados.

Por ejemplo, para crear un círculo rojo de 100px de diámetro, podríamos recurrir a la siguiente código de CSS:

#circulo{width:100px; height:100px; background:red; border-radius:50px;}

Como podemos ver en el código, si utilizamos un border-radius de la mitad del alto/ancho de un cuadrado, podremos obtener un círculo. Si deseamos profundizar como establecer las medidas de la caja, podremos leer el artículo: Cómo asignar el tamaño a un elemento con CSS.

En este ejemplo hemos trabajado con un fondo de color sólido, pero también es posible aplicar un gradient. Para este caso podemos recurrir a una herramienta que nos ayuda, como un Generador de Gradientes con CSS3.

Otra alternativa al aplicar un fondo con CSS, además de color o gradient, también puede ser usar una o varias imágenes.

Al crear caja, que podemos transformar en círculos, es importante señalar que también podremos anidar contenido de texto. Y para ajustar su posición interior es recomendable recurrir, desde CSS, a flex-box.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.