> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Chalarangelo/30-seconds-of-code/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Articles

> Interactive CSS3 examples covering layouts, styling, animation and user interactions with modern techniques.

# CSS Articles

The CSS article collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as articles for handling user interactions.

## What You'll Find Here

This collection covers three main areas of CSS development:

### Layout Techniques

Learn how to create common layouts with CSS3, using modern techniques such as flexbox and grid. From centering content to creating sticky footers, you'll find practical examples of layout patterns used in production websites.

**Key topics:**

* Flexbox and Grid layouts
* Centering techniques
* Responsive design patterns
* Box model mastery

### Visual Styling

Discover creative ways to style elements using modern CSS features. These examples demonstrate how to create visual effects that enhance user experience without relying on JavaScript.

**Key topics:**

* Gradient effects
* Custom scrollbars
* Shadows and depth
* Shapes and geometric designs

### Animations & Effects

Explore interactive animations and hover effects that bring your interfaces to life. All examples use pure CSS, making them performant and easy to implement.

**Key topics:**

* Hover effects
* Transitions and transforms
* Keyframe animations
* Interactive elements

## How to Use This Collection

Each article includes:

* Complete HTML + CSS code examples
* Visual descriptions of the effect
* Real-world use cases
* Browser compatibility notes where relevant
* Live CodePen demonstrations

All examples are extracted from production-ready code and can be adapted for your projects.

## Getting Started

Explore the different sections:

* **[Layout](/css/layout/overview)** - Master modern CSS layout techniques
* **[Visual](/css/visual/overview)** - Learn creative styling approaches
* **[Animation](/css/animation/overview)** - Create engaging interactions