Looking for inspiration on how to add a twist to your project design? Take a look at those 5 CSS techniques and have fun experimenting with some bold ideas!

Table of Contents

1. Bring back the 90’s with the background-clip
2. Crazy shapes with clip-path
3. It’s all about the details - change text selection color
4. Add filters to your images
5. Check the browser support

Bring back the 90’s with the background-clip

Have you ever wondered how to apply a gradient or a texture to the text in CSS? The good news is you can easily achieve that with the background-clip property!
First, we need to apply the background color to our <h1>, then use the value text for the background-clip property and set the text color to transparent.

<h1 class="wordart">The background is clipped to this text</h1>

h1 { 
     background-color: #ff1493;
     background-image: linear-gradient(319deg, #ff1493 0%, #0000ff 37%, #ff8c00 100%);
}
.wordart {
     -webkit-background-clip: text;
     color: transparent;
}

And voilà, the 90’ style WordArt is ready!

Crazy shapes with clip-path

If you like to experiment with your designs, you might want to try the clip-path property. Clip-path creates a clipping region that sets what part of an element should be shown. Anything outside the clip-path (shape’s boundary) won’t be visible.

To create this simple polygon I applied .clipped class on the image and used this path:

.clipped {
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

How does it work? Well, the set of two values before a comma are X (horizontal axis) and Y (vertical axis) coordinates.

Let’s consider our initial rectangular image. The path (starting from upper right corner where X =0 and Y = 0) would look like this: (0 0, 100% 0, 100% 100%, 0 100%).

Now coming back to our simple polygon - the initial coordinates start exactly in the middle of the X-axis, so that’s why the first pair is X50% and Y0. From there we want to draw a line to the next point which is in the middle of the Y-axis, so what we get is X100% and Y50%. The next line goes from that point to X50% and Y100%, and so on. It can be difficult to wrap your head around it at first, so the best way is to try it yourself and experiment a little!

It’s all about the details - change text selection color

This is a simple one, but it can add that extra touch to your design. To change the color of the selected text use ::selection pseudo element that will override the browser settings and apply the color you choose.

::selection {
      background: black;
      color: white;
}

Add filters to your images

Thanks to the filter CSS property you can add graphical effects like blur or color shift to an element, for example an image or a background.

Below you can see 4 images. First image is the original with no filters applied. The second one is the same pic with the blur effect on it, then goes sepia effect and saturate effect on the last one. Pretty cool, huh?

.blur {
  filter: blur(5px);
  }

.sepia {
  filter: sepia(75%);
 }

.saturate {
  filter: saturate(10%);
}

Check the browser support

Let’s finish off with a handy CSS-rule @supports that allows you to adjust your declarations for CSS properties depending on browser support. State your condition in the parenthesis - the code will be rendered only if the condition is true. If the browser doesn’t understand a given CSS property the code won’t be generated. You can use @supports not to provide an alternative CSS (just make sure that the browser supports @supports!)

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: left;
  }
}

Thanks a lot for reading. For more details don't forget to check MDN Web Docs. Happy CSS-ing!