Core CSS3 Features and How They Enhance Web Design

✨ Key Features of CSS3

CSS3 introduces powerful features that enhance both visual and functional aspects of modern websites.

🟢 Rounded Corners with border-radius

.box {
  border-radius: 10px;
}

✅ Easily create smooth corners without images or complex hacks.

🌫️ Shadows

🔲 box-shadow — for elements:

.box {
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

🔤 text-shadow — for text:

h1 {
  text-shadow: 1px 1px 2px gray;
}

🎨 Gradients

🔁 Linear Gradient:

background: linear-gradient(to right, red, orange);

🎯 Radial Gradient:

background: radial-gradient(circle, red, yellow, green);

🎞️ Transitions & Animations

Smooth transitions:

button {
  transition: background-color 0.3s ease;
}

Keyframe animations:

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

📐 Flexbox & Grid Layouts

• Flexbox — one-dimensional, row/column layout
• Grid — two-dimensional, rows and columns

Enable responsive, complex layouts with ease.

📱 Media Queries

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

📲 Apply styles based on screen size or device features.

🎯 These CSS3 features allow developers to create aesthetically pleasing, interactive, and user-friendly interfaces efficiently.