Up next in 10
CSS Filters _ Sigma Web Development Course - Tutorial #50
128 views
Mar 11, 2024
Tutorial #50 of the Sigma Web Development Course brings an exploration of the creative world of CSS Filters. In this tutorial, participants will delve into the capabilities of CSS filters, learning how to apply various visual effects to enhance images and elements on their websites. Whether you're a novice or an experienced developer, this tutorial provides step-by-step guidance on incorporating CSS filters to add depth, color adjustments, and other captivating effects to your web projects. Join the Sigma Web Development Course for Tutorial #50 and unlock the potential of CSS Filters to elevate the visual appeal of your website designs.
View Video Transcript
0:00
कि आज के सुविधि में देखेंगे कि सीएसस में फिल्टर्स क्या होती है इससे पेटर राम की प्रॉपर्टी होती है जिसस��
0:05
कि आप ब्राइटनेस कॉन्ट्रास्ट इनवर्ट कर सकते हैं कि मिश्कों और भी बहुत सारी चीजें हो सकती हैं इस पेट��
0:10
इस्तेमाल करके आप लोग बस इस वीडियो को लाइक करके नीचे कॉमेंट सेक्शन में सिग्मा बैच और भी जरूर लिख देना हम चलते हैं कंप्यूटर स्क्वीन में लेट Miller
0:19
आप लोग लिखों को दिल से अच्छा लगेगा हम लोग आगे बढ़ रहे हैं बहुत अधिक पूर्व में जब स्टार्ट किया थ��
0:42
पोर्ट्स को एक चीज दिल में थी आर जो सोचा है वह हो पाएगा कि नहीं हो पाएगा और चीजें बेहतर काम कर रह��
0:48
है और इसी नर्जी के साथ में आगे बढ़ूंगा और यहां पर एक इंडेक्स डॉट इस्टीएमल बनाऊंगा आज का टॉपिक ह��
0:54
शीघ्र प्लेट ज्यादा टाइम बिल्कुल भी नहीं लूंगा क्योंकि मेरे यहां से शीघ्र प्लेट एक बहुत ही बेसिक कॉनसेप्ट है यह य��
1:01
बेसिक कंसेप्ट है पहुत ही सिंपल सी चीज है इन बिल्ट चीज है तो अगर मैं कहूं सीएसेस फिल्टर्��
1:07
mdn आप लोगों को mdn पर लेकर आओ या उससे भी पहले मैं काम करता हूं इमेज ले लेता हूं एक कोई सी भ��
1:13
इमेज हम लोग यहां पर यह इमेज ले लेते हैं आप डाउनलोड भी कर सकते हैं इस इमेज को बट मैं तो यहां प��
1:18
सिंपली डेव कंटेनर लिखूंगा और इस कंटेनर के अंदर यह इमेज डाल दूंगा तो यहां पर मैं कंट्रोल भी करक��
1:24
टेस्ट करूंगा और नो सर्प्राइज यार कि यहां पर यह इमेज जो है आ जाएगी तो मैं अगर आप लोगों को दिखाऊंग��
1:30
जा जाएगी कोई बड़ी चीज मैंने करी नहीं है अभी तक लेकिन अब आप लोगों को दिखाऊंगा कि इसी इमेज को कि��
1:35
तरह से मैं अलग-अलग चीजें करके चेंज कर सकता हूं तो अगर मैं इसमें कहूं कि भाई जो मेरी इमेज है मैं आ��
1:41
स्टाइल लिखूंगा मैं आप आईएमजी लिखूंगा मैं आप लिखूंगा फिल्टर और फिल्टर में मैं यहां पर लगा दूंगा ब्ल��
1:47
और मैं कह दूंगा से 10 pixels तो अगर मैं यहाँ पर blur 10 pixels लगाओंग��
1:52
तो यह देखो इसमें एक blur introduce हो जाएगा और मैं इस value को कम भी कर सकता हू��
1:56
तो अगर मैं इस value को कम करूँगा तो blurriness जो है इसकी कम हो जाएगी तो इस तरह से filter जो है लगाया जा सकता ह��
2:02
से सेंट के अंदर तो जो ब्लर फिल्टर है वह कुछ इस तरह से काम करता है अब जितनी ज्यादा वैल्यू रखोगे � Rendal SRK
2:41
गुमार की इमेज लेता हूं और उसी के साथ साथ मैं एक अक्षक गुमार की इमेज लेता हूं तो मालों मैं यह वाल��
2:47
इमेज ले रहा हूं उप्स मैं एक्शन इसको इसका जो पीजेस पर जाऊंगा यहीं से उठा लूंगा इमेज ओपन इमे��
2:53
न्यू टाब और इनका जो इमेज का लिंक है उसे को यूज कर लूंगा आईएमजी लिखूंगा और यहां पर मैं कुछ ऐसा क��
3:00
दूंगा और मैं यहां पर सिंपली क्या करूंगा कि इन इमेजेस को एक आईडी दे दूंगा ठीक है यहां पर क्लास दे दूंग��
3:05
और आयम जी वन दे दूंगा एक को एक को आयम जी टू दे दूंगा एक को आयम जी थ्री दे दूंगा ठीक है तो एमजी व��
3:13
एमजी टू एमजी थ्री और यहां पर डॉट आयम जी वन करूंगा और बताओ एमजी वन एमजी टू और एमजी थ्री में अलग-अलग मै��
3:21
पर डाल दूंगा जो भी मुझे डालना होगा ठीक है तो मैं वेसिकली यहाँ पर फिल्टर से डालूंगा तो आईएमजी व��
3:26
में मानों में फिल्टर डालता हूं फिल्टर में डालूंगा मानों मैं ब्राइटनेस को करना चाहता हूं वन ट्वेंट��
3:33
पर सेंट ठीक है और यह देखना एकदम प्राइट हो जाएगी इमेज तो मैं अगर आप लोग भी दिखाऊं तो यह देखो यहा��
3:38
पर जो प्राइटनेस है इन फैक्ट मैंने इमेज वाला जो यह फिल्टर है यह मुझे हटाना पड़ेगा कि मैं ब्लर नही��
3:43
जाता है हर इमेज को क्योंकि मैं यहां पर Myth टागेट कर रहा हूं तो यह ब्लर हो रहा है तो आप लोग देख��
3:48
यहां पर कि मैंने ब्राइटनेस को बढ़ा रखा है यहां पर और अगर मान लो मैं इस इमेज पर आऊं और मैं यहां प��
3:54
वैल्यू को बढ़ाऊं तो आप देखो कि चेंज होगी इमेज मेरी अभी जो फिल्टर ब्राइटनेस मैंने किया है वह इ��
3:58
इमेज पर किया है तो आप यहां पर देखना जब मैं इस वैल्यू को चेंज कर रहा हूं तो तो देखो मैं बढ़ाऊंगा त��
4:02
ब्राइट होती जा रही है और मैं इसको और ब्राइट कर सकता हूं और ब्राइट कर सकता हूं देखो और ब्राइट मैंन��
4:07
इसको कर दिया तो आप यह सब चीजें कर सकते हैं आप यहां पर एक और फिल्टर लगा सकते हैं स्पेस देखा तो जि��
4:12
तरह से हम लोगों ने देखा था एनिमेशन्स मल्टीपल लगाते हैं ट्रांसफॉर्म मल्टीपल लगाते हैं स्पेस देख��
4:16
इवन क्लासेस भी जब हम एसटीवल मल्टीपल लगाते हैं तो हम स्पेस देखा लगाते हैं यहां पर भी हम लोग कॉन्ट्रास्��
4:22
को जिस तरह से लगा सकते हैं और मैं कॉन्ट्रास्ट को अगर बढ़ाना चाहता हूं तो जीरो से बन तक की में वैल्य��
4:38
से कॉन्ट्रास्ट जो है वह कम हो जा रहा है ठीक है तो कॉन्ट्रास्ट की वैल्यू को आप जो है यहां पर चेंज कर सकत��
4:44
फिर इसके बाद हम एक grey scale filter लगा सकते हैं, जो कि एक image को grey scale में convert कर देता है
4:48
जो कि मैं मारलो यहाँ अकी भाई की image में लगाओंगा, तो मैं अगर यहाँ पर filter में लिखो
4:52
filter और मैं यहाँ पर लिखो grey scale, और मैं कहे दो मारलो 20%
4:56
तो यह 20% grey scale हो जाएगी image, जानी कि 20% ये grey scale में convert हो जाएग��
5:02
अगर मैं grey scale filter में कह दूंगा 100% ही कर दो इसको grey scale तो ये image black and white हो जाएग��
5:07
जैसे कि आप देख सकते हो कि value जैसे इसकी 100 पहुँचेगी ये 100% black and white image बन जाएग��
5:12
फिर इसके बाद एक sepia filter होता है तो अगर मैं आपका sapia filter लगाओं, मालों मैं कहतूं sapia, तो ये थोड़ी इस तरह की हो जाएगी, आपने इस तरह की images देखी होंगी, पुरानी जो images होती थी, कुछ cameras इस तरह की images generate करते थे, तो sapia filter लगाने से images ऐसी हो जाती है, फिर इसके बाद एक और होता है hue rotate, फिर होता है drop
5:44
image को invert कर देता है तो अगर मैं इस image पर आउँ और मैं कह दूं filter invert और यहाँ प��
5:50
one कर दूँ तो यह image invert हो जाएगी inverted image बन जाएगी सारे colors invert हो जाएग��
5:54
ठीक है यह negative image में convert हो जाएगी आपने अगर देखी हूँ पुराने जमाने की images तो उसमे��
5:59
इस तरह की चीजे हमें देखने को मिलती नहीं ठीक है और अगर मैं इस value को कम कर द��
6:03
इसे मैं 0.1 कर दू या फिर मालो मैं 0.61 कर दू तो यह एक हद तक invert होगी ठीक ह��
6:08
तो आप इसको थोड़ा बहुत invert कर सकते हैं opacity का filter लगाए जा सकता ह��
6:13
तो opacity का जो filter होता है वह पैसेटी को कम कर देता है तो अगर मैं कह दूं वह पैसेटी यानि कि यह इमेज कितनी ट्रांसपेरेंट है त��
6:21
मैं कहूं वह पैसेटी अगर देखो जीरों गी तो इमेज गायब हो जाएगी वन होगी अगर इमेज तो यह पूरी दिखेगी जीर��
6:27
transparent हो जाएगी एकदम ठीक है तो जैसे इसे मैं वैल्यू बढ़ाऊंगा 0.1 मानों वेदों 0.1 और मैं जैसे स��
6:33
वैल्यू बढ़ाऊंगा 0.1 से मानों मैं इसको 0.2 करता हूं फिर 0.3 करता हूं इस image उतनी गाड़ी होत��
6:39
जाएगी और अगर इसके नीचे कुछ और है तो वो भी दिखेगा अगर उपासिटी कम है तो तो अगर आप लोग Oi
6:55
इसको कि मैंने आप लोगों को बताया ग्रेड वाले वीडियो में तो अगर उस तरह का कुछ करना चाहते हो न��
6:58
तो ऑपेसिटी का यूज कर सकते हो ताकि पीछे वाली चीज भी दिखें ठीक है बाकि यहां पर तो रटनी की को��
7:04
नहीं है एडवांस मैं कहूंगा यह कॉन्सेप्ट है सीएसस का यूज करना आसान है इसको लेकिन इसका यूजेज एडवांस्��
7:11
है थोड़ा सा ठीक है मैं अपने आपको बहुत ज्यादा फिल्टर्स का यूज करते हुए नहीं पाता हूं मैं आपको अपने ज��
7:17
experience है वो बता रहा हूँ in most of the websites लेकिन हाँ कहीं कहीं बट client कह देता ह��
7:22
कि यार ये image मुझे ऐसी ची है ये image ऐसी ची है अगर आप चाहते हो कि आपको Photoshop में ना जाना पड़��
7:26
या किसी भी तरह के editing software में ना जाना पड़े तो यार built in कर दिया है अब CSS के अंद��
7:30
और rendering भी इसकी बहुत बढ़िया होती है तो I hope कि आप लोग समझ गया होगे इस चीज़ क��
7:34
Gaussian blur लगाना है तो blur use कर लो brightness, contrast, drop shadow, gray scale
7:38
hue, rotate, invert, opacity, saturate, sepia ये सब मैंने आप लोगों को बता दिय��
7:43
और इन में से कुछ भी रटनी की ज़रूरत नहीं है आपको और multiple filters लगाने के लिए आप लोग space दे सकते ह��
7:48
और space देकर आप filters को combine कर सकते हो so that was all about filters
7:52
और इससे ज़्यादा filters की आपको ज़रूरत प할ेगी ही नहीं टीक है Instagram वगैरा पर filter ऐसे लगाते ह��
7:57
आप CSS से भी filters लगा सकते हो तो जो kids होते हैं वो mobile का filter यूज़ करते है��
8:02
जो men होते हैं, जो meme होती है न, kids use mobile का filter
8:06
men use Instagram का filter, और legend use CSS का filter, भाई हम CSS से लगाते हैं filter अपनी image
8:12
तो अब से आप लोग, CSS से filter लगाना, और फिर screenshot लेकर करना
8:17
upload Instagram पे, और फिर लिखना comment में भाई, मैंने तो CSS से करा है, मैं तो ultra legend हूँ
8:22
ठीक है, तो इस तरह के आप लोग कर सकते हो तो I hope कि आप लोगों को मज़ा आय��
8:27
और इस तरह के मज़े को और पाने के लिए इस playlist को access करे��
8:31
और मैं कोशिश में दिया ही रही है कि मैं आपकी आत्मा को इसी प्रकार से त्रप्त करता रहू��
8:35
यहां क्लिक करके करें bookmark यहाँ click करके करें इसको save thank you so much guys for watching this video
8:40
and I will see you next time