5 CSS tricks to improve your project (or just have fun trying) 
Tags: css, codenewbie, design, html
Published: 2021-05-28 13:07:21


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! 

<br>
# Table of Contents
1. [Bring back the 90’s with the background-clip](#backround-clip)
2. [Crazy shapes with clip-path](#clip-path)
3. [It’s all about the details - change text selection color](#selection)
4. [Add filters to your images](#filter)
5. [Check the browser support](#supports)
<br>

## Bring back the 90’s with the background-clip <a name="backround-clip"></a>

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!  

![background-clip example](https://uploads-ssl.webflow.com/6033cf9dce54c65d97d57571/60b0d4be55ffef5042a0f68e_WordArt.png)

<br>

## Crazy shapes with clip-path <a name="clip-path"></a>



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.

![cliped image example](https://uploads-ssl.webflow.com/6033cf9dce54c65d97d57571/60b0d4beb88c74e7f354074a_Polygon.png)

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%)`.

![rectangulatr image](https://uploads-ssl.webflow.com/6033cf9dce54c65d97d57571/60b0d4c9d8c5da9d98c7eb07_IMG_4378.jpeg)

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! 



<br>

# It’s all about the details - change text selection color <a name="selection"></a>


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;
}
```

![Selected text](https://uploads-ssl.webflow.com/6033cf9dce54c65d97d57571/60b0d4bcc9692d855994e650_Selected%20Text.png)

<br> 

## Add filters to your images <a name="filter"></a>


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%);
}
```

![Examples of images with filer on](https://uploads-ssl.webflow.com/6033cf9dce54c65d97d57571/60b0d4c4e8a72928f1879813_Images%20with%20filter%20on.png)

<br>

# Check the browser support <a name="supports"></a>


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;
  }
}
```
<br>
Thanks a lot for reading. For more details don't forget to check [MDN Web Docs](https://developer.mozilla.org/). Happy CSS-ing!