CSS one-liners 🚧

Slick smooth scroll

To get smooth animated scroll happens when you click on an anchor element with #

e.g. <a href="#intro"> .

html {
  scroll-behavior: smooth;
}

HTML5 theming for form elements

input {
  accent-color: crimson;
}

::marker is a pseudo element to get cool custom bullet points without using ::before

li::marker {
  content: "🤩 ";
}

Nicer read more effect with ... using -webkit-line-clamp.

li::marker {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* number of lines show */
  -webkit-line-clamp: 3;
  overflow: hidden;
}

In the above example, the text will be truncated to 3 lines.

Text gradient using background-clip

p {
  background: linear-gradient(to right, #e66465, #9198e5);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@ragavkumarv

swipe to next ➡️