Subscribe Us

header ads

happy new year in 3d

नया साल मुबारक कहें नये अंदाज में 3D टेक्स्ट के रूप में

happy new year

ये लाइव डेमो आप नीचे देख रहे हैं

Happy

New Year

ये डेमो Mozilla Firefox व Chrome में tested है | यदि आप इसे आज़माना चाहते हैं तो निम्न specification जरूरी हैं |

यदि आप दो कालम वाला टेम्पलेट प्रयोग कर रहे हैं तो आपके टेम्पलेट के पहले कालम की चौड़ाई कम से कम 650px होनी चाहिए | इस tutorial को दो भागों में बांटा जा रहा है | पहले भाग में आप को HTML मोड में Happy New Year निम्न प्रकार से लिखना होगा |

<div class="container">
<p class="text-shadow1">Happy</p>
<p class="text-shadow">New Year</p>
</div>

दूसरे भाग में निम्न CSS (Cascading Style Sheet) कोड को कापी करने के बाद HTML/JavaScript विजेट में पेस्ट करने के बाद आपने ब्लॉग के साइडबार में लगाना है |

<style>
@import url(http://fonts.googleapis.com/css?family=Lobster);
.container{background:#228600;width:640px;height:500px;outline: 1px dashed #fff;
    outline-offset: -5px;}
p.text-shadow1 {  font-family: 'Lobster', helvetica, arial;   
      font-size:10em;
      color:#fff;
      text-align:center;
      padding-top:-10px;
      padding-bottom:40px;
      padding-left:95px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -webkit-transform: rotate(-25deg);
      -moz-transform: rotate(-25deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      display:block;
      position:absolute;
}
p.text-shadow1{ text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               }
p.text-shadow {  font-family: 'Lobster', helvetica, arial;   
      font-size:8em;
      color:#fff;
      text-align:center;
      padding-top:215px;
      padding-bottom:40px;
      padding-left:85px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -webkit-transform: rotate(-25deg);
      -moz-transform: rotate(-25deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      display:block;
      position:absolute;
}

p.text-shadow{ text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               }
</style>

क्या आपको ये लेख पसंद आया ? यदि हां !!! तो टिप्पणी अवश्य दें ताकि निरंतर लिखने की चाह बनी रहे |

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

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

10 टिप्पणियाँ

  1. बहुत ही अच्छी जानकारी दी। क्या ऐसा HTML कोड है की CSS कोड बिना साइडवर में लगाये ये इफेक्ट बना सकें,धन्यबाद।

    जवाब देंहटाएं
    उत्तर
    1. राजिंदर जी टिप्पणी के लिए धन्यवाद |
      यदि आप CSS कोड साइडबार में नहीं लगाना चाहते तो आपको इस कोड को अपने टेम्पलेट के एडिट मोड में सिर्फ एक बार लगाना होगा | टेम्पलेट के डिजाईन को Attractive दिखाने के लिए CSS कोड का प्रयोग किया जाता है | इसके बिना ये संभव नहीं है | मैं इस कोड को साईडबार में लगाने के लिए इसलिए कहता हूँ तो नए ब्लॉगर को किसी भी समस्या का साहमना न करना पड़े | CSS कोड चाहे टेम्पलेट के एडिट मोड में प्रयोग करें या साईडबार में ये एक जैसा ही प्रभाव उत्पन्न करता है | CSS कोड को साईडबार में लगाने का एक और फायदा ये भी है कि आप जब चाहें इसे हटा सकते हैं | टेम्पलेट के एडिट मोड में लगाने पर यदि आप तकनीक के जानकार नहीं है तो आपके लिए इस प्रकार के कोड को हटाना काफी मुश्किल होगा | इसलिए ही मैं इस प्रकार के कोड को साईडबार में लगाने के लिए कहता हूँ |

      हटाएं
  2. CSS कोड के हमारे संशय को इतनी अच्छी तरीके से दूर करने के लिए फिर से एक बार धन्यबाद।Chrome में अच्छा काम कर रहा है।

    जवाब देंहटाएं
    उत्तर
    1. ये Mozilla Firefox में भी बेहतर काम करता है | यदि Safari व Opera में भी इसका प्रयोग करना हो तो इस कोड में कुछ परिवर्तन करने पर भी ये इनमें भी बेहतर दिखाई देगा | India में Safari ब्राउजर का बहुत कम इस्तेमाल किया जाता है Opera बहुत कम प्रयोग में लाया जा रहा है |

      हटाएं
  3. आपको भी नववर्ष की शुभकामनाऐ

    जवाब देंहटाएं
  4. बहुत सुन्दर प्रस्तुति..!
    आपकी इस प्रविष्टी की चर्चा कल रविवार (30-12-2012) के चर्चा मंच-1102 (बिटिया देश को जगाकर सो गई) पर भी की गई है!
    सूचनार्थ!

    जवाब देंहटाएं
  5. Bahut sundar jaankari hai. krpya Hindi Tips Naye Blog ka link is blog par bhi lgayen ,taki yahan hokar vahan ja sken.

    जवाब देंहटाएं
    उत्तर
    1. उपयोगी जानकारी..नव वर्ष की हार्दिक शुभकामनायें!

      हटाएं

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