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: Inserts 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 you need to apply 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

A Linear Gradients 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, have 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 resize, 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.

Leave a Reply