Full Stack Camp

🎉 Hello Campers! 👋

Welcome to your Week 2 Day 6 CSS Lesson — our last day in the CSS basics journey! 💻

Today we’ll cover some ✨ magic-like features ✨ that will make your websites come alive — like hover animations, icon styles, image control, and even how to use YouTube or LinkedIn icons on your pages! 😍🎥💼

🧠 What We’ll Learn Today:
🔹 Transitions & Animations
🔹 Transformations
🔹 Object-Fit
🔹 Overflow
🔹 Shadows
🔹 Icons (Font Awesome, Emojis, YouTube, LinkedIn...)

🎬 1. CSS Transitions (Make things move smoothly!)

Transitions let you animate changes like color or size when you hover or click. This allows smooth changes from one state to another.
🧪 Syntax:
selector { transition: property duration ease; }
✅ Example:

<style>
.button {
     background: blue;
     color: white;
     padding: 10px;
     transition: background 0.4s ease; }
.button:hover {
      background: darkblue; }
</style>

<button class="button">Hover Me 🎯</button>

➝Note: you can use all if you want all.properties to transition.

transition : all 0.3s ease;

🌀 2. CSS Animations (Make things move even without hover)
➤Animation gives you more control over movement or effects that repeat or run on load.

With @keyframes, you can animate elements over time, even looping!

✅ Example:

<style>
@keyframes bounce {
     0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); } }
      .bouncer {
          width: 100px;
          height: 100px;
          background: tomato;
          animation: bounce 1s infinite; }
</style>

<div class="bouncer"></div>

🧾 Use this to make bouncing buttons, loading dots, etc.

🔁 3. Transformations
Use to move, rotate, scale, or skew an element!

✅ Common Examples:

/*Move*/
.move { transform: translateX(100px); }
/*Rotate*/
.rotate { transform: rotate(360deg); }
/*Scale*/
.scale { transform: scale(1.5); }
/*Skew*/
.skew { transform: skew(20deg); }

Example with hover:

<style>
.card:hover {
transform: scale(1.2) rotate(5deg);
transition: transform 0.3s ease-in-out; }
</style>

🖼️ 4. Object-Fit (Control how images appear in boxes)

Use object-fit when an image or video doesn’t fit nicely. It is often used with width and height.

✅ Example:

<img src="https://via.placeholder.com/400x300"
style="width: 200px; height: 150px; object-fit: cover;">

🔹 Values:
➺cover – fills, may crop
➺contain – fits, no crop
➺fill – stretches
➺none – no resize
➺scale-down – uses the smallest between none or contain

🌊 5. Overflow (Handle content that doesn't fit)
Use when text or content gets too big for the box.

✅ Example

<style>
.box {
     width: 200px;
     height: 100px;
     overflow: auto;
     border: 1px solid black; }
</style>

<div class="box"> This is a long content. It will scroll if it's too much... </div>

🔸 Values:
➺visible (default)--content spills out
➺hidden--extra content is clipped
➺scroll-- scrollbar always shows
➺auto-- scrollbar only if needed

🌫️ 6. Shadow Effects

➤ Box Shadows:
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);

✅ Example

<style>
.box {
     width: 200px;
     height: 100px;
     background: white;
     box-shadow: 2px 2px 8px rgba(0,0,0,0.2); }
</style>

<div class="box">I'm popping out! 🎈</div>

➤ Text Shadows:

text-shadow: 1px 1px 4px gray;

81 views12:49