CSS Filter Crash Course | Backdrop Filter | CSS Grid | Project Based learning

Опубликовано: 27 Октябрь 2024
на канале: SFDCFacts Academy

2,860

In this video, we will be using CSS filters to apply visual effects on an image and then on an HTML element. We will also explore backdrop filters and create a project to apply multiple visual effects on one single image using backdrop filters and a CSS grid.

📣 Check out my other crash courses

🐱 JavaScript Crash Course:    • Modern JS Crash Course | The Ultimate...
🐶 LWC Crash Course:    • Lightning Web Component Crash Course ...
🐼 Salesforce Integration Crash Course -    • Salesforce Integration Crash Course |...
🐭 SLDS Crash Course:    • SLDS Crash Course - Master Salesforce...

Check out the code: https://codepen.io/sfdcfacts/pen/yLMZNPo

This CSS crash course on CSS filters is meant for every web designer as it adds a cherry to the cake on your web designs.

00:00 CSS Filter Crash Course
00:27 CSS Filter Explained
1:23 CSS Filter Browser Support
1:55 CSS Backdrop Filter Explained
2:17 Project Overview
2:35 CSS Backdrop Filter Browser Support
3:20 Project Implementation
5:36 Apply/Add CSS Filters on an Image
6:41 Apply multiple CSS Filters
9:33 Apply/Add CSS Filter on an HTML Element
12:28 Create CSS Grid Layout
12:52 What is CSS Grid Layout
16:56 Add/Apply CSS Backdrop Filters
20:26 Add random cells in CSS Grid
21:15 Create Mondrian using CSS Grid
26:10 Overlapping Cells in CSS Grid
26:17 Applying CSS Filter to multi-layer background
27:35 Enable CSS Backdrop Filter in Firefox
28:16 Enable CSS Backdrop Filter in Safari

About:

Manish is a highly experienced Software Developer who has worked in big tech companies like Google and Salesforce. Presently he is associated with Amazon as SDE 2.
He is on his journey to make everyone interview ready for the big 5 FAANG (Facebook, Amazon, Apple, Netflix, Google) companies. Check out his channel for comprehensive tutorials on various technologies and mock google/amazon interviews.

🎓 My courses on Udemy (discounted links below):

📹 The Complete Salesforce Development Course - https://www.udemy.com/course/salesfor...

📹 The Ultimate Hands-On Lightning Web Component - https://www.udemy.com/course/lightnin...

📹 The Practical Guide to SFDX and Salesforce CLI - https://www.udemy.com/course/salesfor...

Follow SFDCFacts Academy:
Website: https://sfdcfacts.com
Facebook:   / sfdcfacts
Instagram:   / sfdcfacts
LinkedIn:   / sfdcfacts

Connect with Manish:
  / manish-choudhary
Twitter:   / sfdcfacts

Become a patron and support my work here:   / sfdcfacts

#cssgrid #cssfilter #cssblendmode #cssproperties #webdesigner #webdeveloper #webdevelopment #htmlandcss