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

by Janeth Kent Date: 17-09-2018 css css animations animations css shapes tips tricks tutorial hits : 5889  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.


Related Posts

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Interesting and Helpful Google Search Features You’ll Want to Start Using

Google – THE search engine for many internet users. It has been with us since its launch back in 1998 and thanks to its simplicity of use and genius algorithms,…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to use your browser as a file browser, in Chrome or Microsoft Edge

We're going to explain how to use the Chrome browser as a file browser, both on Android and on your computer. This is a hidden feature of Chromium that will…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration