happy new year in 3d

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

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

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>

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

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