Amazing CSS Tricks You Might Not Know About

Reading time: 5 minutes.

CSS (Cascading Style Sheets) is a cornerstone technology of the web, used by web developers to create visually engaging websites, user interfaces for web applications, and even complex animations. While most developers are familiar with the basics of CSS, there are many lesser-known tricks and techniques that can significantly enhance your web development skills. In this article, we’ll explore some amazing CSS tricks that you might not be aware of, each of which can add a unique flair or functionality to your web projects. I won’t be doing a deep-dive on each – this post is more about stimulating your curiosity!

1. CSS Variables for Dynamic Styling

CSS variables, also known as custom properties, are entities defined by CSS authors that contain specific values to be reused throughout a document. They follow the format --name: value;. This can be incredibly useful for themes, allowing you to change the color scheme or font stack of your website with minimal effort. For example:

:root {
  --primary-color: #ff4500;
  --secondary-color: #333;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

2. The Power of calc()

The calc() function allows you to perform calculations when specifying CSS property values. It can be used for dynamic sizing, complex layouts, and responsive design. For instance, you can create a three-column layout where the middle column is always twice as wide as the others:

.column {
  float: left;
  width: calc(33.33% - 20px);
}

.middle-column {
  width: calc(66.66% - 20px);
}

3. Clip-Path for Complex Shapes

CSS’s clip-path property lets you clip an element to a basic shape or an SVG source. It can be used to create interesting effects, like circular images or dynamic hover effects. For example, creating a circular profile picture:

.profile-pic {
  clip-path: circle(50%);
}

4. Using Blend Modes

Blend modes in CSS can be used to determine how an element’s content should blend with the content of the element’s parent and the element’s background. This can create a variety of visual effects, such as blending images together or changing how colors interact:

.blended-image {
  background-blend-mode: multiply;
}

5. Custom Cursors

CSS allows you to change the cursor that appears when hovering over elements. Beyond the default set of cursors, you can also specify a custom image:

.custom-cursor {
  cursor: url('path-to-cursor-image.png'), auto;
}

6. Responsive Typography with vw Units

Viewport width (vw) units allow font sizes to adjust responsively to the width of the viewport, making your typography more fluid and adaptable to different screen sizes:

body {
  font-size: 2vw;
}

7. CSS Grid for Complex Layouts

CSS Grid Layout is a powerful 2-dimensional system that allows developers to create complex layouts easily and consistently. It’s perfect for designing webpages with a grid-based layout:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

8. Subgrid

Subgrid, a feature of CSS Grid Layout Level 2, allows a grid item to inherit the grid tracks of its parent grid container. This is especially useful for aligning elements within nested grids:

.item {
  display: grid;
  grid-template-columns: subgrid;
}

9. Filter Effects

CSS filters can be applied to elements to achieve various visual effects, like blurring, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia:

.filtered-image {
  filter: blur(5px) contrast(200%);
}

10. Advanced Pseudo-Classes

CSS pseudo-classes like :nth-child, :nth-last-child, :nth-of-type, and :not() can be used to select elements based on their position in a group of siblings or their type. For example, styling the first and last item differently:

li:first-child {
  color: red;
}
li:last-child {
  color: blue;
}

11. Custom Fonts with @font-face

Using the @font-face rule, you can specify custom fonts for your webpages, giving you more control over typography:

@font-face {
  font-family: 'MyCustomFont';
  src: url('font.woff2') format('woff2');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

12. Shape Outside for Text Wrapping

The shape-outside property allows text to wrap around complex shapes, other than the

default rectangle. This can create more visually appealing layouts:

.shape-wrap {
  shape-outside: circle(50%);
  float: left;
  width: 50%;
  height: 50%;
}

13. Animation with Keyframes

CSS allows you to create animations by transitioning between multiple keyframes. This can bring your web pages to life:

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

.slider {
  animation: slidein 3s ease-in-out;
}

14. Media Queries for Responsive Design

Media queries are a cornerstone of responsive design, allowing you to apply CSS rules based on screen size, resolution, and other properties:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

15. Using ::before and ::after for Content Injection

The ::before and ::after pseudo-elements can be used to insert content into a page. This is especially useful for decorative purposes or when you need to add content without altering HTML:

.decoration::before {
  content: '★';
  color: gold;
}

16. Aspect Ratio Boxes

Creating boxes with a specific aspect ratio is often needed for responsive design. This can be done using the padding-top or padding-bottom properties:

.aspect-ratio-box {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
}

17. Flexbox for More Flexible Layouts

Flexbox is a layout model that allows items in a container to be aligned and distributed efficiently and predictably. It’s particularly useful for complex applications and webpages where the size of an item is dynamic or unknown:

.flex-container {
  display: flex;
  justify-content: space-around;
}

18. Object-Fit for Images and Videos

The object-fit property is used to specify how an <img> or <video> should be resized to fit its container. It’s similar to background-size for background images:

.responsive-image {
  object-fit: cover;
}

19. Scroll Snap for Smoother Scrolling Experiences

CSS Scroll Snap provides a way to control the scroll positions of scroll containers. This is useful for creating carousels or paginated scrolling experiences:

.scroll-container {
  scroll-snap-type: x mandatory;
}

.scroll-item {
  scroll-snap-align: start;
}

20. The :focus-within Pseudo-Class

The :focus-within pseudo-class is used to select an element if the element or any of its descendants are focused. This is particularly useful for form inputs and accessibility:

.form-group:focus-within {
  background-color: lightgreen;
}

Conclusion

CSS is a powerful tool in the web developer’s arsenal, and mastering these tricks can help you create more efficient, dynamic, and visually appealing websites. From responsive design to animations, the possibilities are endless. Experimenting with these techniques will not only improve your skills but also make your websites stand out in the digital world. Remember, the key to mastering CSS is practice and continuous learning. Happy coding!