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 : 6804  
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

New graphic window units - CSS

''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…

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…