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

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

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

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

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

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

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

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

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

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

टिप

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

श्रेणियाँ

हाल का

माइक्रोसॉफ्ट वर्ड में टाइटल पेज कैसे बनाएं

माइक्रोसॉफ्ट वर्ड में टाइटल पेज कैसे बनाएं

अपनी रिपोर्ट को एक अच्छी तरह से प्रारूपित शीर्...

Google खोज का उपयोग करने के लिए सात उपयोगी समय बचाने वाली युक्तियाँ

Google खोज का उपयोग करने के लिए सात उपयोगी समय बचाने वाली युक्तियाँ

जैसे ही आप टाइप करना शुरू करते हैं, Google झटप...

एपेक्स रिमोट कंट्रोल कैसे प्रोग्राम करें

एपेक्स रिमोट कंट्रोल कैसे प्रोग्राम करें

छवि क्रेडिट: क्रिएटास/क्रिएटस/गेटी इमेजेज टीवी ...