Looking for inspiration on how to add a twist to your project design? Take a look at these 5 CSS techniques and have fun experimenting with some bold ideas! 1. 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 , then use the value text for the property and set the text color to transparent. <h1> background-clip The background is clipped to this text h1 { background-color: #ff1493; background-image: linear-gradient(319deg, #ff1493 0%, #0000ff 37%, #ff8c00 100%); } .wordart { -webkit-background-clip: text; color: transparent; } < = > h1 class "wordart" </ > h1 And voilà, the 90’ style WordArt is ready! 2. 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 class on the image and used this path: .clipped { : (50% 0, 100% 50%, 50% 100%, 0 50%); } .clipped clip-path polygon 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 the 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! 3. 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 pseudo element that will override the browser settings and apply the color you choose. ::selection { : black; : white; } ::selection background color 4. Add filters to your images Thanks to the CSS property you can add graphical effects like blur or color shift to an element, for example, an image or a background. filter Below you can see 4 images. The 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? { : (5px); } { : (75%); } { : (10%); } .blur filter blur .sepia filter sepia .saturate filter saturate 5. Check the browser support Let’s finish off with a handy CSS-rule 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 not to provide an alternative CSS (just make sure that the browser supports !) @supports @supports @supports @ (display: grid) { { : grid; } } @ not (display: grid) { { : left; } } supports div display supports div float Thanks a lot for reading. For more details don't forget to check . Happy CSS-ing! MDN Web Docs Also published at https://dev.to/jamieswift90/5-simple-css-tricks-to-improve-your-project-or-just-have-fun-trying-nec
