===== Introduction ===== This page contains use cases for exclusions and comparative examples of markup using the CSS Exclusions and Shapes proposal. ==== Proposals ==== * CSS Exclusions and Shapes: [ http://dev.w3.org/csswg/css3-exclusions/ ] ===== UC 1: simple exclusion ===== One exclusion over two columns of content. {{:ideas:css3-floats-use-cases:exclusions_simple.jpg?500|}} ==== CSS Exclusions and Shapes ====
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 2: overlapping exclusions ===== Multiple overlapping exclusions that affect each other and the content around them. {{:ideas:css3-floats-use-cases:exclusions_overlapping.jpg?500|}} ==== CSS Exclusions and Shapes ====
magna aliqua. Ut enim ad minim ...
bore et dolore magna ...
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 3: repeating shapes ===== Repeating exclusion shape on x, y or both axes. {{:ideas:css3-floats-use-cases:exclusions_repeating.jpg?500|}} ==== CSS Exclusions and Shapes ==== No support for repeating exclusion shapes. Solution:TBD
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 4: disjoint shapes ====== Multiple disjoint shapes that compose an exclusion {{:ideas:exclusions_disjoint_shapes.jpg?500|}} ==== Resources: ==== Image to determine the disjoint shapes by alpha channel transparency. {{:ideas:css3-floats-use-cases:exclusions_disjoint_shapes_mask.png?300|}} ==== CSS Exclusions and Shapes ==== Multiple solutions possible with single image, multiple positioned images or SVG shapes.
nousmod tempor inciditunt ut...
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 5: reusable exclusion ===== Reuse an exclusion shape on different elements {{:ideas:css3-floats-use-cases:exclusions_reusable.jpg?500|}} ==== CSS Exclusions and Shapes ==== * low reusability: requires duplication of markup
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 6: shape transforms ===== Apply transformations (scale, skew, rotate) to an exclusion shape. {{:ideas:css3-floats-use-cases:exclusions_transforms.jpg?500|}} ==== CSS Exclusions and Shapes ==== (!) Content inside the shape will have transformations applied, as well
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 7: padding and margin on custom shape ===== Custom-shaped container with margin for outer content and padding for inner content {{:ideas:css3-floats-use-cases:exclusions_padding_margin.jpg?500|}} ==== CSS Exclusions and Shapes ====
consectur adipisicing elit, sed
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 8: background image and container shape ===== Custom-shaped container with a background image / background color. {{:ideas:css3-floats-use-cases:exclusions_background.jpg?500|}} ==== CSS Exclusions and Shapes ====
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
===== UC 9: Drop Cap ===== One exclusion along a text. {{:ideas:css3-floats-use-cases:exclusions-dropcap.png?500|}} ==== CSS Exclusions and Shapes ====

Many instances ...

The text ....