बहुत से लोग उपयोग करते हैं सीएसएस पाठ को समायोजित करने के लिए, फ़ॉन्ट, रंग, आकार और बहुत कुछ बदलना। लेकिन एक बात जो बहुत से लोग अक्सर भूल जाते हैं वह यह है कि आप CSS का उपयोग इमेज के साथ भी कर सकते हैं।
छवि को ही बदलना
CSS आपको यह समायोजित करने की अनुमति देता है कि पृष्ठ पर छवि कैसे प्रदर्शित होती है। यह आपके पृष्ठों को सुसंगत रखने के लिए वास्तव में उपयोगी हो सकता है। सभी छवियों पर शैलियाँ सेट करके, आप अपनी छवियों के लिए एक मानक रूप बनाते हैं। कुछ चीजें जो आप कर सकते हैं:
- छवियों के चारों ओर एक सीमा या रूपरेखा जोड़ें
- लिंक की गई छवियों के चारों ओर रंगीन बॉर्डर हटाएं
- छवियों की चौड़ाई और/या ऊंचाई समायोजित करना
- एक बूंद छाया जोड़ें
- छवि घुमाएँ
- शैलियों को बदलें जब छवि पर मँडरा दिया जाता है
अपनी छवि को एक सीमा देना शुरू करने के लिए एक शानदार जगह है। लेकिन आपको केवल सीमा से अधिक पर विचार करना चाहिए - अपनी छवि के पूरे किनारे के बारे में सोचें और हाशिये को समायोजित करें और गद्दी भी। पतली काली बॉर्डर वाली छवि अच्छी लगती है, लेकिन बॉर्डर और छवि के बीच कुछ पैडिंग जोड़ने से और भी बेहतर दिखाई दे सकती है।
यह अच्छा विचार है कि हमेशा गैर-सजावटी छवियों को लिंक करें, जब संभव हो। लेकिन जब आप ऐसा करते हैं, तो याद रखें कि अधिकांश ब्राउज़र छवि के चारों ओर एक रंगीन बॉर्डर जोड़ते हैं। यहां तक कि अगर आप सीमा को बदलने के लिए उपरोक्त कोड का उपयोग करते हैं, तो लिंक तब तक ओवरराइड हो जाएगा जब तक कि आप लिंक पर सीमा को हटा या बदल नहीं देते। ऐसा करने के लिए आपको लिंक की गई छवियों के आसपास की सीमा को हटाने या बदलने के लिए CSS चाइल्ड रूल का उपयोग करना चाहिए:
आप अपनी छवियों की ऊंचाई और चौड़ाई को बदलने या सेट करने के लिए सीएसएस का भी उपयोग कर सकते हैं। हालांकि डाउनलोड गति के कारण छवि आकार को समायोजित करने के लिए ब्राउज़र का उपयोग करना एक अच्छा विचार नहीं है, वे छवियों का आकार बदलने में बहुत बेहतर हो रहे हैं ताकि वे अभी भी अच्छे दिखें। और सीएसएस के साथ आप अपनी छवियों को सभी मानक चौड़ाई या ऊंचाई पर सेट कर सकते हैं या यहां तक कि आयामों को कंटेनर के सापेक्ष सेट कर सकते हैं।
याद रखें, जब आप छवियों का आकार बदलते हैं, तो सर्वोत्तम परिणामों के लिए, आपको केवल एक आयाम - ऊंचाई या चौड़ाई का आकार बदलना चाहिए। यह सुनिश्चित करेगा कि छवि अपना पक्षानुपात बनाए रखे, और इसलिए अजीब नहीं लगे। अन्य मान को पर सेट करें ऑटो या पक्षानुपात को सुसंगत रखने के लिए ब्राउज़र को बताने के लिए इसे छोड़ दें।
CSS3 नए गुणों के साथ इस समस्या का समाधान प्रदान करता है वस्तु-फिट तथा वस्तु-स्थिति. इन गुणों के साथ, आप सटीक छवि ऊंचाई और चौड़ाई को परिभाषित करने में सक्षम होंगे और पहलू अनुपात को कैसे संभाला जाना चाहिए। यह आपकी छवियों के चारों ओर लेटरबॉक्सिंग प्रभाव पैदा कर सकता है या छवि को आवश्यक आकार में फिट करने के लिए क्रॉप कर सकता है।
अन्य CSS3 गुण हैं जो अधिकांश ब्राउज़रों में अच्छी तरह से समर्थित हैं जिनका उपयोग आप अपनी छवियों को संशोधित करने के लिए भी कर सकते हैं। ड्रॉप शैडो, गोल कोने, और आपकी छवियों को घुमाने, तिरछा करने या स्थानांतरित करने के लिए परिवर्तन जैसी चीजें अभी अधिकांश आधुनिक ब्राउज़रों में काम करती हैं। फिर आप सीएसएस ट्रांज़िशन का उपयोग छवियों को बदलने, या क्लिक करने, या कुछ समय के बाद करने के लिए कर सकते हैं।
पृष्ठभूमि के रूप में छवियों का उपयोग करना
CSS आपकी छवियों के साथ फैंसी पृष्ठभूमि बनाना आसान बनाता है। आप ऐसा कर सकते हैं पूरे पृष्ठ पर पृष्ठभूमि जोड़ें या सिर्फ एक विशिष्ट तत्व के लिए। पृष्ठ पर पृष्ठभूमि छवि बनाना आसान है पृष्ठभूमि छवि संपत्ति:
को बदलें तन केवल एक तत्व पर पृष्ठभूमि डालने के लिए पृष्ठ पर एक विशिष्ट तत्व के लिए चयनकर्ता।
एक और मजेदार चीज जो आप छवियों के साथ कर सकते हैं, वह है एक ऐसी पृष्ठभूमि छवि बनाना जो शेष पृष्ठ के साथ स्क्रॉल न करे - जैसे वॉटरमार्क। आप बस शैली का उपयोग करें पृष्ठभूमि-लगाव: निश्चित; आपकी पृष्ठभूमि छवि के साथ। आपकी पृष्ठभूमि के लिए अन्य विकल्पों में. का उपयोग करके उन्हें केवल क्षैतिज या लंबवत रूप से टाइल करना शामिल है पृष्ठभूमि दोहराएँ संपत्ति। लिखना बैकग्राउंड-रिपीट: रिपीट-एक्स; छवि को क्षैतिज रूप से टाइल करने के लिए और बैकग्राउंड-रिपीट: रिपीट-वाई; लंबवत टाइल करने के लिए। और आप अपनी पृष्ठभूमि छवि को के साथ स्थित कर सकते हैं पृष्ठभूमि स्थिति संपत्ति।
और CSS3 आपकी पृष्ठभूमि के लिए और शैलियों को भी जोड़ता है। आप अपनी छवियों को किसी भी आकार की पृष्ठभूमि में फिट करने के लिए बढ़ा सकते हैं या पृष्ठभूमि छवि को विंडो आकार के साथ स्केल करने के लिए सेट कर सकते हैं। आप स्थिति बदल सकते हैं और फिर पृष्ठभूमि छवि को क्लिप कर सकते हैं। लेकिन CSS3 के बारे में सबसे अच्छी चीजों में से एक यह है कि अब आप अधिक जटिल प्रभाव बनाने के लिए कई पृष्ठभूमि छवियों को परत कर सकते हैं।
HTML5 स्टाइल इमेज में मदद करता है
आंकड़ा HTML5 में तत्व किसी भी छवि के आसपास रखा जाना चाहिए जो दस्तावेज़ के भीतर अकेले खड़े हो सकते हैं। इसके बारे में सोचने का एक तरीका यह है कि यदि छवि परिशिष्ट में दिखाई दे सकती है, तो वह अंदर होनी चाहिए आंकड़ा तत्व। फिर आप उस तत्व का उपयोग कर सकते हैं और फिगकैप्शन आपकी छवियों में शैलियों को जोड़ने के लिए तत्व।