Usar CSS para establecer texto dentro de un círculo

¿Quieres establecer algo de texto dentro de la forma de un círculo con HTML y CSS? Esa es una locura, ¿verdad?

¡No precisamente! Gracias a shape-outsidealgunos trucos de CSS puro es posible hacer exactamente eso.

Sin embargo, esta puede ser una opción de diseño complicada. Tenemos que tener en cuenta muchas cosas diferentes, como el número de caracteres, el número de palabras, las variaciones tipográficas, el tamaño y el formato de la fuente y los requisitos de respuesta, por nombrar algunos. Talla única, no sirve para todos aquí. Pero bueno, hagámoslo de todos modos.

Este es el objetivo: queremos mostrar una blockquoteatribución de autor (nombre) dentro de una forma de círculo. También queremos que el diseño sea lo más flexible posible. Este diseño no requiere ningún archivo adicional y mantiene el marcado HTML impecablemente limpio.

Esto es por lo que nos esforzamos:

La shape-outsidefunción no es compatible con Internet Explorer o Microsoft Edge 18 y versiones anteriores al momento de escribir este artículo.

Primero, el HTML

Terminaremos necesitando un elemento contenedor para lograr esto, así que usemos la semántica blockquotecomo elemento interno. El contenedor exterior puede ser un div:

div  blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/"    pExperience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal./p    footer– Jesse James Garrett/footer  /blockquote/div

Si está interesado en profundizar en el HTML de las citas, está de suerte. Vamos a colocar la cita en sí en a py el nombre del autor dentro de a footer. Tenemos nombres de clases para los ganchos de estilo CSS que necesitaremos.

A continuación, algo de CSS básico.

Comencemos con el contenedor div. Primero, estableceremos el tamaño cuadrado mínimo (responsive) en 300 px para quepa en pantallas más pequeñas. luego, agregaremos posicionamiento relativo (porque lo necesitaremos más adelante).

.quote-wrapper {  height: 300px;  position: relative;  width: 300px;}

Ahora haremos que la cita en bloque lleno todo el envoltorio y simularemos una forma de círculo con un fondo degradado radial. (Así es, no lo usaremos border-radiusen este ejemplo).

.text {  background: radial-gradient(    ellipse at center,    rgba(0, 128, 172, 1) 0%,    rgba(0, 128, 172, 1) 70%,    rgba(0, 128, 172, 0) 70.3%  );  height: 100%;  width: 100%;}

Una cosa a tener en cuenta es que el 70% muestra un borde mucho más áspero. Agregué manualmente incrementos porcentuales muy pequeños y descubrí que el 70,3% parece el más suave.

Ahora tenemos nuestro círculo base en su lugar. Agregue estas reglas de estilo adicionales a .text.

.text {  color: white;  position: relative;  margin: 0;}

Esto es lo que tenemos hasta ahora:

Darle al texto el tratamiento CSS

Primero diseñamos el párrafo:

.text p {  font-size: 21px;  font-style: italic;  height: 100%;  line-height: 1.25;  padding: 0;  text-align: center;  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);}

Desde que se publicó este artículo, otras personas han comentado a continuación sobre una técnica alternativa que utiliza radial-gradientcomo shape-outside. Esto produce una curva semicircular más suave sobre los polígonos.

Usemos el ::beforepseudoelemento de blockquote para crear nuestra forma. Aquí es donde shape-outsideentra en juego la propiedad. Trazamos las polygon()coordenadas y las flotamos hacia la izquierda para que el texto se ajuste dentro de la forma.

.text::before {  content: "";  float: left;  height: 100%;  width: 50%;  shape-outside: polygon(    0 0,    98% 0,    50% 6%,    23.4% 17.3%,    6% 32.6%,    0 50%,    6% 65.6%,    23.4% 82.7%,    50% 94%,    98% 100%,    0 100%  );  shape-margin: 7%;}

Cambiemos el color de fondo radial a rojo. Los puntos poligonales y las líneas de conexión del editor de rutas también son azules. Estamos cambiando este color temporalmente para lograr un mayor contraste con la herramienta de edición.

background: radial-gradient(  ellipse at center,  rgba(210, 20, 20, 1) 0%,  rgba(210, 20, 20, 1) 70%,  rgba(210, 20, 20, 0) 70.3%);

Me gustan las herramientas de desarrollo de Firefox porque tiene funciones muy útiles como un shape-outsideeditor de rutas. Haga clic en la forma del polígono en el inspector para ver la forma activa en la ventana del navegador. ¡Un gran aplauso para el equipo de desarrollo de Mozilla por crear una interfaz genial!

La herramienta de edición de formas de Firefox también funciona con valores clip-pathy basic-shape.

Esto es lo que tenemos en este momento:

Podemos hacer lo mismo con el ::beforepseudoelemento del párrafo. Usamos shape-outsidepara hacer el mismo polígono, al revés, luego lo hacemos flotar hacia la derecha.

.text p::before {  content: "";  float: right;  height: 100%;  width: 50%;  shape-outside: polygon(    2% 0%,    100% 0%,    100% 100%,    2% 100%,    50% 94%,    76.6% 82.7%,    94% 65.6%,    100% 50%,    94% 32.6%,    76.6% 17.3%,    50% 6%    );  shape-margin: 7%;}

Se ve bien, pero ¿a dónde fue el pie de página? Se desbordó blockquote(donde está el fondo circular de color), por lo que no podemos ver ese texto blanco sobre un fondo blanco.

Aplicar estilo al pie de página

Ahora podemos diseñarlo footery darle una posición absoluta para volver a colocarlo en la parte superior del círculo.

.quote-wrapper blockquote footer {  bottom: 25px;  font-size: 17px;  font-style: italic;  position: absolute;  text-align: center;  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);  width: 100%;}

Nuevamente, siéntase libre de cambiar el color de fondo para adaptarlo a sus necesidades.

Aquí es donde entra la parte complicada. El texto en sí debe tener un estilo que permita que la cantidad de palabras y caracteres funcionen dentro de la forma. Utilicé estas reglas CSS para ayudar a que encajara bien:

• font-size
• shape-margin(tenemos dos áreas de exclusión para ajustar)
• line-height
• letter-spacing
• font-weight
• font-style
• min-widthy min-height(al tamaño del .quote-wrappercontenedor)

Agregar las comillas para algunas florituras

¿Viste las comillas gigantes en la demostración original? Eso es lo que queremos hacer a continuación.

Aprovecharemos el ::beforepseudoelemento para .quote-wrapper. Una vez más, esto requerirá bastantes retoques para que se vea bien. Descubrí que line-heighttiene un efecto enorme en la posición vertical de la marca.

.quote-wrapper::before {  content: "201C";  color: #ccc;  font-family: sans-serif, serif;  font-size: 270px;  height: 82px;  line-height: 1;  opacity: .9;  position: absolute;  top: -48px;  left: 0;  z-index: 1;}

En realidad, existe una diferencia entre las comillas rizadas (“inteligentes”) y las rectas (tontas). Sugeriría usar comillas rizadas para el diálogo y comillas rectas para la codificación.

Manejo de estilos responsivos

Probablemente deberíamos ampliar nuestra cotización en pantallas más grandes. Estoy estableciendo un punto de interrupción en 850 px, pero es posible que quieras usar algo diferente.

@media (min-width: 850px) {  .quote-wrapper {    height: 370px;    width: 370px;  }  .quote-wrapper::before {    font-size: 300px;  }  .text p {    font-size: 26px;  }  .quote-wrapper blockquote footer {    bottom: 32px;  }}

¡Ahí lo tenemos!

Colocamos texto HTML dentro de una forma circular usando una combinación de técnicas CSS nuevas y antiguas para crear un atractivo blockquoteque llame la atención. Y logramos nuestro objetivo de visualización sin dependencias adicionales, manteniendo el marcado HTML limpio y semántico.

Espero que este artículo te anime a explorar nuevas posibilidades de diseño con shape-outside. Estén atentos a shape-inside.