Skip to content
Related Articles

Related Articles

Improve Article

5 Amazing CSS Styles that Every Developer Should Know

  • Last Updated : 26 Jul, 2021

CSS (Cascading Style sheets) helps the developer to enhance the visual appearance of web pages, In other words, we can say that CSS adds life to web pages and beautifies it. Using CSS, we can change the layout, color, fonts, images, and the best part is that for a particular style or layout we can write a code once and use it many times whenever we want to implement it across our website which is very advantageous and time-saving.

Here we will discuss 5 CSS tricks that can make your website stand apart.

1. Customized Cursor: Ever felt bored using the same ordinary cursor every time? What if you could customize your cursor according to your wish? Imagine a cursor that has your image or something unique? Sounds cool right? This can be done simply by using CSS in a single line of code. In the below example, we have used three different images for the cursor: GeeksforGeeks logo, an image of cheese, and a rocket, you can use any image of your choice.

cursor: url("anyimage.png"), pointer;



 

Example:

index.html




<!DOCTYPE html>
<html>
  
<head>
    <title>Customized Cursor</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
  
<body>
    <div class="container">
        <button>GFG Cursor</button>
        <button>Cheese Cursor</button>
        <button>Rocket Cursor</button>
   </div>
</body>
  
</html>

style.css




body {
    background-color: pink;
    padding: 0;
    margin: 0;
}
.container {
    width: 690px;
    height: 220px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
button {
    font-size: 30px;
    background-color: white;
    border: none;
    outline: none;
    text-transform: uppercase;
    color: black;
    width: 200px;
    padding: 20px;
    padding-left:40px
    padding-right:40px;
}
button:nth-child(1) {
cursor: url("gfg.png"),pointer;
}
button:nth-child(2) {
cursor: url("cheese.png"),pointer;
}
button:nth-child(3) {
cursor: url("rocket.png"),pointer;
}

Output:

Limitations for using any desired image as a cursor:

  • Any image format can be used like JPG, PNG, or BMP
  • The image size should be 32×32px, any image size greater than this won’t work.

2. Shadow Effect: The shadow effect is a very simple yet amazing effect that gives a 3D touch to our text.

h1 {
    font-size: 5rem;
    text-shadow: 5px 5px 0px green;
}

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Shadow Effect</title>
    <style>
        h1 {
            font-size: 5rem;
            text-shadow: 5px 5px 0px green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
</body>
  
</html>

Output:

3. Colorful Filters: The color of any image can be changed without using any editing tool, this can be done easily using the CSS filter property.



 

Example:

index.html




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS FILTERS</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
  
<body>
    <div class="image">
        <img class="original" src="gfg.jpg">
        <img class="brightness" src="gfg.jpg">
        <img class="huerotate" src="gfg.jpg">
        <img class="grayscale" src="gfg.jpg">
        <img class="blend" src="gfg.jpg">
    </div>
</body>
  
</html>

style.css




.image img {
  max-width: 300px;
}
.original {
}
.brightness {
  filter: brightness(150%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
  
.grayscale {
  filter: grayscale(100%);
}
  
.blend {
  filter: invert(1) hue-rotate(260deg);
}

Output:

Property tip: The color of any image can be changed to many colors, just by changing the value of degrees.
Example:

filter: invert(1) hue-rotate(90deg);
filter: invert(1) hue-rotate(150deg);

4. Background Clipped Text: Almost every one of us has tried giving fancy background to our text which is very simple. ‘Background clipped text’ means trimming the background image to the text so that it looks more attractive and cool.
We can simply do it by the below line of code, where ‘anyimage’ is the desirable image of your choice which you want to clip.

background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Background Clipped Text</title>
    <style>
        h1 {
            font-size: 12rem;
            background-image: url('anyimage.jpg');
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
</body>
  
</html>
<h1>GeeksforGeeks</h1>
</body>
</html>

Output: 

You can even clip a GIF in the background of the text! this can be done using the same above code just replacing the name of the image with the name of the GIF

5. Drop Caps Text: ‘Drop caps’ is a text effect in which the first letter of the first paragraph is made larger to create an eye-catchy effect, it is often used in newspapers, magazines, and novels.

p::first-letter {               
    color:green;           
    font-size: 3.9rem;
    float: left;
    padding-right: 4px;
}

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Drop Effect</title>
    <style type="text/css">
        .content {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
        }
  
        .article {
            width: 50%;
            margin: 20px;
        }
  
        p::first-letter {
            float: left;
            line-height: 30px;
            font-size: 50px;
            padding-right: 5px;
            padding-left: 5px;
            color: green;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-bottom: -5px;
            margin-right: 5px;
        }
  
        p {
            font-size: 14px;
        }
    </style>
</head>
  
<body>
    <div class="content">
        <div class="article">
            <p>
                Geeksforgeeks is a computer science 
                portal for geeks. The content on 
                GeeksforGeeks has been divided into 
                various categories from programming 
                languages, topic-wise practice,
                development , data structures , 
                algorithm to interview preparation,
                company- wise interview experience, 
                recruitment procedure of a company
                it has verything covered. A drop cap 
                is a effect in which the first letter 
                of the first paragraph is made larger 
                to create an eye catchy effect it is 
                often used in newspaper , magazines 
                and novels.
            </p>
        </div>
    </div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :