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

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

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

अपना टेक्स्ट यहाँ पर लिखें 

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

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

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

अपना टेक्स्ट यहाँ पर लिखें 

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

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

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

अपना टेक्स्ट यहाँ पर लिखें 

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

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

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

अपना टेक्स्ट यहाँ पर लिखें 

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

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

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

अपना टेक्स्ट यहाँ पर लिखें 

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

<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" चाहें तो वही रहने दे इससे कोई फर्क नहीं पड़ेगा | तो लुत्फ़ उठाइए | हैपी ब्लॉगगिंग !!!

ई-मेल मी

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

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

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

3 टिप्पणियाँ

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Gyan Darpanगुरु नव॰ 10, 05:24:00 pm 2011
बहुत बढ़िया! अब हर ब्लोगर अपने ब्लॉग की थीम के अनुसार बदलाव कर सकता है|
जवाब देंहटाएं
उत्तर
tips hindi meगुरु नव॰ 10, 06:04:00 pm 2011
रतन सिंह शेखावत जी | धन्यवाद |
जवाब देंहटाएं
उत्तर
बेनामीशुक्र नव॰ 11, 10:06:00 am 2011
बहुत ही अच्छा, आपको हार्दिक धन्यवाद.
जवाब देंहटाएं
उत्तर

टिप्पणी जोड़ें

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