Create irregular graphic text around using CSS 3

Objective

CSS's technology for creating complex graphics is about to be widely supported and applied to actual projects. The purpose of this article is to open up the tip of the iceberg for everyone. I hope this article will allow you to have a preliminary understanding of irregular graphics.

Now, we can already use CSS 3 common irregular complex graphics (click on the link to view) as shown in:

Graphics created with CSS cannot have text built-in or text wrapping effect. Therefore, how to achieve irregular graphics and text complex layout has become a hot topic.

Today we will introduce how to achieve this effect. In this article, we will explain how to use CSS to create irregular shapes and make irregular text layouts. Once you've learned how to create irregular graphics, you can create an aesthetic CSS page that is created by using the technology: Alice in Wonderland.

Note: This is the latest technology of CSS, so the browser version requires a high. If you need to see an online sample you need to make sure that the browser supports this CSS technology. In this article I will also provide some effects to see the effects.

declaring Graphics

We need to declare irregular graphs using the Shape-outside property. Currently, the Shape-outside property can only be applied to floating elements, and can only be applied to block-level elements. If you need to use these properties on non-block-level elements, you must first declare the elements as block-level.

There are three ways to assign shape-* values: Automatic, basic graphics, or image links. If set to automatic, floating elements will continue to be rendered as a traditional box model. If you are not familiar with the box model, please refer to the CSS box model, which is the basis for reading this article.

Drawing methods include: Rectangle, Inset-rectangle, Circle, ellipse, or polygon methods. You can see the detailed description through the link.

If the property is set to a picture link, the browser will draw the graphic shape according to the image's alpha channel.

create a coordinate system on an element

After declaring the CSS graphic, we first need to create the coordinate system that will be used to draw the graphic.

The coordinate system is necessary because the graph needs to be drawn based on the lattice on this coordinate system. The Shape-* property is based on the box model, in order to enable it to function, it is necessary to specify the size of the box, limit the irregular shape within the box, it will also be used to create the drawing coordinate system, the starting point of the coordinate system is located in the upper left corner of the box. If there is no explicit width and height declaration, the shape-* property will not function.

set the background color of a custom graphic

With custom graphics applied, its box model still exists, and other traditional styling settings will be used for box model scopes. For example, in the following example,

We just want to create a floating circle and set the background color of the circle. According to the normal thinking, the effect should be as follows:

However, when you set the background color of the box, you will find that the results are different from the expected effect:

In the We see that the background color is applied to the box model range instead of the circle we envisioned.

So, how should we set the background color of the circle? This leads to a new CSS style: Clip-path. The Clip-path is used to limit the scope of the current style. In the example below you will see how it is used.

Reminders

Now, the Shape-outside property is only scoped to the element that is floating, and is limited to applying on block-level elements only. Using the elements defined by these properties, the text around them will depend on the shape arrangement of the shapes. The future CSS shape will not only limit and apply to floating elements, we will not only in the text outside the graphics, we can completely define custom graphics within it, to achieve the following effect:

instance-use Shape-outside to create floating text that surrounds the custom shape

Let's start with a simple example. In the example we will create a custom graphic, and the text flow is built in, and the end is as follows (the example download link is provided at the end of the article):

For example, we have two containers for setting custom shapes and nested text content. The code is as follows:

<div class= "Container" >  <div class= "shaped" ></div>  <div class= "Content" >    < H1><span>la</span> Tour <br/>Eiffel
First we need to declare the div node of the floating area and set the size with a fixed value. The code is as follows:
. container{  Overflow:hidden;  HEIGHT:100VH;  WIDTH:100VW;}. shaped{  Float:left;  HEIGHT:100VH;  WIDTH:40VW;  Float:right;  Background:black URL (.. /images/eiffel.jpg) center top no-repeat;  Background-size:cover;}
Now that the coordinate system has been created successfully, we are going to draw the graph next. There are two ways to draw a graphic:
UsePolygon ()
We can use the polygon () method to calculate the range of graphics. This method obtains multiple points from the coordinate system for drawing graphics, where each point is positioned by the (x, y) value. In the example we are going to create a very simple polygon, as shown in:
The unit of punctuation can be a fixed value, or a percentage. In this example we will set the lattice position as a percentage. Next we need to apply this style on the floating element.
. shaped{/*...*/  Shape-outside:polygon (0 0, 100% 0, 100% 100%,30% 100%);  shape-margin:20px;}
After applying the above style, an irregular shape-trapezoid is produced.
You can see that the Shape-margin property is used in your code to set the margins between the graphic and the text content.
Next you need to add a background map, you need to note that after adding the background map, it will be applied to the box model, so far the effect is as follows:
So, to achieve the desired effect, we need to set the Clip-path property and set its scope to be the same as the Shape-outside property.
. shaped{/*...*/  Clip-path:polygon (0 0, 100% 0, 100% 100%,30% 100%);}
Now, we have achieved the goal effect through the polygon () method.
Use picture link
We can also create irregular shapes by images (strictly speaking a picture with a bright area), and generate irregular shapes based on the "alpha channel" of the image.
For example, replace the polygon () Declaration method. We can set the Shape-outside property value to the picture Uri, and the browser will automatically draw the irregular shape from the picture.
The transparent part of the picture is declared as a floating part of the text element. The remainder is declared as an irregular shape. The code is as follows:
. shaped{/*...*/  Shape-outside:url (/images/mm.png);  shape-image-threshold:0.5; This property is used to set the float area transparency range}
Both of these methods have their own advantages and disadvantages. For example, if the graphics are too complex, it is easier to use the picture method than to manually calculate the drawing nodes.
Create irregular graphic text around using CSS 3