अपनी पोस्ट का टाईटल लिखें 3d Effect के साथ, बिना फोटोशाप की मदद के

अपनी पोस्ट का टाईटल लिखें 3d Effect के साथ, बिना फोटोशाप की मदद के

जैसा कि आप उपरोक्त चित्र में देख रहे हैं, आप भी बिना फोटोशाप की सहायता के इस तरह के 3d-effect का प्रयोग अपने ब्लॉग पर कर सकते हैं | ऐसे effect ब्लॉग पर प्रदर्शित करना बहुत आसान है | आज की पोस्ट में आप जानेगे कि किसी भी टेक्स्ट पर ये प्रभाव कैसे उत्पन्न किया जाता है ? इस प्रभाव को देखने के लिए ब्राउजर के नये संस्करण का इस्तेमाल करें |

अपना टेक्स्ट HTML Mode में निम्न प्रकार से लिखें |

Tips Hindi

CSS कोड निम्न प्रकार से लिखें |
1.बैकग्राउंड का रंग बदलने के लिए छटी से सातवीं पंक्ति में 228600 दिखाई दे रहे कलर कोड को बदलें |
2.तीसरी पंक्ति : फॉण्ट को बदलने के लिए 'Oswald' की जगह अपनी पसंद के फॉण्ट का नाम लिखें |
3.चौथी पंक्ति : फॉण्ट के साइज को बदलने के लिए 8em की जगह अपनी पसंद साइज लिखें | एक em 16px के बराबर होता है |
4.पांचवीं पंक्ति : फॉण्ट के रंग को बदलने के लिए #fff की जगह अपनी पसंद के रंग का कोड लिखें |
5.छटी पंक्ति : फॉण्ट की alignment को बदलने के लिए center की जगह leftया rightका चयन कर सकते हैं

<style>
@import url(http://fonts.googleapis.com/css?family=Lobster);
p.text-shadow {  font-family: 'Oswald', helvetica, arial;   
      font-size:8em;
      color:#fff;
      text-align:center;
      background-color: #228600;
      padding-top:20px;
      padding-bottom:40px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
}

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>

लाइव डैमो आप नीचे देख सकते हैं

Tips Hindi