इस बार हम वेबसाइट की स्टाइलिंग के लिए आवश्यक भाषा CSS पर अध्ययन सामग्री तैयार करना चाहते हैं। इस सामग्री में वेब विकास और डिज़ाइन के लिए ज़रूरी CSS प्रॉपर्टियों का परिचय दिया जाएगा और वेबसाइट की स्टाइलिंग के बुनियादी सिद्धांतों तथा उन्नत सुविधाओं को समझाया जाएगा।
CSS प्रॉपर्टियाँ वेबसाइट के डिज़ाइन और लेआउट को समायोजित करने के प्रमुख साधन हैं। इनसे फ़ॉन्ट की शैली, रंग, आकार, खाली जगह, बॉर्डर, पृष्ठभूमि आदि को नियंत्रित किया जा सकता है।
प्रत्येक प्रॉपर्टी के उपयोग और उसे प्रभावी ढंग से लागू करने के तरीके समझकर आप वेबसाइट को और आकर्षक बना सकेंगे।
CSS प्रॉपर्टियों का परिचय - वेबसाइट की स्टाइलिंग के बुनियादी सिद्धांत
CSS के बुनियादी सिद्धांत
CSS प्रॉपर्टियों का उपयोग HTML एलिमेंटों पर स्टाइल लागू करने के लिए किया जाता है। CSS स्टाइल नियम चयनकर्ता और घोषणा ब्लॉक से बनते हैं, और घोषणा में प्रॉपर्टी तथा उसका मान होता है।
इनसे फ़ॉन्ट की शैली, रंग, आकार, खाली जगह, बॉर्डर, पृष्ठभूमि आदि को नियंत्रित किया जा सकता है।
선택자 {
속성: 값;
속성: 값;
}
CSS सामान्यतः चयनकर्ता और घोषणा ब्लॉक से बना होता है। चयनकर्ता उस HTML एलिमेंट की पहचान करता है जिस पर स्टाइल लागू किया जाएगा।
- ID चयनकर्ता: #idname के रूप में होता है और HTML एलिमेंट की id विशेषता के मान से मेल खाता है।
- क्लास चयनकर्ता: .classname के रूप में होता है और HTML एलिमेंट की class विशेषता के मान से मेल खाता है।
- एलिमेंट चयनकर्ता: p, h1, div जैसे HTML टैगों का सीधे उपयोग करता है।
CSS पदानुक्रम पर आधारित है और कुछ शर्तों के अनुसार तय होता है कि किस स्टाइल को प्राथमिकता मिलेगी। इससे डेवलपर विविध और जटिल वेब डिज़ाइन बना सकते हैं।
चयनकर्ता और स्टाइल नियम - एलिमेंट चुनने और प्रॉपर्टियाँ निर्धारित करने के तरीके
CSS में चयनकर्ताओं से वेब एलिमेंट चुने जाते हैं और स्टाइल नियमों से चुने गए एलिमेंटों को स्टाइल दिया जाता है।
इस भाग में हम चयनकर्ताओं और स्टाइल नियमों के विभिन्न प्रकार तथा उनका उपयोग जानेंगे। चयनकर्ता एलिमेंट के प्रकार, क्लास, ID, विशेषता आदि के आधार पर एलिमेंट चुन सकते हैं।
1. चयनकर्ताओं के प्रकार
* एलिमेंट चयनकर्ता (Type Selectors)
p {
color: red;
}
HTML एलिमेंट के नाम का उपयोग करके स्टाइल लागू किया जाता है। ऊपर दिए गए उदाहरण में सभी <p> एलिमेंटों के पाठ का रंग लाल सेट किया गया है।
* क्लास चयनकर्ता (Class Selectors)
.my-class {
font-size: 16px;
}
बिंदु (.) के बाद क्लास का नाम लिखकर स्टाइल लागू किया जाता है। ऊपर दिए गए उदाहरण में class="my-class" विशेषता वाले सभी एलिमेंटों पर स्टाइल लागू किया गया है।
* ID चयनकर्ता (ID Selectors)
#my-id {
border: 1px solid black;
}
हैश चिह्न (#) के बाद ID का नाम लिखकर स्टाइल लागू किया जाता है। ऊपर दिए गए उदाहरण में id="my-id" विशेषता वाले एलिमेंट पर स्टाइल लागू किया गया है।
* वंशज चयनकर्ता (Descendant Selectors)
div p {
color: blue;
}
स्पेस का उपयोग करके केवल किसी विशिष्ट एलिमेंट के वंशज एलिमेंटों पर स्टाइल लागू किया जाता है। ऊपर दिए गए उदाहरण में <div> एलिमेंट के सभी वंशज <p> एलिमेंटों पर स्टाइल लागू किया गया है।
* विशेषता चयनकर्ता (Attribute Selectors)
input[type="text"] {
background-color: lightgray;
}
वर्ग कोष्ठकों ([]) में विशेषता और उसका मान, या केवल विशेषता का नाम लिखकर स्टाइल लागू किया जाता है। ऊपर दिए गए उदाहरण में उन सभी <input> एलिमेंटों पर स्टाइल लागू किया गया है जिनकी type विशेषता का मान text है।
2. स्टाइल नियम (Style Rules)
selector {
property: value;
property: value;
}
स्टाइल नियम चयनकर्ता के माध्यम से चुने गए HTML एलिमेंटों पर लागू होने वाले स्टाइल निर्धारित करते हैं। नियम धनु कोष्ठकों {} के बीच लिखे जाते हैं और प्रत्येक स्टाइल घोषणा में प्रॉपर्टी तथा उसका मान होता है।
3. विशिष्टता (Specificity)
कभी-कभी एक ही एलिमेंट पर कई स्टाइल नियम लागू हो सकते हैं। ऐसी स्थिति में विशिष्टता तय करती है कि किस नियम को प्राथमिकता दी जाएगी।
आमतौर पर ID चयनकर्ता की विशिष्टता क्लास चयनकर्ता से और क्लास चयनकर्ता की विशिष्टता एलिमेंट चयनकर्ता से अधिक होती है।
सरल शब्दों में, प्राथमिकता का क्रम ID > क्लास > एलिमेंट होता है।
4. विरासत (Inheritance)
कुछ CSS प्रॉपर्टियाँ पैरेंट एलिमेंट से चाइल्ड एलिमेंट को विरासत में मिलती हैं। उदाहरण के लिए, पैरेंट एलिमेंट पर लागू font-family प्रॉपर्टी चाइल्ड एलिमेंट को विरासत में मिलती है, जिससे चाइल्ड एलिमेंट पर भी वही फ़ॉन्ट लागू होता है।
इस प्रकार चयनकर्ताओं और स्टाइल नियमों को समझकर उनका उपयोग करने से विविध और जटिल वेब पेज डिज़ाइन बनाए जा सकते हैं।
टेक्स्ट स्टाइलिंग - फ़ॉन्ट, रंग, आकार आदि से संबंधित प्रॉपर्टियाँ
CSS से टेक्स्ट की स्टाइलिंग करने का तरीका वेबसाइट के समग्र रूप और माहौल को निर्धारित करने वाला एक महत्वपूर्ण कारक है। टेक्स्ट डिज़ाइन और पठनीयता पर भी गहरा प्रभाव डालता है।
इस भाग में हम फ़ॉन्ट, रंग, आकार आदि से संबंधित टेक्स्ट प्रॉपर्टियों को जानेंगे और प्रभावी टेक्स्ट स्टाइलिंग के तरीके समझाएँगे।
1. फ़ॉन्ट शैली की प्रॉपर्टियाँ
p {
font-family: "Arial", sans-serif;
}
font-family: वेब पेज पर लागू किया जाने वाला फ़ॉन्ट निर्धारित करता है।
h1 {
font-size: 32px;
}
font-size: फ़ॉन्ट का आकार निर्धारित करता है।
strong {
font-weight: bold;
}
font-weight: अक्षरों की मोटाई निर्धारित करता है। (normal, bold, bolder, lighter, 100-900)
em {
font-style: italic;
}
font-style: अक्षरों की शैली निर्धारित करता है। (normal, italic, oblique)
2. टेक्स्ट के रंग और पृष्ठभूमि की प्रॉपर्टियाँ
p {
color: #333333;
}
color: अक्षरों का रंग निर्धारित करता है।
span {
background-color: yellow;
}
background-color: अक्षरों की पृष्ठभूमि का रंग निर्धारित करता है।
3. टेक्स्ट संरेखण और पंक्तियों के अंतर की प्रॉपर्टियाँ
p {
text-align: center;
}
text-align: अक्षरों का संरेखण निर्धारित करता है। (left, right, center, justify)
p {
line-height: 1.6;
}
line-height: पंक्तियों के बीच का अंतर निर्धारित करता है।
p {
text-indent: 20px;
}
text-indent: टेक्स्ट की पहली पंक्ति का इंडेंट निर्धारित करता है।
4. टेक्स्ट रूपांतरण की प्रॉपर्टियाँ
h2 {
text-transform: uppercase;
}
text-transform: अक्षरों को बड़े या छोटे अक्षरों में बदलता है। (none, uppercase, lowercase, capitalize)
a {
text-decoration: none;
}
text-decoration: टेक्स्ट में रेखाएँ जोड़ता या हटाता है। (none, underline, overline, line-through)
p {
letter-spacing: 1px;
}
letter-spacing: अक्षरों के बीच का अंतर निर्धारित करता है।
5. अनुच्छेदों का अंतर और खाली जगह
p {
margin: 10px;
}
margin: अनुच्छेद के बाहर की खाली जगह निर्धारित करता है।
p {
padding: 5px;
}
padding: अनुच्छेद के भीतर की खाली जगह निर्धारित करता है।
इन टेक्स्ट स्टाइलिंग प्रॉपर्टियों का एक साथ उपयोग करके वेब पेज के टेक्स्ट को कई तरह से स्टाइल किया जा सकता है।
पृष्ठभूमि और ग्रेडिएंट - पृष्ठभूमि की छवियाँ और रंग सेट करने के तरीके
वेबसाइट की पृष्ठभूमि उसके समग्र दृश्य प्रभाव को निर्धारित करने वाला एक महत्वपूर्ण तत्व है।
इस भाग में हम पृष्ठभूमि की छवियाँ और रंग सेट करने के तरीके जानेंगे और ग्रेडिएंट से वेबसाइट में रोचक प्रभाव जोड़ने के तरीके बताएँगे।
पृष्ठभूमि की छवि के आकार, दोहराव, स्थिति और ग्रेडिएंट जैसी विभिन्न प्रॉपर्टियों का उपयोग करके वेबसाइट की पृष्ठभूमि को स्टाइल किया जा सकता है।
1. पृष्ठभूमि के रंग की प्रॉपर्टी
div {
background-color: #ffcc00;
}
background-color: एलिमेंट की पृष्ठभूमि का रंग निर्धारित करता है।
2. पृष्ठभूमि की छवि की प्रॉपर्टियाँ
div {
background-image: url('image.jpg');
}
background-image: किसी छवि को एलिमेंट की पृष्ठभूमि के रूप में सेट करता है।
div {
background-repeat: no-repeat;
}
background-repeat: पृष्ठभूमि की छवि को दोहराने का तरीका निर्धारित करता है। (no-repeat, repeat-x, repeat-y, repeat)
div {
background-position: center center;
}
background-position: पृष्ठभूमि की छवि की स्थिति निर्धारित करता है।
div {
background-size: cover;
}
background-size: पृष्ठभूमि की छवि का आकार निर्धारित करता है। (auto, cover, contain, <length>, <percentage>)
3. ग्रेडिएंट प्रॉपर्टियाँ
ग्रेडिएंट पृष्ठभूमि का एक प्रभाव है जिसमें दो या अधिक रंग धीरे-धीरे बदलते हैं।
div {
background-image: linear-gradient(to right, red, yellow);
}
Linear Gradient: रंग एक सीधी रेखा के साथ बदलते हैं।
div {
background-image: radial-gradient(circle, red, yellow);
}
Radial Gradient: रंग एक बिंदु से वृत्ताकार रूप में बदलते हैं।
4. पृष्ठभूमि की शॉर्टहैंड प्रॉपर्टी
div {
background: #ffcc00 url('image.jpg') no-repeat center center / cover;
}
पृष्ठभूमि से संबंधित कई प्रॉपर्टियों को एक ही पंक्ति में व्यक्त किया जा सकता है।
पृष्ठभूमि और ग्रेडिएंट की इन प्रॉपर्टियों से वेब पेज का डिज़ाइन कई तरह से तैयार किया जा सकता है।
इनका सही संयोजन और उपयोग करके वेबसाइट के समग्र डिज़ाइन की गुणवत्ता सुधारी जा सकती है।
लेआउट प्रॉपर्टियाँ - बॉक्स मॉडल, स्थिति निर्धारण, फ़्लेक्सबॉक्स आदि
वेबसाइट का लेआउट एक महत्वपूर्ण तत्व है जो वेबसाइट की संरचना और उपयोगकर्ता अनुभव को सीधे प्रभावित करता है।
इस भाग में हम बॉक्स मॉडल, स्थिति निर्धारण, फ़्लेक्सबॉक्स आदि से संबंधित लेआउट प्रॉपर्टियाँ जानेंगे और वेबसाइट की संरचना को प्रभावी ढंग से डिज़ाइन करने के तरीके बताएँगे।
लेआउट प्रॉपर्टियों में बॉक्स मॉडल, position, flexbox आदि शामिल हैं, जो वेब पेज की संरचना और व्यवस्था निर्धारित करते हैं। इन प्रॉपर्टियों से रिस्पॉन्सिव लेआउट बनाया जा सकता है।
1. बॉक्स मॉडल (Box Model)
वेब पेज के हर एलिमेंट को एक बॉक्स माना जाता है और यह बॉक्स मॉडल margin, border, padding तथा content से बना होता है।
div {
margin: 10px;
border: 2px solid black;
padding: 20px;
}
margin: बॉक्स के बाहर की खाली जगह है।
border: बॉक्स का बॉर्डर है।
padding: बॉक्स के भीतर की खाली जगह है।
content: वह क्षेत्र है जहाँ वास्तविक सामग्री होती है।
2. स्थिति निर्धारण (Positioning)
div {
position: relative;
top: 10px;
left: 20px;
}
static: डिफ़ॉल्ट स्थिति है। top, right, bottom, left प्रॉपर्टियाँ लागू नहीं होतीं।
relative: अपनी डिफ़ॉल्ट स्थिति के सापेक्ष खिसकता है।
absolute: सबसे निकट के ऐसे पूर्वज एलिमेंट के सापेक्ष स्थित होता है जिसकी स्थिति निर्धारित की गई हो।
fixed: व्यूपोर्ट के सापेक्ष स्थित होता है।
sticky: स्क्रॉल की स्थिति के अनुसार relative या fixed स्थिति अपनाता है।
3. फ़्लेक्सबॉक्स (Flexbox)
फ़्लेक्सबॉक्स जटिल लेआउट और संरेखण की समस्याएँ हल करने का एक मॉडल है।
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
display: flex: एलिमेंट को फ़्लेक्स कंटेनर बनाता है।
flex-direction: मुख्य अक्ष की दिशा निर्धारित करता है। (row, column)
justify-content: मुख्य अक्ष पर संरेखण का तरीका निर्धारित करता है।
align-items: अनुप्रस्थ अक्ष पर संरेखण का तरीका निर्धारित करता है।
4. ग्रिड लेआउट (Grid Layout)
ग्रिड लेआउट एक 2-आयामी लेआउट प्रणाली है, जो पंक्तियों और स्तंभों से डिज़ाइन बनाती है।
.container {
display: grid;
grid-template-columns: auto auto auto;
}
display: grid: एलिमेंट को ग्रिड कंटेनर बनाता है।
grid-template-columns / grid-template-rows: स्तंभों और पंक्तियों का आकार निर्धारित करते हैं।
इन लेआउट प्रॉपर्टियों से विविध वेब डिज़ाइन और संरचनाएँ बनाई जा सकती हैं और इनका उचित उपयोग करके उपयोगकर्ता अनुभव सुधारा जा सकता है।
एनिमेशन और ट्रांज़िशन - एलिमेंटों की गतिशील हलचल और बदलाव से संबंधित प्रॉपर्टियाँ
वेबसाइट के एनिमेशन और ट्रांज़िशन उपयोगकर्ताओं का ध्यान खींचने और सहभागिता बढ़ाने के प्रभावी तरीके हैं।
इस भाग में हम एलिमेंटों की गतिशील हलचल और बदलाव से संबंधित CSS प्रॉपर्टियाँ जानेंगे और वेबसाइट में रोचक एनिमेशन प्रभाव जोड़ने के तरीके बताएँगे।
CSS प्रॉपर्टियों से एलिमेंटों की हलचल, रंग में बदलाव और आकार में बदलाव जैसे विविध एनिमेशन प्रभाव बनाए जा सकते हैं।
1. ट्रांज़िशन (Transitions)
ट्रांज़िशन का उपयोग CSS प्रॉपर्टी में होने वाले बदलाव को एक निश्चित समय में सहज ढंग से दिखाने के लिए किया जाता है। मूलतः transition आरंभिक अवस्था से अंतिम अवस्था में बदलाव करता है।
div {
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
transition-property: वह प्रॉपर्टी निर्धारित करता है जिस पर ट्रांज़िशन प्रभाव लागू होगा।
transition-duration: ट्रांज़िशन प्रभाव की अवधि निर्धारित करता है।
transition-timing-function: ट्रांज़िशन की गति का वक्र निर्धारित करता है।
transition-delay: ट्रांज़िशन प्रभाव शुरू होने से पहले का प्रतीक्षा समय निर्धारित करता है।
2. एनिमेशन (Animations)
एनिमेशन में keyframes का उपयोग करके कई चरणों वाले स्टाइल बदलाव बनाए जा सकते हैं। ट्रांज़िशन के विपरीत, इसमें आरंभिक और अंतिम अवस्थाओं के अतिरिक्त बीच की अवस्थाएँ भी निर्धारित की जा सकती हैं।
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
div {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes: एनिमेशन का प्रत्येक चरण निर्धारित करता है।
animation-name: @keyframes नियम का नाम निर्धारित करता है।
animation-duration: एनिमेशन की अवधि निर्धारित करता है।
animation-timing-function: एनिमेशन की गति का वक्र निर्धारित करता है।
animation-delay: एनिमेशन शुरू होने से पहले का प्रतीक्षा समय निर्धारित करता है।
animation-iteration-count: एनिमेशन के दोहराव की संख्या निर्धारित करता है।
animation-direction: एनिमेशन के चलने की दिशा निर्धारित करता है।
एनिमेशन और ट्रांज़िशन की इन सुविधाओं से उपयोगकर्ताओं का ध्यान खींचा जा सकता है या इंटरैक्टिव वेबसाइट बनाई जा सकती है।
रिस्पॉन्सिव वेब डिज़ाइन: मीडिया क्वेरी और व्यूपोर्ट का समायोजन
रिस्पॉन्सिव वेब डिज़ाइन एक महत्वपूर्ण अवधारणा है जो सुनिश्चित करती है कि वेबसाइट विभिन्न उपकरणों पर बेहतरीन तरीके से दिखाई दे।
इस भाग में हम मीडिया क्वेरी और व्यूपोर्ट के समायोजन को जानेंगे और वेबसाइट को विभिन्न स्क्रीन आकारों के अनुरूप ढालने के तरीके बताएँगे।
मीडिया क्वेरी से स्क्रीन के आकार के अनुसार अलग-अलग स्टाइल लागू किए जा सकते हैं और व्यूपोर्ट को समायोजित करके मोबाइल उपकरणों पर सर्वोत्तम प्रदर्शन सुनिश्चित किया जा सकता है।
1. मीडिया क्वेरी (Media Queries)
मीडिया क्वेरी से स्क्रीन के आकार, रिज़ॉल्यूशन, दिशा आदि के अनुसार अलग-अलग स्टाइल नियम लागू किए जा सकते हैं। इससे वेबसाइट के लेआउट या स्टाइल को गतिशील रूप से बदला जा सकता है।
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
ऊपर दिया गया उदाहरण ऐसा कोड है जो स्क्रीन की अधिकतम चौड़ाई 600px या उससे कम होने पर body की पृष्ठभूमि का रंग lightblue कर देता है।
2. व्यूपोर्ट (Viewport)
व्यूपोर्ट वह शब्द है जो निर्धारित करता है कि उपयोगकर्ता वेबसाइट का कौन-सा भाग देख रहा है। मोबाइल या टैबलेट पर वेबसाइट सही ढंग से दिखाई दे, इसके लिए व्यूपोर्ट की उचित सेटिंग आवश्यक है।
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ऊपर दिया गया व्यूपोर्ट मेटा टैग व्यूपोर्ट की चौड़ाई को उपकरण की चौड़ाई के अनुरूप करता है और आरंभिक ज़ूम अनुपात 1.0 पर सेट करता है।
3. लचीली ग्रिड प्रणाली (Fluid Grid System)
रिस्पॉन्सिव डिज़ाइन में लचीली ग्रिड प्रणाली का उपयोग करके एलिमेंटों की चौड़ाई पिक्सेल (px) के बजाय प्रतिशत (%) में निर्धारित की जाती है।
.container {
width: 100%;
}
.element {
width: 50%;
}
इससे स्क्रीन के आकार के अनुसार एलिमेंटों की चौड़ाई गतिशील रूप से बदल सकती है।
इन तकनीकों का समग्र रूप से उपयोग करके विभिन्न परिवेशों और उपकरणों पर उपयोगकर्ताओं को उनके अनुरूप अनुकूलित वेबसाइट प्रदान की जा सकती है।
विकृति और रूपांतरण - एलिमेंटों का आकार, घुमाव, झुकाव आदि समायोजित करने वाली प्रॉपर्टियाँ
CSS से एलिमेंटों की विकृति और रूपांतरण को समायोजित करना वेबसाइट के दृश्य प्रभाव सुधारने का एक महत्वपूर्ण तरीका है।
इस भाग में हम आकार, घुमाव, झुकाव आदि समायोजित करने वाली विकृति और रूपांतरण की प्रॉपर्टियाँ जानेंगे और वेबसाइट में अनूठे दृश्य तत्व जोड़ने के तरीके बताएँगे।
CSS प्रॉपर्टियों से खिसकाने, घुमाने, झुकाने और आकार बदलने जैसे विविध रूपांतरण प्रभाव बनाए जा सकते हैं।
1. Transform प्रॉपर्टी
transform प्रॉपर्टी के कई मान होते हैं, जिनसे विविध रूपांतरण प्रभाव बनाए जा सकते हैं।
div {
transform: scale(1.5, 1.5); /* 요소를 1.5배 확대 */
}
scale(x, y): एलिमेंट का आकार x और y अक्षों के सापेक्ष बढ़ाता या घटाता है।
rotate(angle): एलिमेंट को निर्धारित कोण पर घुमाता है।
translate(x, y): एलिमेंट को x और y अक्षों के सापेक्ष खिसकाता है।
skew(x-angle, y-angle): एलिमेंट को x और y अक्षों के सापेक्ष झुकाता है।
2. Transform Origin प्रॉपर्टी
transform-origin प्रॉपर्टी से रूपांतरण का आधार बिंदु निर्धारित किया जा सकता है। उदाहरण के लिए, घुमाव का केंद्र बदला जा सकता है।
div {
transform: rotate(45deg); /* 45도 회전 */
transform-origin: top left;
/* 회전의 기준점을 왼쪽 상단으로 설정 */
}
डिफ़ॉल्ट मान 50% 50% है, जो एलिमेंट का केंद्र है।
3. Matrix रूपांतरण
matrix रूपांतरण से scale, translate, rotate, skew जैसे रूपांतरण एक साथ लागू किए जा सकते हैं।
लेकिन matrix के मानों में कई रूपांतरणों को जोड़ने की जटिल प्रक्रिया शामिल होती है, इसलिए सामान्यतः प्रत्येक रूपांतरण से संबंधित प्रॉपर्टी का उपयोग किया जाता है।
div {
transform: matrix(a, b, c, d, tx, ty);
}
विकृति और रूपांतरण की इन सुविधाओं से वेब पेज पर गतिशील और विविध डिज़ाइन प्रभाव लागू किए जा सकते हैं।
छाया और बॉर्डर - एलिमेंटों में छाया या बॉर्डर जोड़ने के तरीके
छाया और बॉर्डर वेबसाइट के डिज़ाइन को अधिक रोचक बनाने वाले महत्वपूर्ण तत्व हैं।
इस भाग में हम एलिमेंटों में छाया और बॉर्डर जोड़ने के तरीके जानेंगे और विभिन्न शैलियों की छाया तथा बॉर्डर लागू करने के तरीके बताएँगे।
CSS प्रॉपर्टियों से छाया का प्रकार, स्थिति, आकार और रंग जैसे छाया प्रभाव तथा एलिमेंट के बॉर्डर की शैली, मोटाई और रंग आदि सेट किए जा सकते हैं।
1. Box Shadow
box-shadow प्रॉपर्टी से बॉक्स एलिमेंट में छाया जोड़ी जा सकती है। इस प्रॉपर्टी से एलिमेंट को गहराई का आभास दिया जा सकता है या उसे दृश्य रूप से उभारा जा सकता है।
div {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
div {
box-shadow: 5px 5px 10px 2px #000000;
/* x축 5px, y축 5px 거리에, 흐림 정도 10px,
확장 정도 2px, 색상은 검정색인 그림자 적용 */
}
offset-x और offset-y: छाया की स्थिति निर्धारित करते हैं।
blur-radius: छाया के धुँधलेपन की मात्रा निर्धारित करता है।
spread-radius: छाया के फैलाव की मात्रा निर्धारित करता है।
color: छाया का रंग निर्धारित करता है।
2. Border
border प्रॉपर्टी से एलिमेंट में बॉर्डर जोड़ा जा सकता है। बॉर्डर की मोटाई, शैली और रंग निर्धारित किए जा सकते हैं।
div {
border: width style color;
}
div {
border: 2px solid #000000;
/* 굵기 2px, 스타일은 실선, 색상은 검정색인 테두리 적용 */
}
width: बॉर्डर की मोटाई निर्धारित करता है।
style: बॉर्डर की शैली निर्धारित करता है। (उदाहरण: solid, dashed, dotted आदि)
color: बॉर्डर का रंग निर्धारित करता है।
3. Border Radius
div {
border-radius: 10px; /* 모든 모서리를 10px 둥글게 */
}
border-radius प्रॉपर्टी से एलिमेंट के कोनों को गोल बनाया जा सकता है। प्रत्येक कोने की गोलाई अलग से भी निर्धारित की जा सकती है।
छाया और बॉर्डर के इन प्रभावों का उचित उपयोग करके वेब पेज का डिज़ाइन अधिक समृद्ध और गतिशील बनाया जा सकता है।
प्रभावी वेबसाइट डिज़ाइन - CSS प्रॉपर्टियों से डिज़ाइन बेहतर बनाने के सुझाव
CSS के सुझाव और नियम
इस भाग में हम CSS प्रॉपर्टियों का प्रभावी उपयोग करके वेबसाइट का डिज़ाइन सुधारने के सुझाव और नियम जानेंगे।
उचित रंग संयोजन, खाली जगह का उपयोग, टेक्स्ट और छवियों की व्यवस्था तथा एनिमेशन प्रभाव जैसे विविध डिज़ाइन सुझावों से वेबसाइट को अधिक आकर्षक बनाया जा सकता है।
वेबसाइट का डिज़ाइन उपयोगकर्ता अनुभव पर महत्वपूर्ण प्रभाव डालता है, इसलिए प्रभावी वेब डिज़ाइन की तकनीकों और सिद्धांतों को समझना तथा लागू करना ज़रूरी है।
1. एकरूप स्टाइलिंग
एकरूप स्टाइलिंग उपयोगकर्ताओं के लिए वेबसाइट को समझना और उपयोग करना आसान बनाती है। एक ही प्रकार के एलिमेंटों की शैली एकरूप होनी चाहिए। इसके लिए CSS क्लास और ID का सही उपयोग महत्वपूर्ण है।
2. रंग और कंट्रास्ट
उचित रंग और कंट्रास्ट वेबसाइट की पठनीयता तथा उपयोगकर्ताओं की रुचि बढ़ा सकते हैं। पृष्ठभूमि और टेक्स्ट का कंट्रास्ट बढ़ाकर टेक्स्ट पढ़ना आसान बनाएँ और रंगों को ब्रांड की छवि के अनुरूप रखना बेहतर है।
3. रिस्पॉन्सिव डिज़ाइन
आज विभिन्न उपकरणों और स्क्रीन आकारों के अनुरूप उचित ढंग से ढलने वाला डिज़ाइन आवश्यक है। मीडिया क्वेरी से अलग-अलग स्क्रीन आकारों के अनुसार स्टाइल समायोजित किए जा सकते हैं।
4. उपयोगकर्ता-केंद्रित डिज़ाइन
ऐसा डिज़ाइन बनाएँ जिसके केंद्र में उपयोगकर्ताओं की ज़रूरतें और अनुभव हों। उपयोगकर्ता अनुभव को बेहतर बनाने के लिए डिज़ाइन करते समय उपयोगकर्ताओं के व्यवहार, पसंद, प्रतिक्रिया आदि पर विचार करना चाहिए।
5. व्यवस्था और स्थान का उपयोग
संरेखण, मार्जिन और पैडिंग जैसे स्थान के उपयोग का वेबसाइट के समग्र रूप पर गहरा प्रभाव पड़ता है। बहुत अधिक जगह बर्बाद किए बिना एलिमेंटों के बीच पर्याप्त अंतर रखकर साफ़-सुथरा और पढ़ने में आसान लेआउट बनाना चाहिए।
6. प्रभावी टाइपोग्राफ़ी
टेक्स्ट वेबसाइट का एक प्रमुख तत्व है, इसलिए फ़ॉन्ट आकार, पंक्ति की ऊँचाई और फ़ॉन्ट फ़ैमिली जैसे टाइपोग्राफ़ी के तत्वों को सोच-समझकर चुनना और स्टाइल करना चाहिए।
7. कुशल कोड संरचना
CSS कोड साफ़-सुथरा और सुव्यवस्थित होने पर उसका रखरखाव आसान होता है और बग आने की संभावना भी कम हो जाती है। CSS कोड व्यवस्थित करने के लिए टिप्पणियों का उपयोग करना और संबंधित स्टाइल को समूहों में रखना चाहिए।
इस प्रकार हमने CSS प्रॉपर्टियों का परिचय और उनके विभिन्न प्रकार प्रस्तुत किए। हमने चयनकर्ताओं और स्टाइल नियमों, टेक्स्ट स्टाइलिंग, पृष्ठभूमि और ग्रेडिएंट, लेआउट प्रॉपर्टियों, एनिमेशन और ट्रांज़िशन, रिस्पॉन्सिव वेब डिज़ाइन, विकृति और रूपांतरण, छाया और बॉर्डर तथा प्रभावी वेबसाइट डिज़ाइन से संबंधित प्रॉपर्टियों को विस्तार से समझाया।
CSS प्रॉपर्टियाँ वेबसाइट की स्टाइलिंग के प्रमुख साधन हैं और उनका सही उपयोग करके वेबसाइट को अधिक आकर्षक बनाया जा सकता है। इस सामग्री से आप CSS प्रॉपर्टियों की अवधारणाओं और सुविधाओं को व्यापक रूप से समझ सकेंगे तथा वेबसाइट की स्टाइलिंग के विविध तरीके सीख सकेंगे।
CSS प्रॉपर्टियाँ वेबसाइट के डिज़ाइन और उपयोगकर्ता अनुभव पर गहरा प्रभाव डालती हैं, इसलिए पहले बुनियादी प्रॉपर्टियों से परिचित हों और आगे अध्ययन तथा प्रयोग करके अधिक उन्नत स्तर की स्टाइलिंग लागू करने का प्रयास करें।
