Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Last revisionBoth sides next revision
ideas:css3-exclusions-print-use-cases [2012/05/11 06:12] astearnsideas:css3-exclusions-print-use-cases [2013/03/01 14:59] astearns
Line 5: Line 5:
 {{ :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>
 #exclusion { #exclusion {
-  float: top left+  float: top right
-  float-offset: -50% -50%;+  float-offset: -50% 50%;
   shape-outside: url(motorbike.png);   shape-outside: url(motorbike.png);
 } }
Line 84: Line 84:
  
 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
  
 
ideas/css3-exclusions-print-use-cases.txt · Last modified: 2014/12/09 15:48 by 127.0.0.1
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki