Subscribe Us

header ads

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

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

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

Image_Setup

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

<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"/>

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

Image_Setup

अब आप यदि इस बार्डर का रंग अपनी पसंद अनुसार रखना चाहते है तो इस छोटे से कोड में ये 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"/>

Image_Setup

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

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

Image_Setup

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

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

ये छोटा सा नया कोड डालने से इस तस्वीर के बार्डर के चारो तरफ अंदर की और 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"/>

Image_Setup

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

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

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

एक टिप्पणी भेजें

10 टिप्पणियाँ

  1. [co="green"][si="4"]बहुत ही काम की जानकारी दी आपने वनीत जी आपको बहुत बहुत [/si][/co]
    [ma][im]http://www.graphicsgrotto.com/animatedgifs/comments/thankyou/images/agcthankyou7.gif[/im][/ma]

    जवाब देंहटाएं
  2. हमेशा की तरह एक अच्छी प्रस्तुती .जानकारी के लिए आपका आभार.



    मोहब्बत नामा
    मास्टर्स टेक टिप्स

    जवाब देंहटाएं
  3. बहुत अच्छी प्रस्तुति!
    इस प्रविष्टी की चर्चा कल रविवार (15-07-2012) के चर्चा मंच पर भी होगी!
    सूचनार्थ!

    जवाब देंहटाएं
    उत्तर
    1. [co="goldenred"]शुक्रिया डॉ. रूपचन्द्र शास्त्री मयंक जी |[/co]

      हटाएं
  4. मेरे लिये तो बहुत मुश्किल है।सहेज ली है पोस्ट। धन्यवाद।

    जवाब देंहटाएं
    उत्तर
    1. [co="crimsonred"]बहुत आसान है आप इस सारे कोड को कापी कर ले | इसमें सिर्फ चित्र के लिंक को अपने चित्र के लिंक से बदल दें | src=" चित्र का लिंक यहाँ पर लिखें" बस इतना भर करना है |[/co]

      हटाएं

आपकी टिप्पणी मेरे लिए मेरे लिए "अमोल" होंगी | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | अभद्र व बिना नाम वाली टिप्पणी को प्रकाशित नहीं किया जायेगा | इसके साथ ही किसी भी पोस्ट को बहस का विषय न बनाएं | बहस के लिए प्राप्त टिप्पणियाँ हटा दी जाएँगी |