Use CSS 3 to create irregular Images

Preface

CSS technology for creating complex images will soon be widely supported and applied to actual projects. This article aims to open the tip of the iceberg for everyone. I hope this article will give you a preliminary understanding of irregular graphics.

Now, we can use common irregular and complex CSS 3 images. Click the link to view details, as shown in:

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131229/1229133V2-0.png "width =" 644 "height =" 430 "/>

No built-in text or text wrapping effect is available for images created using CSS. Therefore, it has become a hot topic to discuss how to implement the complex layout of irregular images and texts.

Today, we will introduce how to achieve this effect. In this article, we will explain how to use CSS to create irregular images to achieve irregular text la S. After learning how to create irregular images, you can use your imagination to create beautiful CSS pages. This technology is used to create Alice in Wonderland:

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131229/122913G44-1.png "width =" 644 "height =" 404 "/>

Note: This is the latest CSS technology, so it requires a higher browser version. To view online examples, make sure the browser supports this CSS technology. In this article, I will also provide some results.

Declaration graphics

We need to use the shape-outside attribute to declare irregular graphs. Currently, the shape-outside attribute can only be applied to floating elements and block-level elements. To use these attributes on a non-block-level element, you must declare the element as a block-level element first.

Shape-* values can be assigned in three ways: automatic, basic graphics, or image links. If it is set to automatic, the floating element will continue to be rendered as a traditional box model. If you are not familiar with the box model, refer to the CSS box model. This is the basis for reading this article.

The rendering methods include rectangle, inset-rectangle, circle, ellipse, and polygon. You can view the detailed description through the link.

If the attribute is set as an image link, the browser will draw the image shape based on the "alpha channel" of the image.

Create a coordinate system on the element

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

The coordinate system is necessary because the graph needs to be drawn based on the dot matrix in the coordinate system. Shape-* attributes are based on the box model. To enable the shape function, you must specify the box size to limit the irregular image to the box range. It will also be used to create a drawing coordinate system, the starting point of the coordinate system is in the upper left corner of the box. If there is no clear declaration of width and height,Shape -*Attribute will not function.

Set the background color of a custom image

When a custom image is applied, its box model still exists. Other traditional style settings apply to the box model range. 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:

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131229/1229131464-2.png "width =" 644 "height =" 361 "/>

However, when the background color of the box is set, you will find that the effect is different from the Expected One. The effect is as follows:

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" clip_image001 "border =" 0 "alt =" clip_image001 "src =" http://www.bkjia.com/uploads/allimg/131229/122913N95-3.gif "width =" 644 "height =" 362 "/>

In, we can see that the background color is applied to the box model range, rather than the expected circle.

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

Reminder

Currently, the shape-outside attribute only applies to floating elements, and only applies to block-level elements. The elements defined using these attributes will depend on the graphic shape la s in the text surrounding them. In the future, CSS shapes will not only be restricted and applied to floating elements, but we will not only be able to make a fuss about external Text Graphics, but also define custom images within them to achieve the following effects:

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131229/1229133560-4.png "width =" 385 "height =" 339 "/>

Instance-use shape-outside to create floating text surrounded by custom shapes

Let's start with a simple example. In the instance, we will create a custom image with a built-in text stream, and finally provide the instance download link at the end of the following article): 650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" clip_image002 "border =" 0 "alt =" clip_image002 "src =" http://www.bkjia.com/uploads/allimg/131229/122913NJ-5.jpg "width =" 656 "height =" 310 "/>

In this 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">    <span>La</span> Tour <br/>Eiffel                       Lorem Ipsum.....  </div></div>

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;   100vw;}.shaped{  float:left;  height:100vh;  ;  float:right;   black  url../images/eiffel.jpg） center top no-repeat;  background-size:cover;}

Now that the coordinate system has been created successfully, we will draw the image. You can draw images in two ways:

Use Polygon)

We can use the polygon () method to calculate the graphic range. This method obtains multiple vertices from the coordinate system for drawing a graph. Each vertex is located by the (x, y) value. In this example, we will create a very simple polygon, as shown in:

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" clip_image002 [7] "border =" 0 "alt =" clip_image002 [7] "src =" http://www.bkjia.com/uploads/allimg/131229/122913D43-6.jpg "width =" 548 "height =" 262 "/>

The unit of coordinate points can be a fixed value or percentage. In this example, we will set the dot matrix position as a percentage. Next, we need to apply this style to floating elements.

.shaped{/*…*/  shape-outside: polygon0 0, 100% 0, 100% 100%,30% 100%）;  shape-margin: 20px;}

After the above style is applied, an irregular image-trapezoid is generated.

The shape-margin attribute is used in the code to set the margin between the image and text content.

Next, you need to add a background image. Note that after adding a background image, it will be applied to the box model. So far, the effect is as follows:

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" clip_image002 [9] "border =" 0 "alt =" clip_image002 [9] "src =" http://www.bkjia.com/uploads/allimg/131229/1229135R8-7.jpg "width =" 614 "height =" 289 "/>

Therefore, to achieve the expected results, we need to set the clip-path attribute and set its range to the same as the shape-outside attribute.

.shaped{/*…*/  clip-path: polygon0 0, 100% 0, 100% 100%,30% 100%）;}

Now, we have achieved the goal through the polygon () method.

Use Image links

You can also create irregular images based on the image's "alpha channel.

For example, replace the polygon () declaration method. We can set the shape-outside attribute value to the image URI, And the browser will automatically draw irregular images based on the image.

650) this. width = 650; "style =" border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "title =" clip_image002 "border =" 0 "alt =" clip_image002 "src =" http://www.bkjia.com/uploads/allimg/131229/1229134259-8.gif "width =" 640 "height =" 301 "/>

The transparency part in the image will be declared as the floating part of the text element. The rest is declared as irregular images. The Code is as follows:

. Shaped {/*... */Shape-outside: url/images/mm.png); shape-image-threshold: 0.5; this attribute is used to set the transparency range of floating areas}

Both methods have their own advantages and disadvantages. For example, if the image is too complex, it is more convenient to use the image method than to manually calculate the drawing node.

Source code download

This article from the "grape city control blog" blog, please be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/1324491