Advanced CSS, Animations, Hover Effects & Modern UI Design

Introduction

In this lecture we move from basic styling to advanced CSS techniques that make websites look modern, engaging, and professional.

• Hover Effects
• CSS Transitions
• CSS Transform
• Box Shadow & Border Radius
• Animations and @keyframes
• Modern Product Card UI Project

1. CSS Hover Effects

Hover effects change the style when the user moves the mouse over an element. यह interaction को बेहतर बनाते हैं और website को feel देते हैं.

button:hover {
  background-color: blue;
  color: white;
}

2. CSS Transition

Transition smooth बनाता है changes को. जब style बदलती है, animation instant नहीं होता; यह ऊबर-नीचे smoothly change होता है.

button {
  background: black;
  color: white;
  padding: 10px 20px;
  transition: 0.3s;
}

button:hover {
  background: blue;
}

3. CSS Transform

Transform का use करके elements को scale, rotate, या translate किया जाता है. यह modern hover effects के लिए बहुत common होता है.

.card:hover {
  transform: scale(1.05);
}

4. Box Shadow & Border Radius

Box shadow depth देता है और border radius design को soft बनाता है. यह modern UI का basic style है.

.card {
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 15px;
}

5. CSS Animation & @keyframes

Animation movement देता है. @keyframes से हम steps define करते हैं जैसे fade-in या slide-up.

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

.box {
  animation: fadeIn 2s ease;
}

Mini Project – Modern Product Card UI

अब हम एक professional product card बनायेंगे जो eCommerce, portfolio, और SaaS websites में use हो सकता है.

<div class="card">
  <img src="product.jpg" alt="Product">
  <h2>Smart Watch</h2>
  <p>Modern stylish smartwatch with premium features.</p>
  <button>Buy Now</button>
</div>

body {
  font-family: Arial;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.card {
  width: 300px;
  background: white;
  padding: 20px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-10px);
}

.card img {
  width: 100%;
  border-radius: 10px;
}

button {
  background: black;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  margin-top: 15px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: blue;
}

Homework Assignment

Create your own service card section with icon, title, short description, hover animation, and modern design.

• Icon
• Title
• Short description
• Hover animation
• Modern design with border radius, shadow, and transitions

Conclusion

• Hover Effects
• Transitions
• Transform
• Animations
• Keyframes
• Modern Product Card UI

आज आपने frontend design को और professional बनाया है. Next lecture में हम portfolio website बनाएंगे।