CSS

CSS Simplified: Advanced Tricks Every Designer Should Know

by

CSS is the backbone of beautiful and interactive web designs. Advanced CSS techniques enhance the user experience by making your websites dynamic, responsive, and visually appealing. Let’s dive into each topic with practical examples. In this blog, we’ll explore CSS Counters, Pseudo-Classes (:has() and :not()), the resize property, and linear gradients on text.

1. CSS Counters: Dynamic Numbering

If you’re looking to add automatic numbering to things like ordered content such as lists, steps, or chapters without manually updating numbers to your web designs, then CSS counters are a fantastic way to do it without using JavaScript or hardcoding numbers.

What Are CSS Counters?

CSS counters are like variables in CSS that allow you to add, reset, and display numbers dynamically in your design

Key Properties

  1. counter-reset: Initializes or resets a counter.
  2. counter-increment: Increases the counter’s value.
  3. content: Insert the counter’s value (or other content) into the page.

Beginner’s Approach (Without Counters)

When starting out, you may manually hardcode numbers using HTML and CSS. Here’s a simple example of creating a numbered list without using CSS counters.

Example: Numbered List Without Counters

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manual Numbering</title>
  <style>
    /* Styling the list */
    .item {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .number {
      color: #1e90ff;
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <div class="item">
    <span class="number">1.</span> Apples  // Manualy adding numbers
  </div>
  <div class="item">
    <span class="number">2.</span> Bananas
  </div>
  <div class="item">
    <span class="number">3.</span> Cherries
  </div>
</body>
</html>

Result

Manual Numbering
1. Apples
2. Bananas
3. Cherries

Pro Approach: Automating Numbers with CSS Counters

CSS Counters dynamically handle numbering, saving time and improving maintainability.

Example: Automatic Step Numbering with CSS

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Numbering</title>
  <style>
    body {
      counter-reset: step-counter; /* Initialize counter */
    }
    .step::before {
      counter-increment: step-counter; /* Increment counter */
      content: counter(step-counter) ". "; /* Display counter value */
      font-weight: bold;
      color: #1e90ff;
      margin-right: 5px;
    }
    .step {
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="step">Open the browser</div>
  <div class="step">Search for "CSS Tricks"</div>
  <div class="step">Read this guide</div>
</body>
</html>

Result

Open the browser
Search for “CSS Tricks”
Read this guide

Why Use CSS Counters?

  1. SEO Benefit: Automated numbering keeps content logically structured, improving readability for search engines.
  2. Ease of Use: Add or reorder steps without modifying numbers manually.

2. CSS Pseudo-Classes :has() and :not() : Dynamic Styling Made Easy

The :has() and :not() pseudo-classes are powerful tools in CSS that allow you to target elements based on their contents or the presence of other elements inside them.

Beginner’s Approach (Without has())

Let’s say you want to style a list item based on whether it contains a specific element (like a link), or style a button unless it has a certain class.

Example: Simple Selection Without :has()

<style>
 .highlight {
    color: blue;
    font-weight: bold;
  }
</style>

<ul>
  <li class="highlight"><a href="#">Link 1</a></li>
  <li>Plain Item</li>
</ul>

Result

Pro Approach: Use :has() for Dynamic Styling

The :has() pseudo-class selects a parent element if it contains certain child elements. This is particularly useful when applying styles to a parent based on its children, something CSS couldn’t traditionally do without JavaScript.

Example: Styling a List Item Containing a Link

<style>
  li:has(a) {
    color: blue;
    font-weight: bold;
  }
</style>
<ul>
  <li><a href="#">Link 1</a></li>
  <li>Plain Item</li>
</ul>

Result

Why Use :has()?

  • Eliminates extra HTML classes.
  • Dynamically applies styles based on content.

Pro Approach: Excluding Items with :not()

The :not() pseudo-class excludes specific elements from a selection.

Example: Style Non-Disabled Buttons

<style>
  button:not(.disabled) {
    background-color: green;
    color: white;
    cursor: pointer;
  }
  button.disabled {
    background-color: gray;
    cursor: not-allowed;
  }
</style>
<button>Enabled Button</button>
<button class="disabled">Disabled Button</button>

Result

Why Use :not()?

  • Cleanly excludes elements from styling.
  • Simplifies logic for conditional designs.

3. Linear Gradients on Text: Stunning Visual Effects

Linear Gradient on Text in CSS is a type of linear gradient in which the text is filled with colour. Text gradient CSS is very easy to implement, has wonderful visual effects, very useful tool for our website if we know how to create a text gradient effect with our text.

Beginner Approach: Gradient Background

Many beginners apply gradients as backgrounds instead of directly on the text.

Example: Gradient Background

<style>
  .gradient-background {
    background: linear-gradient(to right, red, blue);
    color: white;
    padding: 10px;
    display: inline-block;
  }
</style>
<div class="gradient-background">Gradient Background</div>

Result

Gradient Background

Pro Approach: Gradient Text with background-clip

With -webkit-background-clip and -webkit-text-fill-color, apply gradients directly to the text.

Example: Stunning Gradient Text

<style>
  .gradient-text {
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    font-weight: bold;
  }
</style>
<h1 class="gradient-text">Beautiful Gradient Text</h1>

Result

Beautiful Gradient Text

Why Use Gradient Text?

  • Creates visually stunning headers and titles.
  • Boosts user engagement with dynamic designs.

4. The Resize Property: Interactive Resizing

The resize property allows your users to resize elements interactively like text areas or containers manually by dragging their edges. With some detailed knowledge about resizing, beginners and advanced users can style this behavior differently.

Beginner Approach: Default Resizing

Beginners often rely on default browser behavior for resizing elements. They use the resize property without much customization and focus on simple use cases.

Example: Resizable Text Area

 <style>
    /* Enable resizing for the text area */
    textarea {
      width: 300px;
      height: 150px;
      resize: both; /* Allow resizing both horizontally and vertically */
      overflow: auto; /* Ensure scrollbars appear when content overflows */
    }
  </style>
<body>
  <h1>Resizable Text Area</h1>
  <textarea placeholder="Type something..."></textarea>
</body>

Result

Beginner Resize Example

Resizable Text Area

Explanation:

  • resize: both Allows the user to resize the element in both horizontal and vertical directions.
  • Default Behavior: Relies on the browser’s built-in resize handles.

Pro Approach: Custom Resizing

Control resizing directions and dimensions for a better user experience

Example: Horizontal Resizing with Constraints

<style>
  .resizable {
    resize: horizontal; /* Restrict to horizontal resizing */
    overflow: hidden;
    min-width: 200px;
    max-width: 600px;
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>
<div class="resizable">Resize me horizontally only!</div>

Result

Resize me horizontally only!

Why Use Resizing?

  • Improves interactivity for user input.
  • Prevents distorted layouts with restricted dimensions.

5. CSS Scroll-Snap: Easy Scrolling for Sliders and Carousels (Boost User Engagement)

CSS Scroll-Snap helps you make smooth and easy scrolling experiences for sliders, carousels, and lists. It makes sure users stop at the right points while scrolling, making your website easier to use and more fun.

What Is CSS Scroll-Snap?

Scroll-snap is like “sticky” stops on a scrollable section. It works like flipping through a book or sliding between photos in a gallery. Users feel in control and don’t get lost while scrolling.

Main Features of CSS Scroll-Snap

scroll-snap-type

This is used on the main container to set how the snapping works. For example, scroll-snap-type: x mandatory; makes the section snap to each item horizontally.

scroll-snap-align

This is added to each item to decide how they snap into place. It tells the browser where to stop the scroll for each item.

scroll-padding

This adds space around the snap points, so the scrolling feels smooth and doesn’t stop too abruptly.

Beginner’s Way (Without Scroll-Snap)

When starting out, you might create sliders using JavaScript or regular CSS. While they work, they don’t always have smooth snapping, and users might find it hard to navigate.

Example: Basic Slider Without Scroll-Snap

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      overflow-x: scroll;
      scroll-behavior: smooth;
    }
    .item {
      flex: 0 0 100%;
      background-color: #f0f0f0;
      text-align: center;
      padding: 50px 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Slide 1</div>
    <div class="item">Slide 2</div>
    <div class="item">Slide 3</div>
  </div>
</body>
</html>

Result

Slide 1
Slide 2
Slide 3

Explanation:

A horizontal slider that users can scroll through manually. It doesn’t stop neatly on each slide.

Pro Way: Smooth and Snapping Slider Using CSS Scroll-Snap

With CSS Scroll-Snap, you can create sliders that snap perfectly into place. This makes the design feel more polished and easier for users to navigate.

Example: Smooth Slider with Scroll-Snap

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Main scrollable area */
    .container {
      display: flex;
      overflow-x: scroll; /* Enables horizontal scrolling */
      scroll-snap-type: x mandatory; /* Ensures items snap horizontally */
      gap: 10px; /* Adds space between items */
      scroll-behavior: smooth; /* Makes the scrolling smooth */
    }

    /* Each item in the slider */
    .item {
      flex: 0 0 100%; /* Each slide takes up the full width */
      scroll-snap-align: center; /* Makes items snap in the center */
      background-color: #f0f0f0; /* Light background for items */
      text-align: center; /* Centers text inside the item */
      padding: 50px 20px; /* Adds padding around content */
    }

    /* Optional: Style the body for better presentation */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Slide 1</div>
    <div class="item">Slide 2</div>
    <div class="item">Slide 3</div>
  </div>
</body>
</html>

Result

Slide 1
Slide 2
Slide 3

Explanation:

  • scroll-snap-type: x mandatory
    This tells the browser to make the slider snap horizontally and stop at each item.
  • scroll-snap-align: center
    Each item snaps into place at the center of the viewport, making it easier for users to focus on the content.
  • scroll-behavior: smooth
    This makes the slider feel more polished by adding smooth scrolling animations.
  • gap: 10px
    Adds space between the items to make the slider look cleaner.

Why Use CSS Scroll-Snap?

  • Better User Experience: Makes sliders and carousels more intuitive.
  • Improved Engagement: Users can easily focus on one item at a time.
  • SEO Boost: Smooth scrolling and easy navigation keep users on your site longer.

Leave a Reply