The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties likeborder-radiusand lots of magic numbers until we get something that feels kinda close. And that’s before we even get into wavy patterns, which are more difficult. “S...
We’re basically drawing the shape of a diamond where two of the points are set way outside the bounds of the hexagon we’re trying to make. This is perhaps the very first lesson for drawing CSS shapes:Allow yourself to think outside the box — or at least the shape’s boundaries. L...
I wrote a more detailed article about how to create it (including a step-by-step video). The idea is to have repeating conic gradients and apply filters to make them look smooth.You can achieve this effect in many different shapes by changing the number of backgrounds or their sizes. ...
Note how I’m updating theclip-pathto include four new points, three of which are outside the element. Since the part we’re cutting is outside, it’s not visible, but if we add a bigbox-shadowwe make if visible. I’ve used a blue color to illustrate the idea above, but in the...
When we make a new component on a website, we’re effectively creating rectangles of different sizes, whether we realise it or not. But what happens if we want to experiment a little? How many different ways are there to make shapes?
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
In a previous article, we created flower-like shapes using modern CSS (mask, trigonometric functions, etc). This article is a follow-up where we will create a similar shape and also introduce some fancy animations. Here is a demo of what we are building.
make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } // Negative margin nested rows out to align the content of columns .row { margin-left...
See the PenCodePen Home Responsive multi-line ribbon shapesbyTemani Afif. Wrapping Up We looked at two ribbon variations that use almost the same code structure, but we can make many, many more the same way. Your homework, if you accept it, will be to make the following variations using...
Shapes are everywhere in web design. Squares and rectangles are the most common because they maximize space on the rectangular devices they’re displayed on (desktops, tablets, mobile devices, even smart swatches). But if you want to make your website stand out and catch the visitor’s eye,...