Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| ideas:css3-exclusions-print-use-cases [2012/05/11 06:14] – astearns | ideas:css3-exclusions-print-use-cases [2014/12/09 15:48] (current) – external edit 127.0.0.1 |
|---|
| {{ :spec:css3-floats-use-cases:2columns_1excl.png?nolink |}} | {{ :spec:css3-floats-use-cases:2columns_1excl.png?nolink |}} |
| |
| Here there's a circle shape affecting the flow of two columns. This could be done as a float with a shape (with the addition of a float-offset property) or as an absolutely positioned exclusion. You can see a markup example of a reconstruction of that use case [[http://disruptive-innovations.com/zoo/customers/Adobe/FFMC.html|here]]. Below is a screenshot of that reconstruction in a browser and the second code block is the CSS code used to create the exclusion. The first code block uses a much simpler mechanism from GCPM. | Here there's a circle shape affecting the flow of two columns. This could be done as a float with a shape (with the addition of a float-offset property), as an absolutely positioned exclusion, or with grid positioning placing an exclusion over a multicol element or pair of regions. You can see a markup example of a reconstruction of that use case [[http://disruptive-innovations.com/zoo/customers/Adobe/FFMC.html|here]]. Below is a screenshot of that reconstruction in a browser and the second code block is the CSS code used to create the exclusion. The first code block uses a much simpler mechanism from GCPM. |
| |
| <code css> | <code css> |
| |
| Here the large oval wraps the article text and the text of its top two captions, but the remaining captions are not affected by the shape. | Here the large oval wraps the article text and the text of its top two captions, but the remaining captions are not affected by the shape. |
| | |
| | More examples collected at the top of this blog post: http://galjot.si/css-exclusions |
| |
