Codedrop square picture css how to#

In a browser that does not support CSS Shapes, the content around the circular image will flow around it as if it weren’t circular. element Without CSS Shapes, the text sees the image as rectangular, and hence wraps around a rectangular shape, not a circular one. Using the shape properties and functions, declaring a shape on an element can be as easy as adding one line of CSS to it. Just like shape-outside gets a shape-margin property, shape-inside gets a shape-padding property, which adds inner padding. You can use the shape-outside property in conjunction with the shape-margin property to add a margin around the shape that pushes the flowing content away from the shape, creating more room between it and the content. shape-inside: Wraps content inside a shape.shape-outside: Wraps content around (outside) a shape.The shape properties that accept the above functions as values are: If the image provided cannot be displayed for any reason (such as if it doesn’t exist), then no shape will be applied. The shape is defined by the pixels whose alpha value is greater than the threshold. When an image is passed to a shape property, the browser then extracts the shape from the image based on a shape-image-threshold. We’ll cover the parameters for each of these functions in the examples we’re going to create.Ī shape can also be defined by extracting it from an image with an alpha channel. Some functions take points as parameters others take offsets-but they all eventually draw the shapes as a set of points on the element. Shapes can be created using one of the following functions:Įach shape is defined by a set of points.

The shape function is where you pass in arguments that define the shape that you want to apply to the element. You pass the shape property a shape function as a value. You can apply a shape to an element using one of the Shapes properties.

Codedrop square picture css how to#

If you’re not sure how to do that, have a look at this walkthrough on the Adobe blog. In order to use CSS Shapes in Chrome Canary today, you have to enable the experimental features flag. Soon, CSS Shapes will also allow text inside shapes, like these rhombuses, to adjust to the edges of its container, rather than overflow or get cut off. When the CSS Shapes shape-inside property is implemented, we will be able to make the content also become rhombic, making layouts like the one shown in the following image very much possible. But the content inside the rhombus won’t be affected by the rhombic shape of its container, and will always remain rectangular. For example, today it’s easy to create a rhombic shape in CSS: just rotate the element by 45 degrees, and then rotate the content inside it back so that it lies horizontally on the page. More specifically, it focuses on the shape-outside property and its related properties.Ĭombined with other cutting-edge features such as Clipping and Masking, CSS Filters, and Compositing and Blending, CSS Shapes will allow us to create more polished and sophisticated designs without having to resort to graphics editors like Photoshop or InDesign.įuture levels of CSS Shapes will focus on wrapping content inside a shape as well. This level focuses on the Shapes properties that change the flow of content around a shape. It won’t be long before they’re implemented in other browsers. Browser support #section2ĬSS Shapes are currently supported only in Webkit Nightly and Chrome Canary, but its Module Level 1 has reached the Candidate Recommendation status, so the properties and syntax defined in the spec are pretty stable. Let’s walk through how Shapes work, and how you can start using them. Using CSS Shapes, we can create similar designs for the web. Notice how the text wraps around the circular shape of a bowl in this example. Without Shapes, the text would be rectangular-throwing off the sophisticated touch that takes the design to the next level. Introduced by Adobe in mid-2012, its goal is to provide web designers with a new way to change how the content flows inside and around arbitrarily complex shapes-something we’ve never been able to do before, not even with JavaScript.įor example, notice how the text flows around the circular images in the following design. The new CSS Shapes specification is changing that. 3 days of design, code, and content for web & UX designers & devs.