CSS Tips & Tutorials

Accessible clickable card designs illustration.

Clickable and Accessible Card Designs

Last updated:
In this tutorial, I'll guide you through making an entire card block clickable within Bricks Builder using a bit of custom CSS. We'll also ensure the design adheres to accessibility standards for a better user experience.
Glassmorphism and mesh Gradients with CSS

Glassmorphism and Gradient Mesh Effects

Posted:
When building websites, adding cool and modern effects can significantly enhance the overall design and user experience. Two popular effects currently trending are Glassmorphism and gradient meshes.
Beginners guide to BEM naming

A Beginner’s Guide To BEM Naming

Last updated:
BEM (Block, Element, Modifier) is a CSS naming convention that organizes code by defining reusable blocks, their elements, and modifiers. It enhances code clarity, prevents style conflicts, and simplifies maintenance, making it ideal for new web designers.
Man promoting dark mode dashboard code snippet.

Customize Your WordPress Dashboard with Dark Mode

Last updated:
Are you tired of the bright white WordPress dashboard and looking for a change? Dark mode is an increasingly popular feature that can make your dashboard easier on the eyes, especially during late-night sessions.
Web designer presenting accessible card design tips.

Improving Accessibility with Semantic CSS Card Design

Posted:
Accessibility in web design is a crucial aspect that often goes unnoticed. While it may not be the most exciting topic, it is essential to ensure that everyone can access and navigate websites seamlessly.
Man explaining CSS viewport units with code background.

Demystifying VH, DVH, SVH, and LVH in CSS

Last updated:
As a beginner, the array of CSS units can seem daunting. Don't worry! This guide is written to help you understand four specific units: VH, DVH, SVH, and LVH. These units are crucial for creating responsive designs that look great on any device.  Let's dive in and demystify these terms with practical examples.
Man presenting animated 404 error webpage design concept.

Creating a Custom Animated 404 Page with Bricks

Last updated:
In the digital realm, encountering a '404 Page Not Found' error can be a frustrating experience. However, with a bit of creativity, we can turn this inconvenience into an engaging and interactive moment for our website visitors.
css line clamp

Control Text Line Length With Line-Clamp

Last updated:
CSS line-clamp enables sleek management of overflowing text by limiting visible lines in your web designs! This guide will swiftly elevate your UI creation skills, whether you're a beginner or intermediate. Dive in to master text truncation with line-clamp and boost your designs!
12 Next