Articles
CSS का परिचय
बॉक्स मॉडल सजावट से संबंधित CSS गुण

बॉक्स मॉडल सजावट से संबंधित CSS गुण

यह लेख बॉक्स मॉडल सजावट से संबंधित CSS गुणों की व्याख्या करता है।

आप बॉर्डर्स और शैडोज़ जैसे गुण लिखना सीख सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

सजावट

border गुण 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

border गुण का उपयोग CSS में किसी तत्व की रूपरेखा सेट करने के लिए किया जाता है। border तीन तत्वों से बना होता है: चौड़ाई, शैली और रंग, और इन्हें मिलाकर तत्व की रूपरेखा सेट की जाती है।

border का मूल ढांचा 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • border-width का उपयोग बॉर्डर की मोटाई निर्दिष्ट करने के लिए करें। इकाइयाँ px, em, %, आदि में निर्दिष्ट की जाती हैं।

  • border-style का उपयोग करके बॉर्डर का प्रकार निर्दिष्ट करें। आप निम्न मान निर्दिष्ट कर सकते हैं।

    • शैली मान:
      • none (कोई बॉर्डर नहीं)
      • solid (ठोस रेखा)
      • डॉटेड (बिंदीदार रेखा)
      • डैश्ड (पहली हुई रेखा)
      • double (डबल रेखा)
      • groove (चूड़ीदार रेखा)
      • ridge (अलग ऊँचाई वाली रेखा)
      • inset (अंदर की ओर छाया रेखा)
      • outset (बाहर की ओर छाया रेखा)

border-color का उपयोग करके बॉर्डर का रंग निर्दिष्ट करें। रंग को रंग नामों, rgb(), rgba(), hex, आदि का उपयोग करके निर्दिष्ट किया जा सकता है।

प्रत्येक पक्ष के लिए व्यक्तिगत सेटिंग्स 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

आप प्रत्येक पक्ष के लिए इस प्रकार अलग-अलग शैलियाँ सेट कर सकते हैं।

चौड़ाई, शैली और रंग के लिए व्यक्तिगत सेटिंग्स 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

border-width, border-style, और border-color का उपयोग कर के आप प्रत्येक पहलू को अलग से निर्दिष्ट कर सकते हैं।

border-radius के साथ संयोजन 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

border-radius प्रॉपर्टी का उपयोग करके, आप बॉर्डर के कोनों को गोल कर सकते हैं।

border-radius प्रॉपर्टी 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

border-radius प्रॉपर्टी का उपयोग किसी तत्व के कोनों को गोल करने के लिए किया जाता है। आप HTML तत्व के चारों कोनों को सुचारू रूप से घुमा सकते हैं, जो आयतों या वर्गों को गोल डिज़ाइन में बदल देता है।

व्याख्या:

  • border-radius-all-rounded क्लास सभी कोनों को 20 पिक्सेल के साथ गोल बनाती है, जिसके परिणामस्वरूप एक सुचारू रूप से गोल बॉक्स बनता है।
  • border-radius-top-left-rounded क्लास केवल शीर्ष-बाएँ कोना 20 पिक्सेल के साथ गोल करती है, अन्य कोनों को वर्गाकार बनाए रखती है।
  • border-radius-ellipse-corners क्लास अंडाकार कोने बनाती है, जिसके परिणामस्वरूप क्षैतिज रूप से खिंचे हुए गोल आकार का एक बॉक्स बनता है।

border-radius प्रॉपर्टी का प्रारूप 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • border-radius प्रॉपर्टी का मान आमतौर पर पिक्सेल या प्रतिशत में निर्दिष्ट किया जाता है। साथ ही, आप 1 से 4 मान सेट कर सकते हैं।
    • एक मान निर्दिष्ट करने से सभी कोनों को समान रूप से गोल कर दिया जाता है।
    • दो मान निर्दिष्ट करने पर पहला मान शीर्ष-बाएँ और नीचे-दाएँ कोनों पर लागू होता है, और दूसरा मान शीर्ष-दाएँ और नीचे-बाएँ कोनों पर लागू होता है।
    • चार मान निर्दिष्ट करने पर, आप प्रत्येक कोने के लिए अलग-अलग त्रिज्या सेट कर सकते हैं। मान शीर्ष-बाएँ से घड़ी की दिशा में लागू होते हैं।
  • आप इसे व्यक्तिगत रूप से भी निर्दिष्ट कर सकते हैं जैसे border-top-left-radius।
1border-radius: 50px / 25px;
  • border-radius प्रॉपर्टी ऊर्ध्वाधर और क्षैतिज त्रिज्याओं को व्यक्तिगत रूप से निर्दिष्ट कर सकती है ताकि कोनों को अंडाकार बनाया जा सके। इस मामले में, / से अलग करें।
    • उदाहरण के लिए, 50px / 25px निर्दिष्ट करने से क्षैतिज त्रिज्या 50 पिक्सेल और ऊर्ध्वाधर त्रिज्या 25 पिक्सेल हो जाती है।

सारांश

  • border-radius एक प्रॉपर्टी है जो किसी तत्व के कोनों को गोल करती है।
  • आप पिक्सेल या प्रतिशत में कोनों की गोलाई निर्दिष्ट कर सकते हैं, इसे सभी कोनों पर, विशिष्ट कोनों पर लागू कर सकते हैं, या उन्हें अंडाकार बना सकते हैं।
  • यह लचीले डिज़ाइन और उपयोगकर्ता इंटरफ़ेस को अनुकूलित करने के लिए उपयोगी है।

outline प्रॉपर्टी 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

outline प्रॉपर्टी एक CSS प्रॉपर्टी है जो किसी तत्व के चारों ओर खींची गई रेखा को सेट करती है।

outline border के समान है, लेकिन इसमें निम्नलिखित अंतर हैं:।

  • outline तत्व के बॉक्स मॉडल को प्रभावित नहीं करता है, इसलिए यह तत्व के लेआउट को प्रभावित नहीं करता।
  • क्योंकि outline तत्व के बाहर खींचा जाता है, यह border के बाहर दिखाई देता है।
  • border तत्व के अंदर खींचा जाता है, इसलिए यह तत्व के आकार और लेआउट को प्रभावित कर सकता है।

इस उदाहरण में, outline प्रॉपर्टी को इस प्रकार सेट किया गया है:।

  • outline-solid क्लास 2px मोटी ठोस लाल outline सेट करता है।
  • outline-dashed क्लास 3px नीली डैश्ड outline सेट करता है।
  • outline-double क्लास 4px मोटी हरी डबल-लाइन outline सेट करता है।
  • outline-offset क्लास outline और तत्व के बीच 10px का स्थान सेट करता है।

मूल वाक्यविन्यास 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width outline की मोटाई निर्दिष्ट करता है।
  • आप thin, medium, thick जैसे विशिष्ट मान, या px, em जैसी इकाइयों में निर्दिष्ट कर सकते हैं।
outline-style
  • outline-style outline की शैली निर्दिष्ट करता है।
  • आप solid, dotted, dashed, double, groove, ridge, inset, outset, none आदि शैलियों को निर्दिष्ट कर सकते हैं।
outline-color
  • outline-color outline के रंग को निर्दिष्ट करता है।
  • आप नाम, HEX, RGB आदि का उपयोग करके कोई भी रंग निर्दिष्ट कर सकते हैं।
outline-offset
  • outline-offset outline और तत्व के बीच की दूरी निर्दिष्ट करता है।
  • आप px, em जैसी इकाइयों में सटीक मान निर्दिष्ट कर सकते हैं।

box-shadow प्रॉपर्टी 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

box-shadow प्रॉपर्टी का उपयोग तत्वों में छाया जोड़ने के लिए किया जाता है। इस प्रॉपर्टी का उपयोग करके, आप तत्वों के चारों ओर छायाएं बना सकते हैं जो त्रिआयामीता और गहराई की भावना व्यक्त करती हैं।

व्याख्या:

  • box-shadow-basic-shadow क्लास में, तत्व के नीचे दाईं ओर एक धुंधली काली छाया प्रदर्शित की जाती है।

  • box-shadow-inset-shadow क्लास में, एक धुंधली छाया तत्व के अंदर प्रदर्शित की जाती है। छाया के अंदर प्रवेश करने के साथ, आप एक धंसा हुआ डिज़ाइन प्राप्त कर सकते हैं।

  • box-shadow-multiple-shadow क्लास में, काली और लाल दो छायाएं तत्व पर लागू की जाती हैं। क्योंकि वे अलग-अलग स्थानों पर प्रदर्शित होती हैं, एक त्रि-आयामी प्रभाव प्राप्त होता है।

box-shadow प्रॉपर्टी का प्रारूप 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
प्रत्येक मान का अर्थ

पहले horizontal offset का मतलब क्षैतिज विस्थापन का मान है, जो छाया की स्थिति को तत्व के बाईं ओर से निर्दिष्ट करता है। एक सकारात्मक मान निर्दिष्ट करने पर छाया को दाईं ओर और नकारात्मक मान निर्दिष्ट करने पर बाईं ओर लगाया जाता है।

दूसरा vertical offset ऊर्ध्वाधर विस्थापन का मान है, जो छाया की स्थिति को तत्व के शीर्ष से निर्दिष्ट करता है। सकारात्मक मान निर्दिष्ट करने पर छाया नीचे होती है और नकारात्मक मान निर्दिष्ट करने पर यह ऊपर होती है।

तीसरा blur radius धुंधलापन की मात्रा का मान है, जो छाया की धुंधलीता को निर्दिष्ट करता है। मान जितना बड़ा होगा, छाया उतनी ही अधिक फैलेगी, जिससे अधिक धुंधली छाया बनेगी। सकारात्मक मान निर्दिष्ट करने पर छाया नीचे होती है और नकारात्मक मान निर्दिष्ट करने पर यह ऊपर होती है। यह वैकल्पिक है, और डिफ़ॉल्ट मान 0 है, जिसका अर्थ है कि छाया पर कोई धुंधलापन नहीं है।

चौथा spread radius फैलाव सीमा का मान है, जो यह निर्दिष्ट करता है कि छाया कितनी फैलती है। सकारात्मक मान निर्दिष्ट करने पर छाया बड़ी होती है, जबकि नकारात्मक मान इसके सिकुड़ने का कारण बनता है। यह मान भी ऐच्छिक है।

पांचवा color रंग का मान है, जो छाया के रंग को निर्दिष्ट करता है। CSS में उपलब्ध रंग नामों, RGB, HEX, HSL और अन्य रंग मॉडलों का उपयोग करके रंग सेट किए जा सकते हैं। यदि इसे छोड़ा जाता है, तो तत्व के डिफ़ॉल्ट टेक्स्ट रंग (color प्रॉपर्टी का मान) को लागू किया जाता है।

आप पहले inset कुंजीशब्द को निर्दिष्ट कर सकते हैं। inset कुंजीशब्द को निर्दिष्ट करने पर छाया को तत्व के बाहर के बजाय अंदर खींचा जाएगा। कोमा द्वारा विभाजित कई छायाओं को सेट करना भी संभव है।

box-shadow का उदाहरण

मूल शैडो का उदाहरण 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • क्षैतिज ऑफसेट 10px है, जो 10 पिक्सेल दाईं ओर एक शैडो बनाता है।
  • ऊर्ध्वाधर ऑफसेट 10px है, जो 10 पिक्सेल नीचे की ओर एक शैडो बनाता है।
  • ब्लर रेडियस 5px है, जिससे 5 पिक्सेल की धुंधली शैडो बनती है।
  • रंग rgba(0, 0, 0, 0.5) है, जिससे एक अर्ध-पारदर्शी काला रंग का शैडो बनता है।
आंतरिक शैडो का उदाहरण 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • inset का उपयोग करके शैडो को तत्व के अंदर खींचा जाता है।
एकाधिक शैडो का उदाहरण 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • आप अल्पविराम से अलग किए गए कई शैडो सेट कर सकते हैं। इस उदाहरण में, दो शैडो लागू किए गए हैं: एक काला शैडो और एक लाल शैडो।

सारांश

  • box-shadow एक प्रॉपर्टी है जिसका उपयोग तत्वों को गहराई का एहसास देने के लिए शैडो जोड़ने में किया जाता है।
  • क्षैतिज और ऊर्ध्वाधर ऑफसेट, ब्लर, फैलाव रेडियस और रंग को मिलाकर विभिन्न प्रभाव प्राप्त किए जा सकते हैं।
  • आप inset के साथ शैडो को अंदर खींच सकते हैं, और आप एक साथ कई शैडो भी सेट कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

पृष्ठभूमि-संबंधित CSS गुणसूची-संबंधित CSS गुण