Understanding CSS Masking and Shapes Modules, or the Future Revolution in Content Design

    Good day dear harazhiteli. Today, with CSS you can create many different elements. This is certainly very pleasing, remembering the web a few years ago. But sometimes you get “tired” of all these tricks with: before and: after ... Recently, I found two interesting specifications for CSS Masking Level 1 and CSS Shapes Level 2 , thanks to which in the near future we will have completely new possibilities for creating content and developing element forms .

    CSS masking


    Compatibility

    All modern browsers support the mask and clip-path properties, as defined in SVG 1.1 for SVG elements. But only Firefox allows you to apply these properties to HTML elements, and without prefixes. But speaking specifically about the CSS Masking specification, the mask, clip-path, mask-box-image properties are only supported on the latest Webkit / Blink with the webkit prefix.

    clip-path


    The clip-path property creates a clipping region for any of the HTML elements or graphic elements, including the SVG container elements, clipPath. The formed elements can be animated. One impressive demo (unfortunately only works on the latest Chrome).

    • rectangle(x, y, width, height, [rx, ry]);
      Describes a rectangle, x and y values determine the position of the shape, width and height - width and height, rx and ry - the radius of the corners.

    • circle(cx, cy, r);
      Describes the circle, the values cx and cy determine the coordinates of the center of the circle, r is the radius.

    • ellipse(cx, cy, rx, ry);
      Describes a circle, cx and cy determine the coordinates of the center of the circle, rx and ry determine the radius.

    • polygon(, , ..., );
      Describes a polygon based on the transmitted coordinates.

    • url(path/to/image.png);
      Describes the form specified by the selected image or SVG file.

    Usage example
    
    .element1 {
      clip-path: url(#clipping);
    }
    .element2 {
     clip-path: circle(50%,50%,50%);
    }
    


    Masks


    In addition to cropping, the specification regulates masking in CSS (as well as in Photoshop). The image mask is used as a “color grid” to filter the visible parts of an element. Masks are divided into two types: mask color saturation (Luminance Mask) and alpha mask (Alpha Mask).

    Color saturation mask

    The image of the color saturation mask (Fig. Top left) turns into a rasterized image of the brightness scale (if it is no longer in the brightness scale). The lighter the part of the mask image, the more the element will be visible in this place.

    Alpha mask

    In applying an alpha mask (fig. Top right), the same principles are used as in the mask of color saturation. The difference is that here the value is only the alpha channel of the image. The more opaque part of the mask image, the less visible the element will be in the same place.

    The values ​​and functions of the following properties are fully equivalent to backgroud :
    • mask
    • mask-image
    • mask-repeat
    • mask-position
    • mask clip
    • mask-origin
    • mask-size

    Usage example
    
    img {
      mask: url(#masking);
    }
    




    mask-box-image

    The only property that has no analogue in background is mask-box-image . The property divides the image mask into nine mosaic elements: four corners, four edges and the middle. The resulting parts can be layered, scaled and stretched in different ways.
    mask-box-image:  []

    An interesting feature is that the mask may be a CSS gradient. And the x-repeat and y-repeat values are the same as in the border-image:
    • stretch - stretches the border drawing to the size of the element. This value is used by default.
    • repeat - repeats the display of the mask along the entire border of the element
    • round - repeats the display of the mask and scales it so that an integer number of images appears on the side of the element.

    mask
    img {
      mask-box-image: url("stamp.svg") 35 repeat; /* 35 это расстояние от краев изображения маски до соответствующего края серединного пазла */ 
    }
    


    CSS Shape


    As far as I understand this specification is a modernized CSS Exclusions . If I'm wrong, I will be grateful for comments explaining this point.
    Shapes |  Layout |  Adobe & HTML
    Support

    CSS Shapes are supported in the latest builds of WebKit Nightly and Chrome Canary (in chrome: // flags, enable the Enable experimental WebKit features item ).

    Shape-outside

    Shape-outside creates a shape inside the element around which it will flow. The property works only for float elements.

    For a better understanding of shape-outside, I clearly demonstrated its operation in the inset-rectangle example below. The element itself is transparent blue, a form for flowing inside. It is also worth paying attention to the fact that the clip-path property is used for all elements, which only cuts off the given shape of the element, but does not affect the flow around the

    Demo

    • rectangle(x, y, width, height, [rx, ry]);
      Describes a rectangle, x and y values determine the position of the shape, width and height - width and height, rx and ry - the radius of the corners. The positioning of the form occurs by origin to the element.

    • rectangle(x, y, width, height, [rx, ry]);
      Describes a rectangle, x and y values determine the position of the shape, width and height - width and height, rx and ry - the radius of the corners. The positioning of the form occurs as for the element itself.

    • circle(cx, cy, r);
      Describes the circle, the values cx and cy determine the coordinates of the center of the circle, r is the radius.

    • ellipse(cx, cy, rx, ry);
      Describes a circle, cx and cy determine the coordinates of the center of the circle, rx and ry determine the radius.

    • polygon(, , ..., );
      Describes a polygon based on the transmitted coordinates.

    • url(path/to/image.png);
      Describes the form specified by the selected image or SVG file.

    Shape-inside

    Shape-inside creates a shape inside an element within which a flow will occur.
    shape
    shape-inside has the same meaning as shape-outside
    • rectangle(x, y, width, height, [rx, ry]);
      Describes a rectangle, x and y values determine the position of the shape, width and height - width and height, rx and ry - the radius of the corners. The positioning of the form occurs by origin to the element.

    • rectangle(x, y, width, height, [rx, ry]);
      Describes a rectangle, x and y values determine the position of the shape, width and height - width and height, rx and ry - the radius of the corners. The positioning of the form occurs as for the element itself.

    • circle(cx, cy, r);
      Describes the circle, the values cx and cy determine the coordinates of the center of the circle, r is the radius.

    • ellipse(cx, cy, rx, ry);
      Describes a circle, cx and cy determine the coordinates of the center of the circle, rx and ry determine the radius.

    • polygon(, , ..., );
      Describes a polygon based on the transmitted coordinates.

    • url(path/to/image.png);
      Describes the form specified by the selected image or SVG file.


    Codepen Demo Page

    Shape-image-threshold

    This property determines the threshold of the alpha channel of the image on the basis of which the shape is determined. Values ​​from 0.0 to 0.1, by default 0.5. That is, if you determine the shape from a specific image, then by default the zone where the opacity is less than 50% will not be taken into account.

    Shape-margin and shape-padding

    The specifics of the operation of these properties is slightly different from the margin and padding standards. The principle of operation is very clearly demonstrated on this page (below).

    Hyphens


    I cannot but mention this small wonderful property. It is used in most shape-inside examples, and one of its functions is automatic word wrap with a hyphen. Without this property, content within a particular form would look awful. It already works in Firefox, IE, Safari it is surprising that it is not in Chrome .
    • none - Prevent hyphenation, line breaks are placed only between words. (Familiar display)
    • manual - Manual hyphenation - words are broken only at the places of arrangement of special characters.
    • auto - Automatic hyphenation, but priority is given to places with special characters.


    Resources Used Besides W3C Specifications:
    HTML5ROCK
    CSS Shapes and Float Positioning: What's Old is New Again
    The CSS Shapes Module - Breaking Out of the Box
    Web Platform

    Thank you very much for your attention.

    Also popular now: