DEV Community

Cover image for 10 CSS3 Tricks Every Developer Should Know (With Examples)
bala senthil
bala senthil

Posted on

10 CSS3 Tricks Every Developer Should Know (With Examples)

#css #tutorial #webdev #html

Introduction

CSS3 is powerful—you can create stunning UI effects without JavaScript. Here are 10 must-know CSS3 tricks with practical examples

1. Smooth Hover Effects

Smooth hover effects make your UI feel modern and interactive. Instead of abrupt changes when users hover over buttons, cards, or images, CSS transitions create a soft animation that improves user experience and visual appeal.

Hover effects are commonly used in:

  1. Buttons
  2. Navigation menus
  3. Cards
  4. Images
  5. Links

Using the transition property in CSS, we can control how the effect animates.

Basic Hover Effect Example

HTML

<button class="btn-hover">Hover me</button>
Enter fullscreen mode Exit fullscreen mode

CSS

.btn-hover{
  background-color: #399292;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-hover:hover{
  background-color: #2ecc71;
}
Enter fullscreen mode Exit fullscreen mode

When the user hovers over the button, the color changes smoothly instead of instantly.

2. CSS Variables (Custom Properties)

CSS Variables (also called Custom Properties) allow you to store reusable values like colors, fonts, spacing, and more. They make your CSS cleaner, easier to maintain, and perfect for building scalable designs. In this guide, you’ll learn how to use CSS variables with real-world examples.

CSS Variables are user-defined values declared using --variable-name and accessed using var().

Why Use CSS Variables?

  1. Reuse values across your project
  2. Easy theme management
  3. Reduce repetition
  4. Improve maintainability
  5. Dynamic updates with JavaScript

Example 1: Basic CSS Variable Usage

HTML

<button class="button-variable">Click Me</button>
Enter fullscreen mode Exit fullscreen mode

CSS

:root{
  --main-color: #399292;
  --text-color: #ffffff;
  --border-none: none;
}

.button-variable{
  background-color: var(--main-color);
  color: var(--text-color);
  border: var(--border-none);
  padding: 10px 15px;
}
Enter fullscreen mode Exit fullscreen mode

CSS Variables are a powerful feature that helps you write cleaner and more flexible CSS. Whether you're building a small website or a large application, using variables can significantly improve your workflow and maintainability.

3. Flexbox Centering (Perfect Alignment)

Centering elements in CSS used to be tricky, but with Flexbox, it becomes simple and powerful. Whether you want to center text, images, or entire layouts, Flexbox provides a clean and responsive way to achieve perfect alignment both horizontally and vertically.

Flexbox uses properties like justify-content and align-items to align elements along the main axis and cross axis.

  1. Horizontal alignment → justify-content
  2. Vertical alignment → align-items

Example 1: Centering Horizontally

HTML

<div class="container">
   <div class="item">Centering Horizontally</div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.container{
  display: flex;
  justify-content: center;
  border: 2px solid #000;
  height: 100px;
}

.item{
  background-color: #2ecc71;
  color: #ffffff;
}
Enter fullscreen mode Exit fullscreen mode

Example 2: Centering Vertically

HTML

<div class="container"></div>
Enter fullscreen mode Exit fullscreen mode

CSS

.container{
  display: flex;
  align-items: center;
  height: 200px;
  border: 2px solid #000;
}
Enter fullscreen mode Exit fullscreen mode

This aligns the child element vertically in the center.

4. Gradient Backgrounds

Gradient backgrounds are a powerful way to make your website visually appealing without using images. CSS gradients allow you to create smooth color transitions, modern UI designs, and eye-catching effects using just code. In this guide, you’ll learn how to use linear, radial, and advanced gradients with real working examples.

Linear Gradient

HTML

<div class="item"></div>
Enter fullscreen mode Exit fullscreen mode

CSS

.item{
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, #2ecc71, #399292);
}
Enter fullscreen mode Exit fullscreen mode

Gradient backgrounds are one of the easiest ways to enhance your UI design. With just a few lines of CSS, you can create beautiful, modern, and dynamic visuals that improve user experience.

5. Box Shadow for Depth

The box-shadow property in CSS is used to add shadow effects around elements. It helps create depth, improve visual hierarchy, and make UI components like cards, buttons, and modals look modern and attractive. In this guide, you’ll learn how to use box-shadow with real working examples.

Basic Box Shadow

HTML

<div class="item"></div>
Enter fullscreen mode Exit fullscreen mode

CSS

.item{
  width: 200px;
  height: 100px;
  background: #ffffff;
  box-shadow: 2px 2px 5px rgb(199 199 199 / 30%);
}
Enter fullscreen mode Exit fullscreen mode

The box-shadow property is a simple yet powerful tool to elevate your UI design. With proper usage, you can create depth, focus, and visually appealing components without using images.

6. Text Overflow Ellipsis

When text content is too long to fit inside a container, it can break your layout. The text-overflow: ellipsis property helps you handle this elegantly by truncating the text and adding ... at the end. In this guide, you’ll learn how to use ellipsis for single-line and multi-line text with real working examples.

Basic Requirements for Ellipsis

HTML

<div class="item">
   <p>This is a very long text that will not fit inside the container</p>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.item p{
  width: 200px;
  border: 1px solid #000;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

Text overflow ellipsis is a small but powerful CSS feature that improves UI design and user experience. It ensures your layouts stay clean and professional even with long dynamic content.

7. Responsive Images

Responsive images ensure that your images look great on all screen sizes—mobile, tablet, and desktop—without breaking layouts or slowing down your website. In this guide, you’ll learn how to make images responsive using CSS and modern HTML techniques with real working examples.

Basic Responsive Image (CSS)

HTML

<img class="responsive-image" src="./images/Bannerimage.png"/>
Enter fullscreen mode Exit fullscreen mode

CSS

.responsive-image{
  max-width: 100%;
  height: auto;
}
Enter fullscreen mode Exit fullscreen mode

Responsive images are essential for modern web development. With simple CSS and HTML techniques, you can ensure your images look perfect on every device while improving performance and user experience.

8. CSS Animations

CSS animations allow you to create dynamic and engaging user interfaces without using JavaScript. From simple hover effects to complex motion designs, animations can improve user experience and make your website feel modern and interactive. In this guide, you’ll learn how to use CSS animations with real working examples.

Simple Fade In Animation

HTML

<div class="item">Simple fade in animation</div>
Enter fullscreen mode Exit fullscreen mode

CSS

@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.item{
  animation: fadeIn 2s ease-in;
}
Enter fullscreen mode Exit fullscreen mode

CSS animations are a powerful way to make your UI more engaging and interactive. With keyframes and a few properties, you can create stunning effects that improve user experience without adding extra complexity.

9. Sticky Positioning

CSS position: sticky allows elements to stick to a specific position while scrolling. It’s commonly used for sticky headers, navigation bars, and sidebars. This feature combines the behavior of both relative and fixed positioning, making it powerful and easy to use.

An element with position: sticky behaves like:

  1. Relative → before scrolling
  2. Fixed → after reaching a defined position

HTML

<div class="container">
   <aside class="sidebar">Sidebar</aside>
   <main class="main">Content</main>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.container {
  display: flex;
}

.sidebar {
  position: sticky;
  top: 20px;
  height: 200px;
  background: #2196F3;
  color: white;
  padding: 10px;
}

.main {
  height: 1500px;
  margin-left: 20px;
}
Enter fullscreen mode Exit fullscreen mode

CSS Sticky Positioning is a simple yet powerful feature that enhances user experience by keeping important elements visible during scrolling. It’s perfect for headers, sidebars, and section labels in modern web design.

10. Clamp for Responsive Fonts

The clamp() function in CSS is a powerful tool for creating responsive font sizes without using media queries. It allows you to define a minimum size, a preferred (scalable) size, and a maximum size—ensuring your text looks perfect on all devices.

Why Use clamp() for Fonts?

No need for media queries
Smooth scaling across screen sizes
Better readability
Cleaner and modern CSS

Responsive Heading

HTML

<h1>Responsive heading</h1>
Enter fullscreen mode Exit fullscreen mode

CSS

h1{
  font-size: clamp(24px, 5vw, 48px);
}
Enter fullscreen mode Exit fullscreen mode

The clamp() function is a modern CSS feature that simplifies responsive design. It helps you create fluid typography and layouts without writing complex media queries, making your code cleaner and more efficient.

Top comments (0)