CSS के साथ इमेज कैसे स्टाइल करें

CSS की मदद से फ्लोटिंग इमेज के चारों ओर टेक्स्ट रैप बनाने का तरीका जानें।

अपने पाठ को दाईं ओर की छवि के चारों ओर लपेटने के लिए, जिस तरह से यह इस लेख को पेश करने वाली तस्वीर में है, इस तरह एक सीएसएस नियम का उपयोग करें:

फ्लोट: लेफ्ट रूल इमेज को लेफ्ट हाशिये पर ले जाता है। पैडिंग-राइट नियम टेक्स्ट को इमेज के दाईं ओर ऊपर की ओर टकराने से रोकता है। अगर इस इमेज में बॉर्डर जोड़ा जाता है, तो इमेज और बॉर्डर के बीच पैडिंग आ जाएगी। बॉर्डर वाली इमेज के साथ काम करने के लिए सेक्शन 2 देखें।

इसके बाद, छवि को केंद्र में रखने के लिए बाईं और दाईं ओर हाशिये जोड़ें। किसी भी चीज़ को केंद्र में रखने के लिए बाएँ और दाएँ हाशिये का उचित मान ऑटो है।

खांचे की सीमा शैली का उपयोग करके एक मोटी, फ्रेम जैसी सीमा बनाने के लिए, इस तरह के एक नियम का उपयोग किया जा सकता है:

अन्य सीमा शैली ठोस, बिंदीदार, धराशायी, डबल, रिज, इनसेट और आउटसेट हैं। चौड़ाई को पिक्सल, ईएमएस या प्रतिशत में व्यक्त किया जा सकता है।

बॉर्डर को छवि के ऊपर, दाएं, नीचे और बाईं ओर चुनिंदा रूप से लागू किया जा सकता है। आप इस ज्ञान का उपयोग एक बूंद छाया की तरह प्रभाव पैदा करने के लिए कर सकते हैं।

केवल दाएं और निचले बॉर्डर पर 2 रंगों के ग्रे में एक ठोस बॉर्डर का उपयोग करके, आपको एक ड्रॉप शैडो प्रभाव मिलता है।

आईएमजी {फ्लोट: बाएं; सीमा-दाएं-शैली: ठोस; सीमा-दाएं-चौड़ाई: 8px; बॉर्डर-राइट-कलर: #CCCCCC; सीमा-नीचे-शैली: ठोस; सीमा-नीचे-चौड़ाई: 8px; सीमा-नीचे-रंग: #999999; मार्जिन-दाएं: 1em; मार्जिन-नीचे: 1em; }

टिप

यदि आपके पास किसी पृष्ठ के एक से अधिक विभाजन (div) में चित्र हैं, तो उन्हें अलग-अलग शैली देने के लिए वंशज चयनकर्ताओं का उपयोग करें। संभावित चयनकर्ता: #content img, #sidebar img, #feature img।

श्रेणियाँ

हाल का

लैपटॉप में CMOS बैटरी को बदलना

लैपटॉप में CMOS बैटरी को बदलना

लैपटॉप खोलना अपना लैपटॉप खोलो। ऐसा करने के लिए...

Nero 7 Essentials के साथ बूट करने योग्य डिस्क कैसे बनाएं

Nero 7 Essentials के साथ बूट करने योग्य डिस्क कैसे बनाएं

छवि क्रेडिट: सर्गेई गालुश्को द्वारा ड्राइव छवि ...

मैं Google मानचित्र के लिए डेस्कटॉप शॉर्टकट कैसे बनाऊं?

मैं Google मानचित्र के लिए डेस्कटॉप शॉर्टकट कैसे बनाऊं?

हालांकि Google मानचित्र के लिए डेस्कटॉप शॉर्टकट...