स्टाइल वेब छवियों के लिए सीएसएस का उपयोग करना

कई लोग टेक्स्ट समायोजित करने के लिए सीएसएस का उपयोग करते हैं, फ़ॉन्ट, रंग, आकार और अधिक बदलते हैं। लेकिन एक बात यह है कि कई लोग अक्सर भूल जाते हैं कि आप छवियों के साथ सीएसएस का भी उपयोग कर सकते हैं।

खुद को छवि बदलना

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

• छवियों के चारों ओर एक सीमा या रूपरेखा जोड़ें
• लिंक की गई छवियों के चारों ओर रंगीन सीमा हटा दें
• छवियों की चौड़ाई और / या ऊंचाई समायोजित करना
• एक बूंद छाया जोड़ें
• छवि घुमाओ
• छवि को ढंकने पर शैलियों को बदलें

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

आईएमजी { सीमा: 1 पीएक्स ठोस काला; पैडिंग: 5 पीएक्स;}

जब भी संभव हो, गैर-सजावटी छवियों को हमेशा लिंक करना एक अच्छा विचार है। लेकिन जब आप करते हैं, तो याद रखें कि अधिकांश ब्राउज़र छवि के चारों ओर एक रंगीन सीमा जोड़ते हैं। यहां तक ​​कि यदि आप सीमा को बदलने के लिए उपर्युक्त कोड का उपयोग करते हैं, तो लिंक तब तक ओवरराइड होगा जब तक आप लिंक पर सीमा को हटा या परिवर्तित नहीं करते। ऐसा करने के लिए आपको लिंक किए गए चित्रों के आस-पास की सीमा को हटाने या बदलने के लिए एक सीएसएस बाल नियम का उपयोग करना चाहिए:

img> एक { सीमा: कोई नहीं;}

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

याद रखें, जब आप छवियों का आकार बदलते हैं, सर्वोत्तम परिणामों के लिए, आपको केवल एक आयाम का आकार बदलना चाहिए - ऊंचाई या चौड़ाई। यह उत्साहित होगा कि छवि अपने पहलू अनुपात रखती है, और इसलिए अजीब नहीं लगती है। अन्य मान को सेट करें ऑटो या पहलू अनुपात को लगातार बनाए रखने के लिए ब्राउज़र को बताने के लिए इसे छोड़ दें।

आईएमजी { चौड़ाई: 50%; ऊंचाई: ऑटो;}

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

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

पृष्ठभूमि के रूप में छवियों का उपयोग करना

सीएसएस आपकी छवियों के साथ फैंसी पृष्ठभूमि बनाना आसान बनाता है। आप पूरे पृष्ठ पर या केवल एक विशिष्ट तत्व में पृष्ठभूमि जोड़ सकते हैं। पृष्ठ पर पृष्ठभूमि छवि बनाना आसान है पृष्ठभूमि छवि संपत्ति:

तन { पृष्ठभूमि-छवि: यूआरएल (background.jpg);}

बदलाव तन पृष्ठभूमि को केवल एक तत्व पर रखने के लिए पृष्ठ पर किसी विशिष्ट तत्व के चयनकर्ता।

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

और CSS3 आपकी पृष्ठभूमि के लिए और भी शैलियों को जोड़ता है। आप अपनी छवियों को किसी भी आकार की पृष्ठभूमि में फिट करने के लिए खिंचाव कर सकते हैं या पृष्ठभूमि आकार को विंडो आकार के साथ स्केल करने के लिए सेट कर सकते हैं। आप स्थिति बदल सकते हैं और फिर पृष्ठभूमि छवि क्लिप कर सकते हैं। लेकिन CSS3 के बारे में सबसे अच्छी चीजों में से एक यह है कि अब आप और अधिक जटिल प्रभाव बनाने के लिए कई पृष्ठभूमि छवियों को ले जा सकते हैं।

एचटीएमएल 5 शैली छवियों में मदद करता है

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