In purposes similar to InDesign or QuarkXPress, letting letters circulate alongside paths is an extended established commonplace for lining up photographs and textual content. With CSS3 CSS Shapes let you create the identical behaviour within the browser. To take action, you’ll be able to outline paths which the textual content is meant to comply with, in addition to outline minimize-out photographs, which the textual content is supposed to put itself alongside.
Defining Circles, Ellipses and Polygons for an Define
If you wish to create a textual content define with easy paths, you first want a component which the textual content will comply with. Right here, a “
<div></div> <p>Lorem ipsum …</p> |
Till now, you will have a basic rectangular aspect. Utilizing the form attribute “form-outdoors”, you now outline a path that creates the textual content define as an alternative of the oblong form.
div width: 300px; peak: 300px; float: left; form-outdoors: circle(50%); |
Within the instance, the circle is outlined with a radius of fifty %. Moreover, you can even decide the middle of the circle if you don’t need it to be within the component’s middle.
div form-outdoors: circle(50% at 50px 100px); |
Textual content Flows Round a Easy Circle
Within the second instance, the middle is 50 pixels away from the left and one hundred pixels away from the higher border of the factor. By the best way, “form-outdoors” solely creates a path for the textual content define. For instance, should you assign a background shade to the “
As an alternative of circles, ellipses, for which you enter two
The post CSS Shapes: The way to Line up Photographs and Texts appeared first on DICKLEUNG DESIGN 2014.
沒有留言:
張貼留言