how to rotate text in css3 - Hindi Tips
SUBTOTAL :
Banner Advertisement
Blog Tricks CSS-3
how to rotate text in css3

how to rotate text in css3

Blog Tricks CSS-3
Short Description:

Product Description

आप भी दिखाएं तारीख को रोटेट टेक्स्ट के रूप में बिना फोटोशाप के अपने ब्लॉग पर |

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

इस प्रकार के इफेक्ट के लिए तारीख को HTML Mode में निम्न प्रकार से लिखें |

<div><div class="example-date">
<span class="example-day">25</span> 
<span class="example-month">Dec.</span> 
<span class="example-year">2012</span>
</div></div>

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

<style>
.example-date {
font-family: 'Arial Black', helvetica, arial; 
  background-color:#228600;
  width:80px;
  float:left;
  margin-left:10px;
  padding:45px 12px 0px 5px;
  position:relative;
  color:#fff;border-radius:5px;
  
}
.example-date .example-day {
  font-size:45px;
  left:0px;
  line-height:45px;
  position:absolute;
  top:0;
  padding:0px 12px 0 10px;
}
.example-date .example-month {
  font-size:23px;
  text-transform:uppercase;
  padding:0px 0px 20px -20px;
}
.example-date .example-year {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display:block;
  position:absolute;
  right:-20px;
  top:25px;
  font-size:25px;
}
</style>

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

25 Dec. 2012

5 Reviews:

  1. [img]http://1.bp.blogspot.com/-qnlwYL-8Dfo/UNX_Ie2kBGI/AAAAAAAAFm0/0jXf70HDYXE/s1600/text-rotation-2.png[/img]

    ReplyDelete
  2. अद्भुत जानकारी के लिए शुक्रिया। इसी से मिलता एक और सवाल पूछना चाहूँगा की मैंने देखा है की कई लोग हर इमेज में अपने ब्लॉग का लिंक भी सेट कर देते हैं ,ये कैसे मुमकिन है।

    ReplyDelete
    Replies
    1. आमिर जी आप इस लिंक पर आपने प्रश्न का उत्तर देख सकते हैं | इसी पेज पर सभी प्रशनों के उत्तर देने का प्रयास किया जाएगा |

      Delete
  3. वैसे टेम्पलेट बहुत जबर्दस्त लगा। टिप्स हिंदी का नया रूप काफी सुहाना है। इसे दुबारा चेंज ना करना।

    ReplyDelete