MENU


Shaping

shape-outside (with the 'float' property)
: none
: margin-box
: content-box
: border-box
: padding-box
: circle()
: ellipse()
: inset(10px 10px 10px 10px)
: polygon(10px 10px, 20px 20px, 30px 30px)
: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z')
: url(image.png)
: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px)

shape-margin
: 1cm: sets the margin to be 1cm from the Shape.

shape-image-threshold
: 0.7: sets the alpha channel threshold used to extract the shape.


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   * {font-size:40px;}
   div {
      --shape: linear-gradient(30deg, black, transparent 75%);
      background:var(--shape);
      shape-outside:var(--shape);
      shape-image-threshold: 0.3;
      shape-margin: 5px;
      width:300px;
      height:300px;
      float:left;
   }
</style></head><body>
    <div></div>
    Tell me and I forget.<br/>
    Teach me and I remember.<br/>
    Involve me and I learn.
</body></html>

clip-path
(shows only pixels within the shape)
: none
: url(resources.svg#id)
: margin-box
: border-box
: padding-box
: content-box
: fill-box
: stroke-box
: view-box
: inset(100px round 50px)
: circle(50px at 0 100px)
: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z')
: padding-box circle(50px at 0 100px)


RESETRUNFULL
<!DOCTYPE html><html><head><style>
div {
   clip-path: url(#cross);
   background:url(/shared/scene.jpg);
   width:300px;
   height:300px;
   font-size:25px;
}
</style></head>
<body>
   <svg height="0" width="0">
      <defs>
         <clipPath id="cross">
            <rect y="110" x="137" width="90" height="90"/>
            <rect x="0" y="110" width="90" height="90"/>
            <rect x="137" y="0" width="90" height="90"/>
            <rect x="0" y="0" width="90" height="90"/>
         </clipPath>
      </defs>
   </svg>
   <div>If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.</div>
</body></html>

mask(shorthand)
(shows only pixels which fall within the opaque mask)

...mask-image
: none(more information here)

...mask-position
: 25% right, center: positions the masks

...mask-size
:cover: scales until the region is fully covered with the mask image.
:contain: scales until the region just contains the image completely.
:50px 80px: scales the width=50px, the height=80px.
:50% 80%: scales the width=50%, the height=80% of the region.

...mask-repeat
:no-repeat: does not mask the image.
:repeat: repeats the mask horizontally and vertically. Default.
:repeat-x: repeats the mask horizontally.
:repeat-y: repeats the mask vertically.
:space: repeats without clipping by inserting space.
:round: repeats without clipping by scaling.
:space round: 'space's out horizontally and 'round's up vertically.

...mask-origin
: content-box
: padding-box
: border-box
: margin-box
: fill-box
: stroke-box
: view-box

...mask-clip
: content-box
: padding-box
: border-box
: margin-box
: fill-box
: stroke-box
: view-box
: no-clip

...mask-composite
: add
: subtract
: intersect
: exclude

...mask-mode
: alpha: use the alpha channel as the mask values.
: luminance: use the luminance as the mask values.
: match-source: 'alpha' only if mask-image is of image type.

mask-type
(like mask-mode, but uses an SVG <mask> element)


RESETRUNFULL
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
   <svg width="500" height="500">
      <path d="M 332,385 L 217,325 L 103,385 L 125,258 L 32,168 L 160,149 L 217,34 L 274,149 L 402,168 L 310,258 L 332,385 z "
            style="fill:#000000;fill-opacity:1;stroke:#000000; stroke-width:26.86700058;stroke-miterlimit:4; stroke-opacity:1"/>
   </svg>

<!DOCTYPE html><html><head><style>
   div {
      -webkit-mask-image: url(/shared/Black_Star.svg);
      -webkit-mask-position: 0px 0px;
      -webkit-mask-size: 300px 300px;
      -webkit-mask-repeat: no-repeat;
      mask-image: url(/shared/Black_Star.svg);
      mask-position: 0px 0px;  
      mask-size: 300px 300px;  
      mask-repeat: no-repeat;  
      background:yellow;  
      width:300px;  
      height:300px;  
      font-size:30px;
   }
</style></head><body>
   <div> All the world's a stage,       
         And all the men and women merely players.
         They have their exits and their entrances;
         And one man in his time plays many parts...</div>
</body></html>

mask-border (shorthand)
(applies a mask to the border)

mask-border-source
: none(more information here)

...mask-border-width
: 1rem: all sides.
: 5% 10px: vertical, horizontal.
: 3% 4% 5%: top, left-right, bottom.
: 3% 4% 5% auto; top, right, bottom, left.

...mask-border-mode
: luminance: uses the luminance values as mask.
: alpha: uses the alpha channel as mask.

...mask-border-outset
:2 20px: vertically two times the border width,horizontally 20px.

...mask-border-repeat
: stretch: stretches the image.
: repeat: repeats and clips away parts.
: round: repeats without clipping by scaling.
: space: repeats without clipping by spacing out.

...mask-border-slice
: 30 30% 45: top, sides, bottom.