CSS Shapes: how to create non-rectangular shapes (part 2)

CSS Shapes: how to create non-rectangular shapes (part 2)


The shape-image-threshold (Position Text Over A Semi-Opaque Image)

So far we've looked at employing a fully transparent part of a picture or of a gradient so as to form our shape, however, the third property defined within the CSS Shapes specification implies that we will use images or gradients with semi-opaque areas by setting a threshold. a value for shape-image-threshold of one suggests that totally opaque while zero means fully transparent.

A gradient like our example above is a good way to visualize this in action as we are able to change the shape-image-threshold value and move the line along which the text falls to more opaque areas or more transparent areas. This property works in precisely identical way with an image that has an alpha channel yet is not totally transparent.

This technique of making shapes from pictures and gradients is — we believe — the foremost easy manner of making a shape. you'll be able to create a shape as complicated as you would like it to be, within the comfort of a graphics application so use that to define the shape on your page.


Read also: CSS Shapes: how to create non-rectangular shapes (part 1) 



CSS: Make shapes with Basic Shapes

The Basic Shapes ar a group of predefined shapes that cover a lot of various kinds of shapes you would possibly wish to create. To use a basic shape, you employ the basic shape type as a value for shape-outside. This type uses functional notation, therefore we've got the name of the shape followed by brackets (inside that ar some values for our shape). We have the following options:

  • inset()
  • circle()
  • ellipse()
  • polygon()

We will take a glance at the circle() type 1st as we can use this to understand some helpful things that apply to all shapes that use the basic shape type. we'll even have a glance at the new tools in Firefox for inspecting these shapes. In the example below, we are creating the foremost simple of shapes: a circle using shape-outside: circle(50%). We are using generated content once more, and we have given the box a background color, and also added a margin, border, and padding to help highlight some of the concepts of using CSS Shapes. You'll see in the example that the circle is created centered on the box; this is because we actually have given the circle a value of fifty. That value is the which can be a length or a percentage. We’ve used a percentage so the radius is 1/2 the size of my box.

Now, have a look at the shape that has been created using the Firefox Shape Path Editor.

You can inspect the shape by clicking on the generated content and then clicking the little shape icon next to the property shape-outside; your shape will now highlight.

You can notice how the circle extends to the edge of the margin on our box.

You already know something of reference boxes if you have ever added box-sizing: border-box to your CSS. When you do that, you're asking CSS to use the border-box and not the default content-box because the size of elements. In Shapes, we are able also to change which reference box is used. After any basic shape, add border-box to use the border to outline the shape or content-box to use the edge of the content (inside the padding). For example:

.content::before {
    content: "";
    width: 150px;
    height: 150px;
    margin: 20px;
    padding: 20px;
    border: 10px solid #FC466B;
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
    float: left;
    circle(50%) content-box;


READ ALSO: CSS Shapes: how to create non-rectangular shapes (part 1) 


ORIGINAL SOURCE: https://www.smashingmagazine.com


tags: css css animations animations css shapes tips tricks tutorial

We use our own cookies and third-party cookies to improve our services, show products based on your preferences, analyse the browsing habits of our users, and enable interaction with social networks. Continuing to browse our sites implies full acceptance of their use. You can change your cookie setting or get more information here: Cookies policy .