Creando formas CSS con Emoji

Índice
  1. Hagamos una imagen emoji.
  2. Ahora convertimos esto en una forma CSS.
  3. Ahora necesitamos centrar la forma.

CSS Shapes es un estándar que nos permite crear formas geométricas sobre elementos flotantes que hacen que el contenido en línea (generalmente texto) alrededor de esos elementos se ajuste a las formas especificadas.

Un flujo de texto con esta forma queda bien en diseños editoriales o diseños que trabajan con contenidos con mucho texto para agregar algo de alivio visual a los fragmentos de texto.

A continuación se muestra un ejemplo de CSS Shape en uso:

La shape-outsidepropiedad especifica la forma de un área flotante utilizando cualquiera de las funciones de forma básica ( circle(), ellipse()o polygon()) inset()o una imagen, como esta:

El contenido en línea se ajusta a lo largo del lado derecho de un elemento flotante a la izquierda y del lado izquierdo de un elemento flotante a la derecha.

En esta publicación, usaremos el concepto de formas CSS con emoji para crear interesantes efectos de ajuste de texto. Las imágenes son rectángulos. Muchas de las formas que dibujamos en CSS también son cuadradas o al menos se limitan a formas estándar. ¡Los emoji, por otro lado, ofrecen excelentes oportunidades para salirse de la caja!

Así es como lo haremos: primero crearemos una imagen a partir de un emoji, luego la flotaremos y le aplicaremos una forma CSS.

Ya cubrió varias formas de convertir emojis en imágenes en esta publicación sobre patrones de fondo creativos. En eso dije que no podía descubrir cómo usar SVG textpara hacer la conversión, pero ya lo descubrió y te mostraré cómo en esta publicación. No es necesario haber leído ese artículo para que éste tenga sentido, pero está ahí si quieres verlo.

Hagamos una imagen emoji.

Los tres pasos que estamos usando para crear una imagen emoji son:

  • Crea un recorte con forma de emoji en SVG
  • Convierta el código SVG a un DataURL codificando la URL y anteponiéndolo condata:image/svg+xml
  • Utilice DataURL como el url()valor de un elemento background-image.

Aquí está el código SVG que crea el recorte con forma de emoji:

svg width='150px' height='150px'    clipPath id='emojiClipPath'     text x='0' y='130px' font-size='130px' /text   /clipPath   text x='0' y='130px' font-size='130px' clip-path='url(#emojiClipPath)' /text/svg 

Lo que sucede aquí es que proporcionamos un textelemento con un carácter emoji para un archivo clipPath. Un trazado de recorte es un contorno de una región que se mantendrá visible cuando ese trazado de recorte se aplica a un elemento. En nuestro código, ese contorno es la forma del carácter emoji.

textLuego, un elemento que lleva el mismo carácter emoji hace referencia a la ruta del clip del emoji, usando su clip-pathpropiedad, creando un recorte con la forma del emoji.

Ahora convertimos el código SVG a DataURL. Puede codificarlo en URL a mano o utilizar herramientas en línea (¡como ésta!) que pueden hacerlo por usted.

Aquí está el DataURL resultante, utilizado como url()valor para la imagen de fondo de un .emojielemento en CSS:

.emoji {  background: url("data:image/svg+xml,svg width='150px' height='150px'  clipPath id='emojiClipPath' text x='0' y='130px'  font-size='130px' /text /clipPath text x='0' y='130px' font-size='130px' clip-path='url(%23emojiClipPath)' /text/svg");}

Si nos detuviéramos aquí y le diésemos las .emojidimensiones al elemento, veríamos nuestro personaje mostrado como imagen de fondo:

Ahora convertimos esto en una forma CSS.

Esto lo podemos hacer en dos pasos:

  • Haga flotar el elemento con el fondo emoji.
  • Utilice DataURL como valor para la propiedad url()del elementoshape-outside
.emoji {  --image-url: url("data:image/svg+xml,svg width='150px' height='150px'  clipPath id='emojiClipPath' text x='0' y='130px'  font-size='130px' /text /clipPath text x='0' y='130px'  font-size='130px' clip-path='url(#emojiClipPath)' /text/svg");  background: var(--image-url);  float: left;  height: 150px;  shape-outside: var(--image-url);  width: 150px;  margin-left: -6px; }    

Colocamos DataURL en una propiedad personalizada, --image-urlpor lo que podemos consultarlo fácilmente tanto en las propiedades como backgrounden las shape-outsidepropiedades sin repetir esa gran cadena de SVG codificado varias veces.

Ahora, cualquier contenido en línea cerca del .emojielemento flotante fluirá con la forma del emoji. Podemos ajustar las cosas aún más con margino shape-marginagregar espacio alrededor de la forma.

Si deseas una forma de emoji con bloques de color, puedes hacerlo aplicando la ruta del clip a un rectelemento en el SVG:

svg width='150px' height='150px'      clipPath id='emojiClipPath'         text x='0' y='130px' font-size='130px' /text     /clipPath     rect x='0' y='0' fill='green' width='150px' height='150px' clip-path='url(#emojiClipPath)'/ /svg 

¡La misma técnica funcionará con letras!

Solo tenga en cuenta que Firefox no siempre muestra la forma del emoji. Podemos solucionarlo actualizando el código SVG.

svg  width='150px' height='150px'  foreignObject width='150px' height='150px'    div  style='width:150px;height:150px;line-height:150px;text-align:center;color:transparent;text-shadow: 0 0 black;font-size:130px;' /div  /foreignObject/svg

Esto crea una forma de emoji de color de bloque al hacer que el emoji sea transparente y darle text-shadowCSS en línea. Luego, el elemento divque contiene el emoji y el estilo CSS en línea se inserta en un foreignObjectelemento de SVG para que el divcódigo HTML pueda usarse dentro del espacio de nombres SVG. El resto del código de esta técnica es el mismo que el anterior.

Ahora necesitamos centrar la forma.

Dado que las formas CSS solo se pueden aplicar a elementos flotantes, el texto fluye hacia la derecha o hacia la izquierda del elemento dependiendo de en qué lado esté flotando. Para centrar el elemento y la forma, haremos lo siguiente:

  • Divide el emoji por la mitad
  • Haga flotar la mitad izquierda del emoji hacia la derecha y la mitad derecha hacia la izquierda.
  • ¡Junte ambos lados!

Una advertencia para esta estrategia: si utiliza oraciones consecutivas en el diseño, deberá alinear manualmente las letras en ambos lados.

Esto es lo que pretendemos hacer:

Primero, vemos el HTML para los lados izquierdo y derecho del diseño. Son idénticos.

div  pA C G T A !-- more characters -- C G T A C G T A C G T span/spanA C G !-- more characters -- C G T /p  pA C G T A !-- more characters -- C G T A C G T A C G T span/spanA C G !-- more characters -- C G T /p/div

p#leftSidey p#rightSideel interior #designestán dispuestos uno al lado del otro en una cuadrícula.

#design {  border-radius: 50%; /* A circle */  box-shadow: 6px 6px 20px silver;  display: grid;   grid: "1fr 1fr"; /* A grid with two columns */  overflow: hidden;  width: 400px; height: 400px;}

Aquí está el CSS para el emoji:

span.emoji {  filter: drop-shadow(15px 15px 5px green);  shape-margin: 10px;  width: 75px;   height: 150px;}/* Left half of the emoji */p#leftSidespan.emoji {  --image-url:url("data:image/svg+xml,svg width='150px' height='150px'  clipPath id='emojiClipPath' text x='0' y='130px'  font-size='130px' /text /clipPath rect x='0' y='0' width='150px' height='150px' clip-path='url(%23emojiClipPath)'//svg");  background-image: var(--image-url);  float: right;  shape-outside: var(--image-url);}/* Right half of the emoji */p#rightSidespan.emoji {  --image-url:url("data:image/svg+xml,svg width='150px' height='150px'  clipPath id='emojiClipPath' text x='-75px' y='130px'  font-size='130px' /text /clipPath rect x='0' y='0' width='150px' height='150px' clip-path='url(%23emojiClipPath)'//svg");  background-image: var(--image-url);  float: left;  shape-outside: var(--image-url);}

El ancho de los spanelementos que contienen las imágenes emoji ( span.emoji) es de 75 px, mientras que el ancho de las imágenes emoji SVG es de 150 px. Esto recorta automáticamente la imagen por la mitad cuando se muestra dentro de los tramos.

En el lado derecho del diseño, con el emoji flotante a la izquierda ( p#rightSidespan.emoji), necesitamos mover el emoji hasta la mitad hacia la izquierda para mostrar la mitad derecha, de modo que el xvalor en textDataURL a 75 px. Esa es la única diferencia entre los DataURL de los lados izquierdo y derecho del diseño.

Aquí está ese resultado una vez más:


¡Eso es todo! Puedes probar el método anterior para centrar cualquier forma CSS siempre que puedas dividir el elemento en dos y volver a juntar las mitades con CSS.

SUSCRÍBETE A NUESTRO BOLETÍN 
No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.

Deja un comentario

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

Subir

Este sitio web utiliza cookies para mejorar tu experiencia mientras navegas por él. Este sitio web utiliza cookies para mejorar tu experiencia de usuario. Al continuar navegando, aceptas su uso. Mas informacion