Skip to main content

5 CSS Tips and Tricks to Try in Your Next Project

 

5 CSS Tips and Tricks to Try in Your Next Project



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 <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!



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 .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 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 ::selection pseudo element that will override the browser settings and apply the color you choose.

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


4. 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. 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?

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

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

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


5. 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 codewon’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.








Comments

Popular posts from this blog

Organizing Data In Table: A Quick Guide

  Organizing Data In Table: A Quick Guide We can use tables to structure data in columns and rows. The table is the HTML way to lay out the data. The CSS way to create the layout on the web page is  CSS float ,  flexbox , and  CSS grid . We cover an example to understand how to create a table on the web page. You can view the HTML table example at the below codepen link: https://codepen.io/taimoorsattar/pen/NWpdwbp For example, we can create a table in HTML for customer’s grocery item bill as below: < table border = "3" cellpadding = "10" cellspacing = "0" > < caption > Grocery Items Bill </ caption > < thead > < colgroup > < col width = "60%" > < col width = "20%" > < col width = "20%" span = "1" style = "background-color:#f1f1f1;" > </ colgroup > < tr > < th align = ...

Building A Node.js Based CLI For Real-Time COVID-19 Vaccination Tracking

Why Build? As we already know the whole world is suffering from COVID-19 and the vaccinations are going in full swing everywhere. Finding a slot is getting tougher in our country India as we have a huge population to be vaccinated. Numerous times we have to go to CoWin site to search for a slot and slots are always full. It is pretty time-consuming and irritating. Being a developer, I thought most of the time is usually spent by us in the terminal so why can't we have a basic terminal-based app to save time. So this post will help you in two ways     Learn how to create Node.js based CLI's     Get real-time info about vaccination slots for your area. Let's begin our initial setup! Pre-requisite  – We are assuming you have installed Node.js and npm, If not you can install from  here So as a first step lets initialize our project using command npm init Enter the basic details as shown below. This will create package.json file in the folder cowinCLI. The ne...