20 Lesser-Known CSS Tricks — The Ultimate Collection

CSS is a powerful language that allows you to bring creativity to life on the web. While many developers are familiar with the basics, there are countless lesser-known tricks that can take your web design skills to the next level. Over the past few months, I’ve compiled a collection of 20 CSS tricks that you might not know about, but will definitely find useful. Let’s dive into the ultimate collection of CSS secrets!

01. Smooth Scrolling on Your Website

Enable smooth scrolling throughout your website with a single line of CSS. Add scroll-behavior: smooth to the element.

html {
  scroll-behavior: smooth;
}

02. Attribute Selector for Links

Target links that start with “https” using an attribute selector. This is perfect for styling external links differently from internal ones.

a[href^="https"] {
  color: blue;
}

03. Combining Sibling Elements with ~

Select and style all

elements that are siblings following an

using the general sibling combinator ~.

h2 ~ p {
  color: blue;
}

04. The :not() Pseudo-Class

Apply styles to elements that do not match a certain selector. For instance, style all list items that do not have the class special.

li:not(.special) {
  font-style: italic;
}

05. Viewport Units for Responsive Typography

Use viewport units like vw (viewport width) and vh (viewport height) to create responsive typography that scales with the size of the screen.

h1 {
  font-size: 5vw;
}

06. Centering Elements with place-items

Center items both vertically and horizontally within a container using the place-items shorthand property.

.container {
  display: grid;
  place-items: center;
}

07. Create a Hover Effect with :hover and transform

Add a subtle hover effect to your buttons using the :hover pseudo-class and transform property.

button:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

08. Custom Cursors

Change the cursor to something more unique when hovering over certain elements.

button {
  cursor: url('custom-cursor.png'), auto;
}

09. Variable Fonts for Better Typography

Take advantage of variable fonts to adjust the weight, width, and slant of your text with a single font file.

body {
  font-family: 'Inter', sans-serif;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}

10. Line-Clamping Text

Limit the number of lines in a block of text, adding ellipsis for overflow, with just a few lines of CSS.

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

11. Custom Scrollbar Styling

Style the scrollbar to match your website’s design using the ::-webkit-scrollbar pseudo-elements.

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: lightgrey;
}

12. Flexbox for Equal-Height Columns

Use Flexbox to create columns that automatically adjust to equal height.

.container {
  display: flex;
}

.column {
  flex: 1;
}

13. Parallax Scrolling Effect

Create a simple parallax scrolling effect by using background-attachment: fixed.

.hero {
  background-image: url('background.jpg');
  background-attachment: fixed;
  background-size: cover;
}

14. CSS Grid for Layouts

Use CSS Grid to create complex layouts with minimal code.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

15. Dark Mode with CSS Variables

Implement dark mode on your website using CSS variables and the @media (prefers-color-scheme: dark) media query.

:root {
  --bg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: white;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

16. Text Stroke

Add a stroke to your text using the -webkit-text-stroke property.

h1 {
  -webkit-text-stroke: 2px black;
  color: white;
}

17. Sticky Elements

Make an element stick to the top of the viewport as you scroll using position: sticky.

header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1000;
}

18. Gradient Borders

Create a gradient border using background-clip and border properties.

button {
  border: 5px solid transparent;
  background-image: linear-gradient(to right, red, blue);
  background-clip: border-box;
  border-radius: 10px;
}

19. CSS Shapes

Use the clip-path property to create complex shapes.

div {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: teal;
}

20. Responsive Images with object-fit

Ensure your images are always displayed correctly within their container with object-fit.

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Conclusion

These 20 lesser-known CSS tricks are just the tip of the iceberg. CSS is a vast and powerful tool that allows for incredible creativity in web development. By mastering these tricks, you’ll be able to take your designs to the next level and create websites that are not only beautiful but also functional and user-friendly.

That’s all for today.

And also, share your favourite web dev resources to help the beginners here!

Connect with me:@ LinkedIn and checkout my Portfolio.

Explore my YouTube Channel! If you find it useful.

Please give my GitHub Projects a star ⭐️

Thanks for 27105! 🤗