क्या आप भी आई-मैजिक बैकग्राउंड का प्रयोग करना चाहते हैं ?

     पिछली पोस्ट पर सिर्फ दो रंग का प्रस्तुतिकर्ण किया था | रतन सिंह शेखावत जी व नवज्योत कुमार जी के आग्रह पर पांच और आई मैजिक बैकग्राउंड के कोड पेश हैं |

स्काईब्ल्यू कलर : अब आप स्काईब्ल्यू रंग की बैकग्राउंड के लिए इस कोड का इस्तेमाल करेंगे :-

<p class="skyblue rounded">अपना टेक्स्ट यहाँ पर लिखें </p>

इस बैकग्राउंड के लिए कोड निम्न बाक्स से कापी करें | इस कोड का प्रयोग कैसे करना है पिछली पोस्ट पर देखें |

<style type="text/css"> .skyblue.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} .skyblue {position:relative; width:545px;font-size:17px; line-height:25px; text-align:justify; padding:1em 1.5em; margin:2em auto; color:#fff; background:#1B9DD3; overflow:hidden;} .skyblue:before {content:""; position:absolute; top:0; right:0; border-width:0 25px 25px 0; border-style:solid; border-color:#fff #fff #1B9DD3 #B1B9DD3; background:#1B9DD3; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */} .skyblue.rounded {-webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px;border-radius:10px 0 10px 10px;} .nagpal.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} </style>

गोल्डन ऑरेंज कलर : अब आप गोल्डन ऑरेंज रंग की बैकग्राउंड के लिए इस कोड का इस्तेमाल करेंगे :-

<p class="gorange rounded">अपना टेक्स्ट यहाँ पर लिखें </p>

इस बैकग्राउंड के लिए कोड निम्न बाक्स से कापी करें | इस कोड का प्रयोग कैसे करना है पिछली पोस्ट पर देखें |

<style type="text/css"> .gorange.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} .gorange {position:relative; width:545px;font-size:17px; line-height:25px; text-align:justify; padding:1em 1.5em; margin:2em auto; color:#fff; background:#f60; overflow:hidden;} .gorange:before {content:""; position:absolute; top:0; right:0; border-width:0 25px 25px 0; border-style:solid; border-color:#fff #fff #f60 #f60; background:#f60; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */} .gorange.rounded {-webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px;border-radius:10px 0 10px 10px;} .nagpal.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} </style>

पिंक कलर : अब आप पिंक रंग की बैकग्राउंड के लिए इस कोड का इस्तेमाल करेंगे :-

<p class="gorange rounded">अपना टेक्स्ट यहाँ पर लिखें </p>

इस बैकग्राउंड के लिए कोड निम्न बाक्स से कापी करें | इस कोड का प्रयोग कैसे करना है पिछली पोस्ट पर देखें |

<style type="text/css"> .pink.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} .pink {position:relative; width:545px;font-size:17px; line-height:25px; text-align:justify; padding:1em 1.5em; margin:2em auto; color:#fff; background:#FA04F1; overflow:hidden;} .pink:before {content:""; position:absolute; top:0; right:0; border-width:0 25px 25px 0; border-style:solid; border-color:#fff #fff #FA04F1 #FA04F1; background:#FA04F1; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */} .pink.rounded {-webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px;border-radius:10px 0 10px 10px;} .nagpal.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} </style>

ग्रीन कलर : अब आप ग्रीन कलर रंग की बैकग्राउंड के लिए इस कोड का इस्तेमाल करेंगे :-

<p class="gorange rounded">अपना टेक्स्ट यहाँ पर लिखें </p>

इस बैकग्राउंड के लिए कोड निम्न बाक्स से कापी करें | इस कोड का प्रयोग कैसे करना है पिछली पोस्ट पर देखें |

<style type="text/css"> .green.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} .green {position:relative; width:545px;font-size:17px; line-height:25px; text-align:justify; padding:1em 1.5em; margin:2em auto; color:#fff; background:#006E54; overflow:hidden;} .green:before {content:""; position:absolute; top:0; right:0; border-width:0 25px 25px 0; border-style:solid; border-color:#fff #fff #006E54 #006E54; background:#006E54; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */} .green.rounded {-webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px;border-radius:10px 0 10px 10px;} .nagpal.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} </style>

ब्लैकग्रे कलर : अब आप ब्लैकग्रे ऑरेंज रंग की बैकग्राउंड के लिए इस कोड का इस्तेमाल करेंगे :-

<p class="bkgrey rounded">अपना टेक्स्ट यहाँ पर लिखें </p>

इस बैकग्राउंड के लिए कोड निम्न बाक्स से कापी करें | इस कोड का प्रयोग कैसे करना है पिछली पोस्ट पर देखें |

<style type="text/css"> .bkgrey.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} .bkgrey {position:relative; width:545px;font-size:17px; line-height:25px; text-align:justify; padding:1em 1.5em; margin:2em auto; color:#fff; background:#3C3C3D; overflow:hidden;} .bkgrey:before {content:""; position:absolute; top:0; right:0; border-width:0 25px 25px 0; border-style:solid; border-color:#fff #fff #3C3C3D #3C3C3D; background:#3C3C3D; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */} .bkgrey.rounded {-webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px;border-radius:10px 0 10px 10px;} .nagpal.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} </style>

     ये पांच नए रंग आप सब के लिए पेश है | यदि फिर भी ये रंग आप के टेम्पलेट की थीम से मेल न खाते हों तो आप अपनी पसंद अनुसार इस में परिवर्तन कर सकते हैं :-

     निम्न कोड में जहाँ पर ऑरेंज कलर में 3C3C3D ये कोड लिखा दिखाई दे रहा है बस आपको उस जगह पर अपने टेम्पलेट की थीम का अनुसार कलर कोड का चयन करके इस कोड से बदलना है | class="bkgrey" चाहें तो वही रहने दे इससे कोई फर्क नहीं पड़ेगा | तो लुत्फ़ उठाइए | हैपी ब्लॉगगिंग !!!

<style type="text/css"> .bkgrey.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} .bkgrey {position:relative; width:545px;font-size:17px; line-height:25px; text-align:justify; padding:1em 1.5em; margin:2em auto; color:#fff; background:#3C3C3D; overflow:hidden;} .bkgrey:before {content:""; position:absolute; top:0; right:0; border-width:0 25px 25px 0; border-style:solid; border-color:#fff #fff #3C3C3D #3C3C3D; background:#3C3C3D; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */} .bkgrey.rounded {-webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px;border-radius:10px 0 10px 10px;} .nagpal.rounded:before {border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;} </style>

ई-मेल मी

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

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