अपनी छवियों को स्टाइल करें और शैलियों में छवियों का उपयोग करें
कई लोग टेक्स्ट समायोजित करने के लिए सीएसएस का उपयोग करते हैं, फ़ॉन्ट, रंग, आकार और अधिक बदलते हैं। लेकिन एक बात यह है कि कई लोग अक्सर भूल जाते हैं कि आप छवियों के साथ सीएसएस का भी उपयोग कर सकते हैं।
खुद को छवि बदलना
सीएसएस आपको पृष्ठ पर छवि को प्रदर्शित करने के तरीके को समायोजित करने की अनुमति देता है। यह आपके पृष्ठों को सुसंगत रखने के लिए वास्तव में उपयोगी हो सकता है। सभी छवियों पर शैलियों को सेट करके, आप अपनी छवियों के लिए एक मानक रूप बनाते हैं। कुछ चीजें जो आप कर सकते हैं:
- छवियों के चारों ओर एक सीमा या रूपरेखा जोड़ें
- लिंक की गई छवियों के चारों ओर रंगीन सीमा हटा दें
- छवियों की चौड़ाई और / या ऊंचाई समायोजित करना
- एक बूंद छाया जोड़ें
- छवि घुमाओ
- छवि को ढंकने पर शैलियों को बदलें
अपनी छवि को एक सीमा देना शुरू करने के लिए एक महान जगह है। लेकिन आपको केवल सीमा से अधिक विचार करना चाहिए - अपनी छवि के पूरे किनारे के बारे में सोचें और मार्जिन और पैडिंग को भी समायोजित करें। एक पतली काला सीमा वाली एक छवि अच्छी लगती है, लेकिन सीमा और छवि के बीच कुछ पैडिंग जोड़ना भी बेहतर दिख सकता है।
आईएमजी {
सीमा: 1 पीएक्स ठोस काला;
पैडिंग: 5 पीएक्स;
}
जब भी संभव हो, गैर-सजावटी छवियों को हमेशा लिंक करना एक अच्छा विचार है। लेकिन जब आप करते हैं, तो याद रखें कि अधिकांश ब्राउज़र छवि के चारों ओर एक रंगीन सीमा जोड़ते हैं। यहां तक कि यदि आप सीमा को बदलने के लिए उपर्युक्त कोड का उपयोग करते हैं, तो लिंक तब तक ओवरराइड होगा जब तक आप लिंक पर सीमा को हटा या परिवर्तित नहीं करते। ऐसा करने के लिए आपको लिंक किए गए चित्रों के आस-पास की सीमा को हटाने या बदलने के लिए एक सीएसएस बाल नियम का उपयोग करना चाहिए:
img> एक {
सीमा: कोई नहीं;
}
आप अपनी छवियों की ऊंचाई और चौड़ाई को बदलने या सेट करने के लिए सीएसएस का भी उपयोग कर सकते हैं। हालांकि डाउनलोड गति की वजह से छवि आकार को समायोजित करने के लिए ब्राउज़र का उपयोग करना एक अच्छा विचार नहीं है, लेकिन वे छवियों का आकार बदलने में बहुत बेहतर हो रहे हैं ताकि वे अभी भी अच्छे लग सकें। और सीएसएस के साथ आप अपनी छवियों को मानक चौड़ाई या ऊंचाई पर सेट कर सकते हैं या कंटेनर के सापेक्ष होने के लिए आयाम भी सेट कर सकते हैं।
याद रखें, जब आप छवियों का आकार बदलते हैं, सर्वोत्तम परिणामों के लिए, आपको केवल एक आयाम का आकार बदलना चाहिए - ऊंचाई या चौड़ाई। यह उत्साहित होगा कि छवि अपने पहलू अनुपात रखती है, और इसलिए अजीब नहीं लगती है। दूसरे मान को ऑटो पर सेट करें या पहलू अनुपात को लगातार बनाए रखने के लिए ब्राउज़र को बताने के लिए इसे छोड़ दें।
आईएमजी {
चौड़ाई: 50%;
ऊंचाई: ऑटो;
}
CSS3 नई गुण ऑब्जेक्ट-फिट और ऑब्जेक्ट-स्थिति के साथ इस समस्या का समाधान प्रदान करता है। इन गुणों के साथ आप सटीक छवि ऊंचाई और चौड़ाई को परिभाषित करने में सक्षम होंगे और पहलू अनुपात को कैसे संभाला जाना चाहिए। यह आपकी छवियों के चारों ओर लेटरबॉक्सिंग प्रभाव बना सकता है या छवि को आवश्यक आकार में फिट करने के लिए क्रॉप कर सकता है।
जबकि CSS3 ऑब्जेक्ट-फिट और ऑब्जेक्ट-स्थिति गुण अभी तक व्यापक रूप से समर्थित नहीं हैं, वहीं अन्य CSS3 गुण हैं जो अधिकांश आधुनिक ब्राउज़र में समर्थित हैं जिनका उपयोग आप अपनी छवियों को संशोधित करने के लिए कर सकते हैं। ड्रॉप छाया, गोलाकार कोनों, और परिवर्तनों को घूमने, छिड़काव करने या अपनी छवियों को स्थानांतरित करने जैसी चीजें अब अधिकांश आधुनिक ब्राउज़रों में काम करती हैं। फिर आप छवियों को बदलने के लिए सीएसएस संक्रमण का उपयोग कर सकते हैं, जब पर क्लिक किया जाता है, या क्लिक किया जाता है, या बस कुछ समय बाद।
पृष्ठभूमि के रूप में छवियों का उपयोग करना
सीएसएस आपकी छवियों के साथ फैंसी पृष्ठभूमि बनाना आसान बनाता है।
आप पूरे पृष्ठ पर या केवल एक विशिष्ट तत्व में पृष्ठभूमि जोड़ सकते हैं। पृष्ठभूमि-छवि संपत्ति के साथ पृष्ठ पर पृष्ठभूमि छवि बनाना आसान है:
तन {
पृष्ठभूमि-छवि: यूआरएल (background.jpg);
}
पृष्ठभूमि को केवल एक तत्व पर रखने के लिए पृष्ठ पर किसी विशिष्ट तत्व पर बॉडी चयनकर्ता को बदलें।
छवियों के साथ आप एक और मजेदार चीज बना सकते हैं जो एक पृष्ठभूमि छवि बनाता है जो शेष पृष्ठ के साथ स्क्रॉल नहीं करता - जैसे वॉटरमार्क। आप शैली शैली-अनुलग्नक का उपयोग करें: निश्चित; आपकी पृष्ठभूमि छवि के साथ। आपकी पृष्ठभूमि के लिए अन्य विकल्पों में पृष्ठभूमि-दोहराने वाली संपत्ति का उपयोग करके उन्हें क्षैतिज या लंबवत टाइल बनाना शामिल है।
पृष्ठभूमि-दोहराना लिखें: दोहराना-एक्स; छवि क्षैतिज और पृष्ठभूमि दोहराने के लिए: दोहराना-वाई; लंबवत टाइल करने के लिए। और आप अपनी पृष्ठभूमि छवि को पृष्ठभूमि-स्थिति संपत्ति के साथ स्थान दे सकते हैं।
और CSS3 आपकी पृष्ठभूमि के लिए और भी शैलियों को जोड़ता है। आप अपनी छवियों को किसी भी आकार की पृष्ठभूमि में फिट करने के लिए खिंचाव कर सकते हैं या पृष्ठभूमि आकार को विंडो आकार के साथ स्केल करने के लिए सेट कर सकते हैं । आप स्थिति बदल सकते हैं और फिर पृष्ठभूमि छवि क्लिप कर सकते हैं। लेकिन CSS3 के बारे में सबसे अच्छी चीजों में से एक यह है कि अब आप और अधिक जटिल प्रभाव बनाने के लिए कई पृष्ठभूमि छवियों को ले जा सकते हैं।
एचटीएमएल 5 शैली छवियों में मदद करता है
एचटीएमएल 5 में फिगर तत्व किसी भी छवियों के आस-पास रखा जाना चाहिए जो दस्तावेज़ के भीतर अकेले खड़े हो सकते हैं। इसके बारे में सोचने का एक तरीका यह है कि अगर छवि एक परिशिष्ट में दिखाई दे सकती है, तो यह फिगर तत्व के अंदर होना चाहिए। फिर आप अपनी छवियों में शैलियों को जोड़ने के लिए उस तत्व और FIGCAPTION तत्व का उपयोग कर सकते हैं।