Creating CSS Shapes with Emoji

CSS Shapes empowerment: Create cool text wrapping effects with emojis! The CSS Shapes standard allows us to create geometric shapes for floating elements, allowing inline content (usually text) around these elements to surround them along the specified shape. This shaped text stream is very practical in editing designs or text-intensive designs, and can effectively alleviate the visual fatigue caused by large segments of text.

Here's how to create compelling text wrapping effects with CSS Shapes and emojis: First, we convert the emojis to images, then float them and apply the CSS shape.

We will use the following three steps to create an emoji image:

1. Create clipping paths for emoji shapes in SVG.
2. Convert it to DataURL by URL encoding and prefixing the SVG code to data:image/svg xml .
3. Use DataURL as url() value of the element's background-image attribute.

Here is the SVG code to create the clipping path of the emoji shape:

<svg height="150px" width="150px" xmlns="http://www.w3.org/2000/svg"><clippath id="emojiClipPath"><text font-size="130px" x="0" y="130px"> ?</text></clippath><text clip-path="url(#emojiClipPath)" font-size="130px" x="0" y="130px"> ?</text></svg>

This code passes<text></text> Element and emoji characters create a<clippath></clippath> . A clipping path defines the outline of a visible area that is only visible when the clipping path is applied to an element. In our code, the outline is the shape of the emoji character. Then, use clip-path attribute, the same emoji character<text></text> The element refers to the clipping path of the emoji, creating a clipping effect of the emoji shape.

Next, we convert the SVG code to DataURL. You can do URL encoding manually or use online tools (for example: [Insert a URL encoding tool link here]) to do this.

Here is the generated DataURL used as url() value of background-image attribute of the .emoji element in CSS:

 .emoji {
  background: url("data:image/svg xml, <svg height="150px" width="150px" xmlns="http://www.w3.org/2000/svg"><clippath id="emojiClipPath"><text font-size="130px" x="0" y="130px"> ?</text></clippath><text clip-path="url(#emojiClipPath)" font-size="130px" x="0" y="130px"> ?</text></svg> ");
}

If we stop here and specify the size for the .emoji element, we will see the emoji display as the background image.

Convert it to a CSS shape

We can do this in two steps:

1. Float elements containing emoji background.
2. Use DataURL as url() value of the element shape-outside attribute.

 .emoji {
  --image-url: url("data:image/svg xml, <svg height="150px" width="150px" xmlns="http://www.w3.org/2000/svg"><clippath id="emojiClipPath"><text font-size="130px" x="0" y="130px"> ?</text></clippath><text clip-path="url(#emojiClipPath)" font-size="130px" x="0" y="130px"> ?</text></svg> ");
  background: var(--image-url);
  float: left;
  height: 150px;
  shape-outside: var(--image-url);
  width: 150px;
  margin-left: -6px; 
}

We put the DataURL in the custom property --image-url so that we can easily reference it in background and shape-outside properties without having to repeat the lengthy encoded SVG strings multiple times.

Now any inline content close to the floating .emoji element will be surrounded by the shape of the emoji. We can use margin or shape-margin to further adjust the spacing.

If you want a color blocky emoji shape, you can apply the clipping path to the SVG<rect></rect> Elements to implement:

<svg height="150px" width="150px" xmlns="http://www.w3.org/2000/svg"><clippath id="emojiClipPath"><text font-size="130px" x="0" y="130px"> ? </text></clippath><rect clip-path="url(#emojiClipPath)" fill="green" height="150px" width="150px" x="0" y="0"></rect></svg>

The same technique applies to letters! Note that Firefox does not always render emoji shapes. We can solve this problem by updating the SVG code. (The next steps are the same as the original text, but for the sake of simplicity, it is omitted here.)

The above is the detailed content of Creating CSS Shapes with Emoji. For more information, please follow other related articles on the PHP Chinese website!