ब्लॉग पर स्थापित चित्र को आकषर्क कैसे दिखाएँ

ब्लॉग पर स्थापित चित्र को आकषर्क कैसे दिखाएँ

पिछले लेख में आपने पढ़ा था कि किसी भी चित्र को अपने मनपसंद अनुसार कैसे स्थापित करें | इसी कड़ी में आगे, किसी भी चित्र को अपने ब्लॉग पर स्थापित करने के बाद उस चित्र को और आकर्षक कैसे बनायें ? निम्न चित्र को ध्यान से देखें |



अब उपरोक्त चित्र के कोड को देखें | ये चित्र साधारण रूप में आपको दिखाई दे रहा है |

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSF65LNAJ9YrO4Up3EikoblQ3ylz94DueauaycW4AhD_9ovpMAXgJSBZkETZK42tgCa_Ba_tRJQsuyCkYQUD5oVLqpZYzL2vDOqx-lCdl9p6rsvYDtM8YcduKP7uog2bP7tUlQSWiIjT4/s1600/cjs_6.jpg" alt="Image_Setup" width="505" height="350" title="This Site is best viewed in Mozilla Firefox, Sfarai, Opera, Google Chrome"/>

अब इस चित्र को और आकर्षक रूप में दिखने के लिए मैं कुछ और कोड का इस्तेमाल करूँगा | निम्न कोड में मैं ये कोड style="border:2px solid;" इस्तेमाल करूँगा :-

<img style="border:2px solid;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSF65LNAJ9YrO4Up3EikoblQ3ylz94DueauaycW4AhD_9ovpMAXgJSBZkETZK42tgCa_Ba_tRJQsuyCkYQUD5oVLqpZYzL2vDOqx-lCdl9p6rsvYDtM8YcduKP7uog2bP7tUlQSWiIjT4/s1600/cjs_6.jpg" alt="Image_Setup" width="505" height="350" title="This Site is best viewed in Mozilla Firefox, Sfarai, Opera, Google Chrome"/>

उपरोक्त अनुसार ये छोटा सा और कोड लिखने के पश्चात आपको चित्र निम्न अनुसार दिखाई देगा :-



अब आप यदि इस बार्डर का रंग अपनी पसंद अनुसार रखना चाहते है तो इस छोटे से कोड में ये green लिख दें | इस प्रकार करने से आप द्वारा चयनित चित्र का बार्डर ग्रीन रंग का हो जायेगा | इसे आप निम्न कोड में देख सकते हैं, व कोड इन्सर्ट करने का बाद चित्र भी देख सकते हैं

<img class="magnify" style="border:2px solid green;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSF65LNAJ9YrO4Up3EikoblQ3ylz94DueauaycW4AhD_9ovpMAXgJSBZkETZK42tgCa_Ba_tRJQsuyCkYQUD5oVLqpZYzL2vDOqx-lCdl9p6rsvYDtM8YcduKP7uog2bP7tUlQSWiIjT4/s1600/cjs_6.jpg" alt="Image_Setup" width="505" height="350" title="This Site is best viewed in Mozilla Firefox, Sfarai, Opera, Google Chrome"/>



अब उपरोक्त कोड में Style="border: के बाद 2px लिखने का मतलब है कि इस चित्र के इर्द-गिर्द दिखाई देने वाला बार्डर २ पिक्सल मोटाई का हो |

Solid का मतलब है कि बार्डर एकसार लाइन में हो, यदि आप Solid की जगह dashed लिख देगे तो उस चित्र के इर्द-गिर्द डैश लाइन वाला बार्डर दिखाई देगा | इसकी एक झलक आप निम्न चित्र में देख सकते हैं |



इस कोड में green लिखने का मतलब है कि इस चित्र के इर्द-गिर्द दिखाई देने वाला बार्डर हरे रंग में दिखाई दे, जैसा की आप उपरोक्त चित्र में देख सकते हैं

अब इसी कोड style="border:2px dashed green;" में ये छोटा सा कोड और डाल दें padding:10px; ये कोड डालने से कोड कुछ इस प्रकार से होगा style="border:2px dashed green;padding:10px;" ये कोड डालने से आपको चित्र निम्न अनुसार दिखाई देगा :-

ये छोटा सा नया कोड डालने से इस तस्वीर के बार्डर के चारो तरफ अंदर की और 10px का स्पेस बन जायेगा | ऐसा करने से आप द्वारा स्थापित चित्र और सुन्दर दिखाई देने लगेगा |

अब इस कोड में एक और छोटा सा कोड -moz-border-radius:10px; डालने से इस चित्र पर लगे बार्डर के किनारे चारों कोनों से गोल हो जायेंगे | इस कोड की एक झलक आप निम्न कोड में देख सकते है, साथ में तस्वीर में बार्डर की गोलाई भी देख सकते हैं |

<img class="magnify" style="border:2px solid green;padding:10px;-moz-border-radius:10px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSF65LNAJ9YrO4Up3EikoblQ3ylz94DueauaycW4AhD_9ovpMAXgJSBZkETZK42tgCa_Ba_tRJQsuyCkYQUD5oVLqpZYzL2vDOqx-lCdl9p6rsvYDtM8YcduKP7uog2bP7tUlQSWiIjT4/s1600/cjs_6.jpg" alt="Image_Setup" width="505" height="350" title="This Site is best viewed in Mozilla Firefox, Sfarai, Opera, Google Chrome"/>



उम्मीद है ये पोस्ट भी आपकी अपेक्षाओं पर खरा उतरेगी |

क्या आपको ये आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !