¿Quieres poner texto dentro de la forma de un círculo con HTML y CSS? Eso es una locura, ¿verdad?
¡Realmente no! Gracias a shape-outside y algunos 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 recuento de caracteres, el recuento de palabras, las variaciones de tipografía, el tamaño de la fuente, el formato de la fuente y los requisitos de respuesta, por nombrar algunos. Un tamaño, no sirve para todos aquí. Pero bueno, hagámoslo de todos modos.
Este es el objetivo: queremos mostrar un <blockquote> y atribución del 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 requerirá archivos adicionales y mantiene el marcado HTML absolutamente limpio.
Esto es por lo que nos esforzamos:
El shape-outside La función no es compatible con Internet Explorer o Microsoft Edge 18 y versiones anteriores en el momento de redactar este artículo.
Primero, el HTML
Terminaremos necesitando un elemento contenedor para lograr esto, así que usemos la semántica <blockquote> como el elemento interior. La envoltura exterior puede ser un div:
<div class="quote-wrapper">
<blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
<p>Experience 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 establecer la cotización en sí misma en un <p> y el nombre del autor dentro de un <footer>. Tenemos nombres de clases para los ganchos de estilo CSS que necesitaremos.
A continuación, algo de CSS básico
Comencemos con la envoltura div. Primero, estableceremos el tamaño cuadrado mínimo (sensible) en 300px para que 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 llene todo el envoltorio y simule una forma de círculo con un fondo degradado radial. (Eso es correcto, no estamos usando border-radius en 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% se ve más suave.
Observe que el borde de la derecha es mucho más suave que el borde de la izquierda.
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ñemos 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 la publicación de este artículo, otros han comentado a continuación sobre una técnica alternativa que utiliza radial-gradient como el shape-outside. Esto produce una curva semicircular más suave sobre polígonos.
Usemos el blockquote ::before pseudo-elemento para crear nuestra forma. Aquí es donde el shape-outside La propiedad entra en juego. Trazamos el polygon() coordenadas y colóquelo 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 del polígono del editor de rutas y las líneas de conexión también son azules. Estamos cambiando este color temporalmente para 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-outside editor de ruta. Haga clic en la forma del polígono en el inspector para ver la forma activa en la ventana del navegador. ¡Felicitaciones al equipo de desarrollo de Mozilla por crear una interfaz genial!
La herramienta de edición de formas de Firefox también funciona para clip-path y <basic-shape> valores.
Esto es lo que tenemos en este punto:
Esos puntos a lo largo de la forma son de la herramienta de edición de Firefox.
Podemos hacer lo mismo con el párrafo ::before pseudo-elemento. Usamos el shape-outside para hacer el mismo polígono, al revés, luego 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? Desbordó el <blockquote> (donde está el fondo de color circular), por lo que no podemos ver ese texto blanco sobre un fondo blanco.
Estilo del pie de página
Ahora podemos diseñar el <footer> y 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í necesita un estilo de tal manera que el número de palabras y caracteres trabajen dentro de la forma. Usé estas reglas de CSS para ayudar a que encajara bien:
font-sizeshape-margin(tenemos dos áreas de exclusión para ajustar)line-heightletter-spacingfont-weightfont-stylemin-widthymin-height(al tamaño de la.quote-wrapperenvase)
Añadiendo la comilla para un poco de floritura
¿Viste las comillas gigantes en la demostración original? Eso es lo que queremos hacer a continuación.
Aprovecharemos el ::before pseudo-elemento para .quote-wrapper. Una vez más, esto requerirá una buena cantidad de manipulación para que se vea bien. encontré line-height tiene 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;
}.dumb-quotes :: before {content: ” 0022″; } .dumb-quotes :: after {content: ” 0022″; }
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 codificar.
Manejo de estilos receptivos
Probablemente deberíamos hacer nuestra cotización más grande en pantallas más grandes. Estoy estableciendo un punto de interrupción en 850px, pero es posible que desee 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 el texto HTML dentro de una forma circular usando una combinación de técnicas CSS antiguas y nuevas para hacer un atractivo <blockquote> que llama la atención. Y logramos nuestro objetivo de visualización sin dependencias adicionales, sin dejar de mantener 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 para shape-inside.