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 admin Date: 17-09-2018 css css animations animations css shapes tips tricks tutorial hits : 1192  

Related Posts

    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,…

    How To Grow Your Small Business

    A business that stays still will stagnate. To be successful and to have a business to be proud of, you need to ensure that it grows. This is not always…

    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…

    Level Up Your JavaScript Skills: 12 basic notions

    If you are a developer at any level, understanding its basic concepts is crucial. This article highlights 12 basic concepts that are critical to understanding by any JS developer, but do…

    14 JavaScript Animation Libraries For 2019

    Well - designed and smooth animations are one of the most important things that makes an app stand out from the crowd. The purpose of UI animations is to help…

    Best 5 Frontend Development Topics in 2019

    Ah, a new year. A time of positivity, a time to restart. For new objectives and proposals. And in the world of developers, to look at the scenery and decide…

    A roadmap to becoming a web developer in 2019

    There are plenty of tutorials online, which won't cost you a cent. If you are sufficiently self-driven and interested, you have no difficulty training yourself. The point to learn coding…

    Best Javascript front-end hacking cheatsheets

    JavaScript has a extremely high potential to build cutting-edge web applications. But it's really hard to memorize it by heart. The JavaScript cheat sheets therefore act perfectly as a reminder…

    Tips for JavaScript Developers in 2019

    Another year is over and JavaScript is constantly changing. However, there are some tips that can help you write in 2019 clean and efficient code that scales. Below is a…

    JavaScript Basis: Syntax & Structure

    Programming languages are defined by rules. The syntax is what we follow when we write our code, which forms the logical structure of our programs. Let's dive right into the basic…

    The Absolute Beginner's Guide to Sass

    You've probably heard about CSS preprocessors before, whether it's Sass, LESS or Stylus, and they're all great tools to maintain your CSS, especially when you work with large codebases. For…

    Crazy SEO Tips For 2019

    Are you interested in learning more about SEO in 2019? Here are the trends you need to follow to improve your search optimization skills. For those who don’t know about SEO,…