An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- Technology Review
- Simplebits
- TutsPlus - Code
- Just Creative
- Six Revisions
- 24 Ways
- CSS Tricks
- Freelance Switch
- Design Modo
- Android Dissected
Help Webnuz
Referal links:
March 5, 2016 12:00 pm GMT
Original Link: http://feedproxy.google.com/~r/Noupe/~3/Q0KC4o0eU9w/css-shapes-how-to-line-up-images-and-texts-96307.html
CSS Shapes: How to Line up Images and Texts
In applications such as InDesign or QuarkXPress, letting letters flow along paths is a long established standard for lining up images and text. With CSS3 CSS Shapes allow you to create the same behaviour in the browser. To do so, you can define paths which the text is supposed to follow, as well as define cut-out images, which the text is meant to place itself along. Defining Circles, Ellipses and Polygons for an Outline If you want to create a text outline with simple paths, you first need an element which the text will follow. Here, a “<div>” container for which you need to define a width and height as well as the “float” attribute, that makes sure that the following text will go alongside the element, is what you want to define. <div></div> <p>Lorem ipsum </p> Until now, you have a classic rectangular element. Using the shape attribute “shape-outside”, you now define a path that creates the text outline instead of the rectangular shape. div { width: 300px; height: 300px; float: left; shape-outside: circle(50%); } In the example, the circle is defined with a radius of 50 percent. Additionally, you can also determine the center of the circle if […]* You might also be interested in the following articles
Original Link: http://feedproxy.google.com/~r/Noupe/~3/Q0KC4o0eU9w/css-shapes-how-to-line-up-images-and-texts-96307.html
Share this article:
Tweet
View Full Article
Noupe
Noupe passionately delivers stylish and dynamic news for designers and web-developers across the globe on all subjects of designMore About this Source Visit Noupe