how to make a star without photoshop

आप भी बनायें 5 स्टार को एक छोटे से CSS कोड से |

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

लाइव डेमो आप निम्न देख सकते हैं|

कोड निम्न है

<div id="THMstar-five"></div >

<style type="text/css" >
#THMstar-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: #9C062B;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid #9C062B;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#THMstar-five:before {
   border-bottom: 80px solid #9C062B;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
}
#THMstar-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #9C062B;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}
</style>

CSS कोड निम्न प्रकार से लिखें |

1. सातवी पंक्ति : स्टार के रंग को बदलने के लिए आप इस कोड #9C062B की जगह अपनी पसंद का रंग का कोड लिखें |
2.दसवीं, अठारवीं व बयाल्वी पंक्ति : स्टार के बार्डर के रंग को बदलने के लिएय #9C062B की जगह अपनी पसंद के रंग का कोड लिखें |
यदि आप इस तरह के इफेक्ट को इसी तरह से प्रयोग करना चाहते हैं तो उपरोक्त कोड को कापी करने के बाद इसे अपने ब्लॉग के साइडबार में स्थापित कर लें |

नोट : इस तरह के इफेक्ट के लिए HTML Mode का प्रयोग करें

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