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...
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...
Also look at the CSS Image Shapes chapter to learn how to shape (clip) images to circles, ellipses and polygons.Thumbnail ImagesUse the border property to create thumbnail images.Thumbnail Image: Example img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px;} ...
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...
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.
I am not done with using CSS transform to make shapes. Let's make a parallelogram: .parallelogram { width: 130px; height: 75px; transform: skew(20deg); } This time the element has a skew applied that 'shoves' the top over at a 20 degree angle. ...
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 @page at-rule is a CSS at-rule used to modify different aspects of printed pages. It targets and modifies the page's dimensions, orientation, and margins. The @page at-rule can be used to target all pages in a print-out or a subset using its various
Nowadays, popular web browsers implement various standard CSS properties to adjust HTML element shapes according to your design requirements. We can create stylish, pixel-perfect corners using these CSS features. In this tutorial, we’ll first demonstrate how to create rounded corners and then show ...