Summary
Keywords
Full Transcript
Starter Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-19_transform-transition-shadows/starter-code Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-19_transform-transition-shadows/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp In this video we'll learn some of the most powerful and most used CSS properties. We'll learn about transform property and it's three different values scale, rotate, and translate. We'll learn about alpha channel and opacity. We'll learn how to give shadows to our elements and texts using box-shadow and text-shadow properties. We'll learn how add basic animation using transition property. We'll see why should we avoid using background shortcut property for giving background color. 📖 Chapters 00:00 - Recap 00:30 - Introduction 01:15 - Download the starter code 01:50 - Quick Assignment 1 02:05 - What is a Rule in CSS? 02:35 - Basic Styling 03:07 - What is "transform" Property in CSS? 03:35 - What is "transform: scale();" in CSS? 06:25 - What is "transform-origin" Property in CSS? 08:19 - Decide the Origin of the Box that You're Scaling 09:25 - Understand "transform: scale()" in CSS in Depth 10:00 - How to Implement Transparency Using Alpha Channel 14:31 - Understand "opacity" Property in CSS 15:18 - Difference Between Alpha Channel and Opacity 19:56 - Can We Implement Transparency Using Hex Code? 20:53 - More on "transform-origin" Property 22:25 - Understand "transform: rotate();" in CSS 23:40 - Understand "transform: translate()" Property in CSS in Depth 30:40 - Quick Assignment 2 31:12 - Solution 34:05 - Install Measure It Chrome Extension (Optional) 18:50 - What If You Are Confused? 38:50 - Quick Overview 1 38:58 - Understand "box-shadow" Property in CSS in Depth 53:58 - Understand "text-shadow" Property in Depth 59:54 - Quick Overview 2 + More on Transform 01:01:28 - Understand "background" property in CSS in Depth 01:16:26 - Understand "transition" property in CSS in Depth 01:27:51 - Next Video Topic If you have any doubt you can ask in comment section I will reply to each and every question or you can reach out to me directly on my social media handles mentioned below. Social Media 🌐 Linkedin: https://www.linkedin.com/in/anurag-singh-web-developer/ 🌐 Instagram: https://www.instagram.com/procodrr/ 🌐 Twitter: https://twitter.com/anuragsinghbam 🌐 Telegram: https://t.me/+bq8CBsPL3Wc1MjU1 🌐 Discord: https://discord.gg/dMe9mer9B3 🌐 Portfolio: https://anuragsinghbam.com/ Music by geoffharvey from Pixabay
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
