Pratham (@Prathkum on Twitter) posted on 7:26 PM · Jan 15, 2024
JavaScript is powerful.

But sometimes you can do great things using CSS.

5 CSS things that will blow your mind for sure:

1. Text Portrait
  p {
    background: url("");
    -webkit-background-clip: text;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
  }
  
2. Image rendering
The "image-rendering" CSS property tells the browser how the image should be zoomed-in or zoomed-out.

  img {
    image-rendering: crips-edges;
   }
   
3. Image Carousel using two lines of CSS.
  .container {
    scroll-snap-type: x mandatory;
  }
  
  .slides {
    scroll-snap—align: start;
  }
  
4. CSS Typewriter effect
  .animation {
    animation: typewriter 4s steps(character count) ls 1 normal both,
    blinkCursor 500ms steps(character count) infinite normal;
  }
  
5. Custom cursor
Using "cursor" property, you can change the mouse cursor.

  img {
    cursor: ur1l("/path"), auto;
  }