Up next in 10
CSS Shadows and Outlines _ Sigma Web Development Course - Tutorial #24
81 views
Mar 11, 2024
Tutorial #24 of the Sigma Web Development Course explores the captivating world of CSS Shadows and Outlines. In this session, participants will discover how to add depth, dimension, and visual interest to HTML elements through the strategic use of shadows and outlines. The tutorial provides practical examples and clear explanations, guiding viewers through the process of creating subtle shadows for depth or bold outlines for emphasis. Whether you're a designer looking to enhance the aesthetics of your web projects or a developer aiming to refine your styling techniques, this tutorial offers valuable insights into the artful use of shadows and outlines in CSS. Join us as we delve into the nuances of CSS styling, unlocking new possibilities for creating visually stunning and engaging web designs.
View Video Transcript
0:00
है गैस अने मार्जिन के बारे में देखा हमने पैड़िंग के बारे में देखा आज के इस वीडियो में मैं आ��
0:04
लोगों को आउटलाइन के बारे में बताऊंगा और उसी के साथ किस तरह से शाइड और आप लोग चीजेस में ऐड कर सकत��
0:10
इस चीज के बारे में बताऊंगा हमने जो सीएस का बॉक्स मॉडल पड़ा उससे हमको सब कुछ समझ में आ गए कि बॉर्ट��
0:14
का होता है मार्जन का होती पड़िंग का होती है और एक्चुअल कॉंटेंट का पर होता है इस वीडियो में शैड़ो��
0:19
आटलाइन को एक्सप्लोर करेंगे काफी मچार है थ्रू आउट द पोर्ट्स या आप नीचे कमेंट सेक्शन में सिग्मा पैचो��
0:24
भी लिखते रहना है यार चलते हैं कंप्यूटर स्क्रीन में लेट्स रोल द इंटरवेशन ��
0:32
अपनी कंप्यूटर स्क्रीन के अंदर जैसे कि आप देख सकते हो यहां पर वहीं करूंगा जो मैं करता रहा हूं पिछले तेसर��
0:44
वीडियो से वीडियो 24 के नाम से एक फोल्डर बनाऊंगा और नाइस करने के लिए चीजों को इसको खोलूंगा विश keh
0:49
और आज का जो मुद्धा हमारा होने वाला है वह है शाड़ोस किस तरह से शाड़ोस दी जाती है आप लोग शाड़��
0:56
दे सकते हो किसी भी एलिमेंट को मैं आपको जल्दी से इंडिक्स टॉट एसटीएमल यहां पर जो है बनाऊंगा और उसी क��
1:03
आप लोग आउटलाइन भी दे सकते हो, आउटलाइन देने के लिए आप लोग को क्या करना पड़ेगा क��
1:07
आउटलाइन प्रापर्टी का इस्तेमाल करना पड़ेगा, अब ये आउटलाइन बॉर्डर से किस तरह से डिफरेंट है
1:12
है क्यों हम लोग लेने यूज करेंगे तो स्टार्ट करते हैं बॉक्स शैडो से सबसे विलेश शैडोस की बात करेंग��
1:17
सीएसस के अंदर क्या होती है तो सीएसस के अंदर शैडोस का इस्तेमाल किया जाता है किसी भी एक एलिमेंट क��
1:23
दिनिकली तो यहां पर अगर मैं इसका एग्जांपल आप लोगों को दिखाओ तो वह इस तरह से दिखेगा मैं आप प��
1:28
सिंपलिक डेव बनाऊंगा अपना होंगा डेव डॉट बॉक्स और इसके अंदर मैं लिखूंगा आई एम बॉक्स और यहां प��
1:36
मैं सिंपली स्टाइल टैक डालूंगा और यहां पर लिखूंगा डॉट बॉक्स और मैं लिखूंगा सिंपली यहां पर बॉर्डर टू पिक्स��
1:44
सॉलिट ब्लैक लेटर से और देख सकते हैं और यहां पर आप देख सकते हो कि कुछ इस तरह से दिखेगा कहां गया मेर��
1:57
प्रीव्यू बटन इसको पर इन ब्राउजर कर दूंगा और देखो यह कुछ इस तरह से नो सर्प्राइज वॉटसॉएवर यह इतना त��
2:04
किया और इसके बारे में आप सबको मालूम है अब अगर मुझे इस बॉक्स में शैडो देनी है तो मैं बॉक्स चैडो क��
2:10
इस्तेमाल करूंगा और बॉक्स चैडो को सेंटेक्स कुछ इस तरह से यहां पर आप डालते हो और इस ऑन टuma ऑफ सेट यहां प��
2:15
लाइट वर्डिकल ऑफ़सेट यहां पर आप डालते हो ब्लर यहां पर आप डालते हो इसके बाद स्प्रेड फिर इसके बाद आ��
2:21
डालते हो कलर फिर इसके बाद आप डालते हो इन सेट अब यह क्या है हॉरिजन्टर वर्टिकल ऑफ़सेट मतलब कि शैड��
2:27
जितनी दूर होगी इसके बाद ब्लर है ब्लर क्या करता है कि जितनी ज्यादा वाल्यू आप लोग दोगे यहां पर उतना ज्याद��
2:32
लगा ठीक है फिर इसके बाद यहां पर आप देखो एक्सपेंट्स और स्ट्रेंग्स शैडो साइज अगर आप स्प्रेड बढ़ा दोगे त��
2:39
आपकी शैडो का साइज जो है वह बड़ा है छोटा हो जाएगा फिर शैडो का कलर आप यहां पर डिफाइन कर सकते हो और इसक��
2:45
बाद आप कितनी अंदर शैडो रखना चाहते हो वह आपका इंसाइड डिफाइन करें तो अगर मैं इसको कॉपी करू��
2:50
और यहां पर लगाओ मैं आपको यहीं पर लगा कर दिखाता हूं इसको शैडो को तो आप यहां पर देख सकते हो बॉक्स शैड��
2:58
बॉक्स शैडो अब देख सकते हैं यहां पर 5 पिक्सल 15 पिक्सल 5 पिक्सल और यह कलर मैंने यहां पर दे दिया शाड��
3:06
अगर मैं इस color को लाल कर दो या let us say मैं इसको हरा कर दो यार तो यह हरी हो जाएगी box shadow ठीक ह��
3:11
box shadow request CSS changes preview inspect directly face Kubernetes focus
3:30
अब आप मालो इस पर्टिकुलर एलिमेंट के अंदर देखना चाहते हो कि यार मेरी जो यहां पर बॉक्स चैडो में दे रखी है वह किस��
3:36
साथ से मैं हैंडल करो देखो यहां पर आप क्लिक करोगे तो आपको यह देखने को मिल रहा है आउट सेट इन सेट यह स��
3:41
आप चेंज कर सकते हैं और देखो इनको चेंज करके आपकी शैडो चेंज हो रही है आप देख सकते हैं यहां पर और यहां पर मैंने क्या किया है कि इसका वाय ऑफसेट और एक्स ऑफसेट काफी दे दिया आप देखो इसको मैं ऐसे करूंगा तो यह इदर को जाएगी ऐसे क��
4:11
आप लोगों को shadow यहाँ पर देखने के लिए इन values को वैसे ही adjust करना पड़ेग��
4:16
आप shadow को confuse मत करना आप border से हैं यहाँ आप कहोगे मैं चारो तरफ चाही नही��
4:20
आप इसको इस तरह से रखो कि आपको यह shadow की तरह देखे shadow का मतलब shadow होता है ठीक ह��
4:25
आप लोगों को अब यहां पर आप इन से वाल्यू पर आओगे तो इन से वाल्यू को भी आप चेंज कर सकते अंदर को चाहि��
4:31
अगर आपको शाड़ों तो आप यहां पर इसको इन से इस तरह से कर सकते हो अब देखो जैसे आप करोगे वैसे-वैस��
4:37
इसका यह सिंटेक्स है वह चेंज होता जाएगा आप लिखा यहां पर इन सेट 10 पिक्सिल 8 पिक्सिल 5 पिक्सिल और यह कल��
4:43
चाहिए तो यूजिएल आप लोग यहां से इसका ब्लर भी बढ़ा सकते हो कम कर सकते हो ब्लर और यह सिंटेक्स आपक��
4:49
जाएगा और स्प्रेड बढ़ाने से क्या हो इतनी ज्यादा फैले कि जितना आप स्प्रेड बढ़ाओगे आइडली आप स्प्रेड क��
4:53
डिफिनेटली कम रखना चाहोगे जो फिर जो शैडो थी वह नेचुरल नहीं रखती है अगर आपने स्प्रेड को काफी अन्नेचुर��
5:00
कर दिया तो इस इंडिक्स आपको रखने की जरूरत नहीं है यहां पर देख सकते हो कि जो सिंटेक्स था हमार��
5:05
और डिजाइन टॉप सेट वर्टिकल ऑफ़सेट फिर ब्लर्ड स्प्रेट कलर और इन सेट तो यह था बॉक्स चैड़ों के बारे मे��
5:11
आप इस तरह से इस सिंटेक्स को ऐसे लिख सकते हो ठीक है दिस अवेड और आइट इस इंटेक्स अब बॉक्स चैड़ों के साथ-सा��
5:35
और मैं यहां पर इसको लिख दूं तो क्या होगा यहां पर टेक्स चैडो आ जाएगी तो टेक्स टेक्स चैडो मैंने ए��
5:44
बनाइए टेक्स एलिमेंट नाम से बनानी थी मैंने टेक्स चैडो के नाम से बना दी कोई बात यार ठीक कर दूंगा इसक��
5:49
और यहाँ पर देखो text में shadow आ गई है इस color को मैं red करता हूँ ताकि आपको पता चल��
5:54
text shadow से क्या होता है देखो text में हमारे shadow आ गई है कभी कभी visually हम चाहेंगे कि हमारी shadow आ जाए text मे��
6:00
and definitely अगर आप इसको change करना चाहते हो तो आप यहाँ से change कर सकते है��
6:04
और उसके बाद वापस से अपने syntax में डाल सकते हो, for example, मैं अगर चाहता हूँ
6:08
कि मेरी जो text shadow है, वो थोड़ी purple टाइब की आया है, purple सा shade मारे
6:12
और उसी के साथ साथ मान लो, मैं चाहता हूँ, कि purple सा shade मारने के साथ साथ
6:17
मेरी जो text shadow है, वो थोड़ी सी नीचे की तरफ को आये ऐसे कुछ इस तरह से आप देख सकते ह��
6:22
इस shadow exactly shadow की तरह दिख रही है और मालो मैं इसका blur भी थोड़ा बढ़ाना चाता हू��
6:27
या blur इतना रखना चाता हूँ set values cinetics google chrome Chrome copy focus
6:59
वो आपकी value को define करेगा, AI कभी replace नहीं करेगा, बहुत सारे लोग पूछते हैं, AI replace कर देगा, नहीं करेगा
7:06
AI लेकिन replace उनको कर देगा, जो की tools नहीं जानते हैं
7:10
use करना, और indirectly AI replace करेगा, मैं इस debate को पूरा end करना जाता हूँ
7:15
AI replace directly नहीं करेगा, indirectly करेगा, स्मार्ट लोगों के दूआरा स्मार्ट लोगों की इतनी बदद करेगा ना कि जो स्मार्ट नहीं है उनकी जो है उनका काम दम��
7:26
मुझे अब इसी के लिए ठीक है मैं बस आप लोगों को रियालिटी बता रहा हूं जो है तो है यह इनसान तो यह गुमेग��
7:33
उदर ऐसा तो अभी हुआ नहीं है by the way होगा कभी तो देखा जाएगा ठीक है अब यहाँ पर देखो lorem ipsum dollar sit emat
7:40
यह इसके अंदर text shadow आ गई अगर मैं चाहता हूँ कि मैंने जो text shadow भी generate करी ह��
7:44
चुकी मैंने purple color से करी थी वो आए, तो मैं इसको कुछ इस तरह से कर सकता हूँ, that's it, और यहाँ पर इसका जो भी syntax generate हो रहा है
7:51
वो मैं use कर सकता हूँ, यहाँ पर अगर मैं, मान लो, इसको थोड़ा बढ़ाना चाहता हूँ, और इसको मान लो
7:56
ब्लर को थोड़ा बढ़ाना चाहता हूँ इस सब कर सकता हूँ, text shadow का to be very honest
8:00
उतना ज़्यादा इस्तेमाल नहीं होता है, हाँ मैंने देखा है कई बार कि लोग इस्तेमाल करते हैं, visually थोड़ा सा अच्छा लगता है
8:05
modern लगती है website थोड़ी सी, बट हाँ इतना ज़्यादा कोई मैंने usage देखा नहीं है simple website मे��
8:10
to be very honest but you should know about this property अब इसके बाद last but not the least outline
8:15
outline का क्या मतलब है आप डालते हो width आप डालते हो style आप डालते हो color
8:19
बिल्कुल वैसे ही जैसे हम लोग border बनाने के लिए बोलते हैं 2 pixel solid red वैसे ही आप outline दे देते ह��
8:25
अब ये outline और border में क्या difference है मान लो ये मेरा element ह��
8:29
मैं इसमें देतू outline मैं कहूँ outline 2 pixel solid black यानि तो border की तरह आ ग��
8:35
ये क्या है ये क्या चल रहा है border भी डाल देता हूँ 2 pixel solid green
8:40
तो देखो border अंदर होगा outline बाहर होगी border और outline मे��
8:46
बहुत basic difference है क्या है कि outline जो है आप लोगों की space नहीं लेती ह��
8:52
यानि कि box model का इससा नहीं होती है लेकिन यहाँ पर जो border होता है वो होता ह��
8:56
फिर इसके बाद outline offset property का इस्तेमाल आप लोग कर सकते हो outline
8:59
offset ठीक है कुछ इस तरह से आप क्या कर सकते हो outline के offset क��
9:06
बढ़ा सकते हो कुछ इस तरह से कि जो outline की दूरी है वो बढ़ जाएगी ठीक है लेकिन आप border की दूरी क��
9:12
directly नहीं बढ़ा सकते हाँ margin होती है padding होती है वो element के box model पर effect डालेग��
9:18
लेकिन इस तरह से आप outline के साथ जिस तरह से मैं खेल रहा हूँ न य��
9:21
आप border के साथ नहीं खेल सकते ऐसे ऐसे इसको कम जादा नहीं कर सकत��
9:25
अंदर बाहर नहीं कर सकते यहाँ पर जो है आप अंदर बाहर कर सकते हो outline स��
9:30
तो ये जो है कभी कभी आप लोगों को एलिमेंट को कवर करने के लिए आउटलाइन का इस्तेमाल करना पड़ता है तो यह बेसिक डिफरेंसेस ह��
9:36
आउटलाइन एक्स्ट्रा में दी गई होती है कि यार अगर आपने बॉर्डर लगा लिया आपका सब कुछ सेट ह��
9:41
अब उसके बाद उसके बाद भी आपको एक आउटलाइन चाही है तो आउटलाइन का इस्तेमाल आप लोग कर सकते ह��
9:46
borders can have varying widths on different sizes outlines have uniform widths outline width change border border radius border radius property
9:59
जो की एक property होती है border radius मारलो मैं 34 pixels करू��
10:05
तो आप देख सकते हुए यहाँ पर border radius जैसे ही मैंने लगाई यह जो है यहाँ पर curve ही हो गय��
10:09
आप देख सकते हो borders करवी हो गए outlines को directly आप लोग करवी नहीं कर सकत��
10:13
outline border को follow करेगी जैसे आप border radius डलोगे outline भी वैसे ही curve जो है अपना ले लेग��
10:19
तो I hope कि यार ये चीज़ आपको समझ में आगई बहुत ही basic सी यहाँ पर concept थ��
10:24
box shadow का, text shadow का और outline का I hope आप लोगों समझने आय��
10:28
अगर आप लोगोंने अभी देखिए sigma web development playlist को access नहीं करा ह��
10:32
तो इसको ज़रूर से access कर लें और उसी के साथ साथ अगर आप लो��
10:35
source code नहीं access कर रहे हैं तो मैं आपको recommend करूँगा कि वैसे त��
10:40
आप साथ साथ लिखो अगर आप साथ में कोड कर रहे हो नथिंग एंड बिटर देन देट बट आप लोगों को कोड की जरूर��
10:45
या कुछ भी चल नहीं रहा तो डेफिनली यू कैन विजिट देसर रपोजिटरी और आप लोगों काफी हेल्प हो जाएगी पत��
10:50
से मैंने यह course start किया है तब से बहुत सारे जो industry के लोग हैं ज��
10:54
की मैं क्या बोलू यार उन लोगों काफी बुरा लगा है बहुत सारे लोगो��
10:58
ने मुझे approach किया कि यार इसको बीच से ही paid कर दो but I am never going to do that
11:02
यार यह sigma course पूरा free रहेगा तो उसकी टेंशन ही नहीं है वह टेंशन मत लेना लेकिन हाई आर एक चीज में आप लोगों को बताना चाहता हूं कि व��
11:09
रेज द बार लाइक एनिथिंग और एक बार हम लोगों ने प्रोजेक्ट पर आना स्टार्ट कर दी तो आप लोगों बहुत मज��
11:15
लेगा एंड एक प्राउडली से बेस्ट ऑफ यॉर फीडबैक और मुझे इंडॉस्ट्री के लोगों ने भी कंटेक्ट किय��
11:21
कि यार यह क्या बना दिया इससे तो हमारी जो बिक्री हो रही थी वह बंद हो गई ऐसा-ऐसा देखो यार मैं पे��
11:26
से खिलाब नहीं हूँ, अगर मैं इस course को आज free ला पा रहा हूँ, तो ये मेरा सौबाग्य है
11:31
और मैं तो कहूँगा industry में कोई भी अगर आपको 99% paid दे रहा ह��
11:34
और 1% भी free दे रहा है, तो respect करो यार उन लोगों को, मैं सब लोगों क��
11:38
देना चाहता हूँ जो भी थोड़ी सी भी quality education अगर free में या फिर affordable price
11:42
पर available करा रहे है you should actually be supportive आप लोग उनको support करना चाहि��
11:47
instead of saying कि यार ये free दे रहा है तो आप भी free कर दो यार सब कुछ free नहीं हो सकता ये चीज हम सबको समझ नहीं होगी but sigma web development course अभी free है and we are going
11:55
विडियो से या यह वादा नहीं तो गलत है बट मैं आप लोगों को दुबारा बोल रहा हूं कि अगर कोई भ��
12:11
पेट को जे रहा है थे अब इन माय ऑपीनियन आप लोग भी ऐसा ही सोचते होंगे तो आप इस वीडियो में तेरे आन��
12:19
वीडियोस में हम लोग और भी बहुत सारी चीजें देखने वाले हैं एंड बेस्ट इज येट टू कम यार अभी हमने अपना बार रेज किया नहीं है करेंगे अच्छे अच्छे प्रोजेक्ट बनाएंगे नहीं नहीं चीजें मैं आप लोग को बताऊंगा जो कि मैंने सालो��
12:49
प्रस्तुति प्रस्तुत��
#Skins
# Themes & Wallpapers