• Home
  • /
  • Blog
  • /
  • वेबपेज लेआउट के लिए आवश्यक सीएसएस ट्रिक्स

वेबपेज लेआउट के लिए आवश्यक सीएसएस ट्रिक्स

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

This post is also available in: English (English) العربية (Arabic)

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

हालांकि ऐसा लगता है कि सीएसएस हमारे एचटीएमएल रंग, स्थिति आदि देने के अलावा बहुत कुछ नहीं कर सकता है, यह हमें एनिमेशन बनाने और हमारे ऐप्स और वेबसाइटों में कुछ जीवन लाने की सुविधा भी दे सकता है। शायद अब हम में से बहुत से लोग सीएसएस में महारत हासिल करने और इसे इतनी गहराई से सीखने का ध्यान रखते हैं, लेकिन यह पूरी तरह से कुछ उपयोगी टिप्स और ट्रिक्स जानने लायक है जो आपको शानदार वेबसाइट बनाने में मदद कर सकते हैं!

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

यहां शानदार वेबपेज लेआउट के लिए 10 टिप्स और ट्रिक्स दिए गए हैं:

1. सीएसएस ब्लेंड मोड

डुओटोन इमेजरी और कोलोराइज़र इफेक्ट्स कुछ सबसे हॉट वेब डिज़ाइन ट्रेंड हैं। वे वेब पर व्यापक रूप से लोकप्रिय हैं। अब आप अंततः अपनी संपत्तियों के कई अलग-अलग रंगीन संस्करण बनाना बंद कर सकते हैं और सीधे ब्राउज़र में प्रभाव लागू कर सकते हैं।

CSS सम्मिश्रण मोड का उपयोग करना न केवल वेबसाइटों पर सामग्री के रूप को एकीकृत करने का एक शानदार तरीका है, बल्कि यह आपको एक छवि के विभिन्न रंग संस्करणों को सेट करने में सक्षम बनाता है, CSS में केवल एक मान बदलता है: रंग। स्क्रीन, ओवरले, हल्का और गहरा सहित 15 सम्मिश्रण मोड मान हैं।

आप जिस तत्व पर प्रभाव लागू करना चाहते हैं, उसके आधार पर कुछ कार्यान्वयन विधियां हैं। उदाहरण के लिए, आप कंटेनर पर बैकग्राउंड-इमेज और बैकग्राउंड-कलर सेट का उपयोग कर सकते हैं।

एक संतोषजनक डुओटोन प्रभाव प्राप्त करने के लिए, यह अनुशंसा की जाती है कि आप एक उच्च-विपरीत श्वेत-श्याम छवि का उपयोग करें। आप ग्रेस्केल और उच्च कंट्रास्ट स्तर सेट करने के लिए CSS फ़िल्टर लागू करके ऐसा कर सकते हैं।

एक और अच्छी संपत्ति एक मिश्रण-मिश्रण-मोड है, जो आपको तत्व की सामग्री को उसके प्रत्यक्ष पैरेंट की सामग्री या पृष्ठभूमि के साथ मिश्रित करने देती है। यह ओवरलैप्ड लेटरिंग पर विशेष रूप से अच्छी तरह से काम करता है। आप पूछ सकते हैं कि इस मामले में हम केवल अस्पष्टता को समायोजित क्यों नहीं करते हैं – उत्तर सरल है: हम केवल पारदर्शिता का उपयोग करके आसानी से रंग की चमक खो सकते हैं।

छवियों का युग जो सीधे आपके वेब ब्राउज़र में संपादित किया जा सकता है, आ रहा है, लेकिन हम ब्राउज़र संगतता के बारे में नहीं भूल सकते – इस समय मिश्रण मोड के लिए समर्थन सीमित है। और उन छवियों को सुरक्षित रखने के लिए, सुनिश्चित करें कि आपने अपने क्लाउड स्टोरेज विकल्पों का पता लगाया है।

आइए देखें कि मिक्स-ब्लेंड-मोड कैसे लागू किया जाता है।

<div class="blend1">
  <img src="monkey.jpg" width="400" height="400">
  <img src="sky.jpg" width="400" height="400">
</div>

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

और इन तरीकों को लागू करना बहुत आसान है।

.blend1 img:first-child {
  position: absolute;
  mix-blend-mode: soft-light;
}

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

2. एक मास्क जोड़ना

मास्किंग आपके ब्राउज़र को बताता है कि कौन से एसेट तत्व दिखाई देने चाहिए और रचनात्मक आकार और लेआउट बनाने के लिए बहुत उपयोगी है। मास्किंग तीन तरीकों से की जा सकती है: रेखापुंज छवि (जैसे पारदर्शिता भागों के साथ पीएनजी प्रारूप), सीएसएस ग्रेडिएंट्स, या एसवीजी तत्वों का उपयोग करना।

ध्यान दें कि, एक विशिष्ट रेखापुंज छवि के विपरीत, एसवीजी को गुणवत्ता के महत्वपूर्ण नुकसान के बिना बढ़ाया या रूपांतरित किया जा सकता है।

img { mask-image: url(‘mask.png’) linear-gradient(-45deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/ }

यह उल्लेख करना महत्वपूर्ण है कि फ़ायरफ़ॉक्स केवल नवीनतम का समर्थन करता है, इसलिए हमें इनलाइन एसवीजी मास्क तत्व का उपयोग करने की आवश्यकता है। क्या होगा यदि हम पारदर्शिता स्तरों के साथ एक रेखापुंज छवि का उपयोग करते हैं? छवि के पारदर्शी हिस्से दिखाई नहीं देंगे – इसलिए दूसरे शब्दों में, अन्य टुकड़ों को छिपाते हुए, अपारदर्शी टुकड़े प्रदर्शित किए जाएंगे।

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

मास्किंग विशेष रूप से शक्तिशाली है क्योंकि यह आपको पृष्ठभूमि छवियों पर समान गुणों को लागू करने में सक्षम बनाता है, उनकी स्थिति, आकार और पुनरावृत्ति को परिभाषित करता है।

CSS मास्किंग के लिए एक बढ़िया उपयोग का मामला उन लेखों में है जो टेक्स्ट और छवियों को मिलाते हैं। अनियमित कंटेनर और छवियां प्रिंट में बहुत लोकप्रिय हैं, लेकिन वेब पर लागू करने के लिए थकाऊ और समय लेने वाली हैं। लेकिन मास्किंग के लिए धन्यवाद, अब और नहीं!

एनिमेटेड छवियों के कुछ हिस्सों को काटने के लिए आप पारदर्शिता स्तरों का उपयोग करके भी मज़े कर सकते हैं (उदाहरण के लिए जीआईएफ फाइलें)। हालांकि, इन गुणों का उपयोग करते समय, क्रॉस-ब्राउज़र समर्थन के बारे में मत भूलना, और विक्रेता उपसर्ग जोड़ें।

3. क्लिपिंग

सीएसएस क्लिपिंग एक और बड़ी विशेषता है। एक आकृति की सीमा को क्लिप-पथ कहा जाता है (बहिष्कृत क्लिप संपत्ति के साथ भ्रमित नहीं होना चाहिए), और क्लिपिंग परिभाषित करती है कि कौन सा छवि क्षेत्र दिखाई देना चाहिए। क्लिपिंग कागज के एक टुकड़े को काटने के समान है – पथ के बाहर कुछ भी छिपाया जाएगा, जबकि पथ के अंदर कुछ भी दिखाई देगा।

<img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb"
 class="myimg" />
.myimg{
  width:300px;
  height:300px;
  object-fit:cover;
  border-radius:50%;
}

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

उदाहरण के लिए, यदि कोई सर्कल फ़ंक्शन किसी छवि के शीर्ष पर क्लिपिंग मास्क सेट करता है, तो आप केवल इस सर्कल के भीतर छवि का हिस्सा देखेंगे।

अच्छी बात यह है कि हम आकार के कार्यों और एसवीजी को क्लिप पथ के रूप में उपयोग कर सकते हैं, जो हमें बहुत सारे अवसर देता है – उदाहरण के लिए, हम उन्हें आकार देने के लिए चेतन कर सकते हैं।

अगर आप सोच रहे हैं कि क्लिपिंग और मास्किंग में क्या अंतर है, तो याद रखें कि मास्क इमेज होते हैं और क्लिप्स केवल वेक्टर पाथ होते हैं। यह ध्यान देने योग्य है कि मास्किंग अधिक मेमोरी की खपत करेगा, क्योंकि आप एक पूर्ण छवि के साथ काम कर रहे हैं इसलिए सब कुछ पिक्सेल द्वारा पिक्सेल किया जाना है।

यही कारण है कि जब आप आंशिक पारदर्शिता प्रभाव चाहते हैं तो मास्क का उपयोग करने की अनुशंसा की जाती है; यदि आप कुरकुरे किनारे चाहते हैं, तो क्लिप पथ का उपयोग करना सबसे अच्छा है।

4. शेप आउटसाइड और शेप इनसाइड

शेप-आउटसाइड और शेप-इनसाइड बचाव के लिए! किसने कहा कि टेक्स्ट कंटेनर को हमेशा आयताकार होना चाहिए? आइए बॉक्स से बाहर निकलें, शाब्दिक रूप से, और हमारे पेज लेआउट को समृद्ध और कम बॉक्सी बनाने वाले नए रूपों की खोज करें। शेप-आउटसाइड और शेप-इनसाइड गुण आपको सीएसएस में कस्टम पथों के आसपास अपनी सामग्री लपेटने की अनुमति देते हैं।

तो यह कैसे काम करता है? दी गई फ्लोटिंग इमेज या कंटेनर पर बस निम्नलिखित कोड लागू करें:

shape-outside: circle(50%); /* content will flow around the circle*/

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

यह ध्यान रखना महत्वपूर्ण है कि फ्लोट संपत्ति और तत्व के आयाम – ऊंचाई और चौड़ाई – को परिभाषित किया जाना चाहिए, अन्यथा यह काम नहीं करेगा। आकार के लिए आप circle(), polygon(), inset() या ellipse() के साथ जा सकते हैं।

एक अन्य संभावित मान url() फ़ंक्शन है। इस मामले में, यह आकार-बाहर की विशेषता को छवि के आधार पर एक तत्व आकार को परिभाषित करने में सक्षम बनाता है। आप polygon() के बजाय url() फ़ंक्शन का उपयोग करना चुन सकते हैं, जब आपके पास कई वक्र और बिंदुओं के साथ एक विशेष रूप से परिष्कृत ग्राफ़िक होता है, और आप चाहते हैं कि सामग्री इसके चारों ओर आसानी से लपेटे।

यदि आप अपने तत्व और सामग्री के बीच अधिक जगह बनाना चाहते हैं, तो आकार-मार्जिन गुण का उपयोग करें, जो एक मार्जिन की तरह कार्य करेगा। शेप फ़ंक्शन एनिमेटेड हो सकते हैं, लेकिन केवल परिभाषित बहुभुजों के लिए – url() फ़ंक्शन दुर्भाग्य से एनिमेटेड होने में सक्षम नहीं है।

शेप-आउटसाइड के लिए ब्राउज़र समर्थन फिलहाल सीमित है, लेकिन अन्य ब्राउज़रों में इसके तेजी से कार्यान्वयन के लिए अपनी उंगलियों को पार रखें।

5. एलिमेंट्स को स्कू करना

आजकल अराजकता, शोर और जाम का सौंदर्यशास्त्र – एक लोकप्रिय डिजाइन प्रवृत्ति बन रहा है। गड़बड़ियों, असफलताओं और त्रुटियों का जश्न वेब पर भी देखा जा सकता है। यदि आप परिप्रेक्ष्य के साथ खेलना चाहते हैं और अधिक विज़ुअल अराजक होना चाहते हैं, तो आप अपनी साइट के तत्वों को परिवर्तित और तिरछा करके ऐसा आसानी से कर सकते हैं।

कोड की एक पंक्ति जादू करती है:

transform:skew(60deg, -30deg) scaleY(.66667);

बेहतर ढंग से समझने के लिए, आइए निम्नलिखित कोड पर विचार करें:

<html>
	<head>
		<style>
			body {
  				margin: 20px;
				}

			div {
  				width: 80px;
  				height: 80px;
  				background-color: skyblue;
				}

			.skewed {
  				transform: skew(10deg); /* Equal to skewX(10deg) */
  				background-color: pink;
				}
		</style>
	</head>
	<body>
		<div>Normal</div>
		<div class="skewed">Skewed</div>
	</body>
</html>

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

6. एनिमेटेड लाइन्स

अक्सर आप एनिमेटेड अंडरलाइन, दिखने और गायब होने वाली पृष्ठभूमि आदि जैसे दिलचस्प प्रभाव बनाना चाहते हैं।

एक नया तत्व न बनाएं, बस ::after और ::before चयनकर्ताओं से पहले का उपयोग करें। वे इन चीजों के लिए बहुत अच्छा काम करते हैं। कंटेंट गुण सेट करना न भूलें: यदि आप इसे भूल जाते हैं, तो छद्म तत्व का प्रतिपादन नहीं किया जाएगा।

.item::after {
content: "";
position: absolute;
top: xyz;
left: xyz;
... properties you want;
}

7. ओवरफ्लोइंग टेक्स्ट प्रभाव

आधुनिक वेबसाइट एनीमेशन अक्सर नीचे से प्रदर्शित होने वाले इस प्रकार के अतिप्रवाहित पाठ का उपयोग करता है।

आइए आवश्यक न्यूनतम कोड देखें।

.parent {
height: /*something similar to child's font size*/;
overflow-y: hidden;
display: block;
}
.parent .child {
animation-name: appear;
animation-duration: ...s;
}
@keyframes appear {
 from { transform: translateY(/* parent's height*/) }
 to {   transform: translateY(0)}
}

8. ड्रॉप कैप्स

ड्रॉप कैप सभी को पसंद होती है। यह हमें पारंपरिक मुद्रित पुस्तक की याद दिलाता है और सामग्री का एक पृष्ठ शुरू करने का एक शानदार तरीका है। वह 1ला, एक बड़ा पत्र वास्तव में आपका ध्यान खींचता है। CSS में ड्रॉप कैप बनाने का एक आसान तरीका है, और यह है – pseudo element: :first letter यहाँ एक उदाहरण है:

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

वेबपेज लेआउट के लिए सीएसएस ट्रिक्स

यह क्या करता है पत्र को अन्य अक्षरों के आकार से तीन गुना पर सेट करता है। यह ओवरलैपिंग को रोकने के लिए अक्षर के चारों ओर 3px स्थान सेट करता है और अक्षर का रंग लाल रंग में सेट करता है।

9. पैराल्लास स्क्रॉलिंग

आधुनिक वेब डिज़ाइन में लंबन एक बहुत ही सामान्य प्रवृत्ति है। जब हम पृष्ठ को स्क्रॉल करते हैं तो यह अग्रभूमि सामग्री की तुलना में पृष्ठभूमि सामग्री को एक अलग गति से स्क्रॉल करने के बारे में है। आइए देखें कि CSS का उपयोग करके यह जादू कैसे किया जा सकता है:

.wrapper {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f6f6f6;
}

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20vh 0;
}

img {
  width: 100%;
}

h3 {
  font-size: 60px;
  color: white;
}

.box.box-back {
  transform: translateZ(0);
  z-index: 99;
  text-align: center;
}
.box.box-front {
  width: 1500px;
  transform: translateZ(-1px) scale(2);
}

उदाहरण में, आप देख सकते हैं कि कैसे हमारा टेक्स्ट और बैकग्राउंड इमेज अलग-अलग तरीके से आगे बढ़ रहा है। हमने एक तत्व को तेज करने और दूसरे को धीमा करने के लिए transformZ का इस्तेमाल किया।

10. इमेज फिल्टर

छवियों के साथ खेलना लेआउट के लिए बहुत सारे आश्चर्यजनक प्रभाव ला सकता है और आश्चर्यजनक परिणाम बनाने में मदद कर सकता है। CSS छवियों पर बहुत सारे फ़िल्टर का उपयोग करने की अनुमति देता है ताकि डेवलपर्स को फ़ोटोशॉप में इसे बदले बिना ग्राफिक के साथ खेलने में मदद मिल सके। आइए उन फ़िल्टरों पर एक नज़र डालें जिनका हम उपयोग कर सकते हैं:

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

ऊपर के उदाहरण में, आप एक ही छवि में उपयोग किए गए सात अलग-अलग फ़िल्टर देख सकते हैं।

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>