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 : 3320  
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 END DEVELOPMENT.


Related Posts

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…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

How to ‘leave’ a WhatsApp group without actually leaving

If you want to leave a WhatsApp group but don't want the 'You left the group' message to be displayed, read this article. Some people love WhatsApp groups, and some people…

How to change font size and format in WhatsApp

Your WhatsApp messages can be much more original and fun by changing the font, size, or format. Here's how. WhatsApp is the leading messaging app for virtually everyone, with permission from…

WhatsApp: How to View Deleted Messages

Words are carried away by the wind, as long as they are not written on WhatsApp. Sending it was like getting a tattoo, something you'll always like, or yet it'll…

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…

10 Javascript tips and tricks you should know

Javascript is the most widely used language in fullstack development thanks to the boom in recent years in libraries and frameworks such as NodeJs (backend) and React/Angular/Vue (frontend). However, regardless…

Styling React components: recommendations and suggestions

With CSS we can set the presentation of a document through the rules that control the formatting of an element on a web page. Using CSS techniques, we can make…

Understanding the JavaScript language (guidelines for beginners)

What began in 1995 as a modest 10-day project is now one of the world's most commonly used programming languages. JavaScript is actually everywhere, thanks to more advanced JavaScript engines…

How To Create a Logo SVG Animation Using Only CSS

Web animations are a joy. They enhance the user experience by providing visual feedback, guiding tasks, and vitalize a website. Web animations can be created in several ways, including JavaScript libraries,…

CSS in JavaScript (CSS-in-JS) Vs CSS in CSS

What actually is CSS-in-JS? You've certainly heard or read words like CSS-in-JS, Styled Components, Radium, Aphrodite and you're and you're stuck in limbo there, "why is it? I'm completely happy about CSS…

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 advertising related to your preferences. By clicking on "Understood" YOU AGREE TO THE USE OF THESE COOKIES. You can also SET OR DISCONTINUE the installation of cookies by clicking on "Settings" or "Reject".

Understood Reject Settings More Info