manipulating shape and perspective
CSS and HTML boast a varied and powerful feature set for ascribing shape to elements and classes. Their properties involve an idiom different from those we have reviewed to this point. The aim of this section is to direct authors to helpful information while providing a few examples.
clip-path
The clip-path property specifies the visible edge of a class or element. By default, the clip-path matches the given or inherited shape of its container. For instance, if we add a clip-path to our previous .Style_ipso class
css-set-fast ".Style_ipso; background; lemonchiffon";
css-set-fast ".Style_ipso; clip-path; circle(25%)";
This is the result:
This is not an ideal way to display text, obviously. Unless we apply a draconian amount of
buffer to this class, nearly all of our text will vanish. This is by design. The clip-path property is best used with empty blocks or images.
If we apply float to this shape, and specify a shape-outside property (this should be larger than the clip-path value), we can wrap text around our shape/image/background.
this is the ipso style rule:
css-set-fast ".Style_ipso; width; 35%";
css-set-fast ".Style_ipso; position; relative";
css-set-fast ".Style_ipso; display; inline-block";
css-set-fast ".Style_ipso; border-radius; 20px";
css-set-fast ".Style_ipso; padding; 15px";
css-set-fast ".Style_ipso; background; lemonchiffon";
css-set-fast ".Style_ipso; clip-path; circle(25%)";
css-set-fast ".Style_ipso; shape-outside; circle(35%)";
css-set-fast ".Style_ipso; float; left";
this is the after style rule:
css-set-fast ".Style_after; position; relative";
css-set-fast ".Style_after; padding; 15px";
will yield this:
If we have increased the default character limit for Bisquixe, we can implement more complex shapes. For instance, using a css-clip-path generator like this, authors can implement complex shapes like this star:
lab is a room.
include simple multimedia effects for v10 by mathbrush.
release along with a "bisquixe" interpreter.
when play begins:
css-set-fast ".Style_shape; width; 190px";
css-set-fast ".Style_shape; height; 190px";
css-set-fast ".Style_shape; background; maroon";
css-set-fast ".Style_shape; display; inline-block";
css-set-fast ".Style_shape; clip-path; polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)";
to say shape:
set-any-class "shape";
instead of jumping:
say shape;
say " ";
rotation
It is possible to rotate an element or class. This is accomplished by specifying a value in degrees. For instance, this code
css-set-fast ".Style_ipso; rotate; -45deg;";
Will rotate our custom class 45 degrees counterclockwise.
Note that the edges of our class reach beyond the borders of their original shape. If we want to keep things tidy, we will likely need to specify a larger margin value. Here is the same content with a 20% margin:
transform
Using the transform property, we can distort the shape of an element or class. A scale value will stretch or shrink our content according to both width (x axis) and height (y axis).
css-set-fast ".Style_ipso; transform; scale(1, .5)";
Not that this isn’t intended to yield accurate resizes. In the above code, the shape will have its original width but only half its height.
That’s not all. We can add a skew value to shift a shape along X axis, Y axis, or both.
css-set-fast ".Style_shape; transform; skew(30deg, 0deg)";
translate can be used to adjust the placement of an element or class. A transform value consists of two values, horizontal (x) and vertical (y). Note that it is possible to push a shape outside the boundaries of its container, so we should take care to use margin, height, and width values judiciously. That being so, let’s additionally adjust the size and scale of our shape to accommodate this change.
when play begins:
css-set-fast ".Style_shape; width; 600px";
css-set-fast ".Style_shape; height; 600px";
css-set-fast ".Style_shape; background; maroon";
css-set-fast ".Style_shape; display; inline-block";
css-set-fast ".Style_shape; clip-path; polygon(50% 13%, 58% 38%, 85% 38%, 63% 54%, 71% 78%, 50% 63%, 29% 78%, 37% 54%, 15% 38%, 42% 38%)";
css-set-fast ".Style_shape; translate; 60px 60px";
matrix is a complex transformation effect for modifying the behavior of 2d shapes. It allows authors to adjust scale, skew, and translate within a single property. Most of us will prefer the readability of added lines, but for the sake of this reference, an example should be shared.
A matrix invokes six numberical values as a comma-separated list. These numbers must be in a specific order:
scale (X)
skew (Y)
skew (X)
scale (Y)
translate (X)
translate (Y)
Let’s put it all together. A bottom-margin, a new clip-path, a rotate, and a matrix. This code specifies a shape that is .8 (80%) of its usual size, has no skewing, and has been moved over 50px and down 20px:
lab is a room.
include simple multimedia effects for v10 by mathbrush.
release along with a "bisquixe" interpreter.
when play begins:
css-set-fast ".Style_shape; width; 500px";
css-set-fast ".Style_shape; height; 500px";
css-set-fast ".Style_shape; background; darkblue";
css-set-fast ".Style_shape; display; inline-block";
css-set-fast ".Style_shape; margin-bottom; 30px";
css-set-fast ".Style_shape; clip-path; polygon(68% 15%, 85% 50%, 68% 85%, 15% 85%, 33% 50%, 15% 15%)";
css-set-fast ".Style_shape; rotate; -30deg";
css-set-fast ".Style_shape; transform; matrix(.80, 0, 0, .80, 50, 25)";
to say shape:
set-any-class "shape";
instead of jumping:
say shape;
say " ";
The result:
Manipulating the appearance of shapes is a complex topic, but, thanks to the ubiquitousness of CSS documentation and resources, we have a lot of help at our disposal.
Note that these tactics can be applied to images, a possibility that will interest many authors. Our discussions regarding images have not yet ended; we will return to them soon as a more advanced topic.