inset Typography in CSS3

CSS3 के साथ इनसेट टाइपोग्राफी कैसे बनाएँ ?

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

<style>
<!--
/* INSET TYPE BEGIN */
* {margin:0; padding:0;}
 #insetType1 {
  width: 550px;
  height: 100px;
  background: -moz-linear-gradient(-90deg,#C56104,#FE9C42);
  background: -webkit-gradient(linear, left top, left bottom, from(#C56104), to(#FE9C42), color-stop(60%, #275f9b));
  /* Margin for content */
  margin-left:40px;
 }

 h2.insetFont1 {
  position: relative;
  font-family: Rockwell;
  font-size: 57px;
  padding-top: 36px;
 }
 
 h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
  position: absolute;
    top: 0;
  z-index: 2;
  padding-left: 50px;
  padding-top: 35px;
  text-decoration: none;
  color: #E76F00;
  /*text-shadow: 1px 1px 0 #6595be;*/
  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
    -webkit-mask-image: -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0), color-stop(30%, #10386E)));
  /*-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop((rgba(0,0,0,1)), color-stop((rgba(0,0,0,.3)), color-stop((rgba(0,0,0,0)));*/
 }
 
 h2:after {
    content: "Tips Hindi Mein";
    color: #fff;
  padding-left: 50px;
    /*text-shadow: 3px 3px 1px #600;*/
 }

/* INSET TYPE END */

-->
</style>

HTML मोड में अपने टेक्स्ट को पोस्ट के (Edit) मोड में निम्न प्रकार से लिखना है |

<div id="insetType">
<h1 class="insetFont"><a href="#">Inset Typography</a></h1>
</div>
जहाँ पर पीले रंग में Inset Typography में लिखा है वहां पर आपने अपना टाइटल लिखना है | HTML मोड में आप पोस्ट कैसे लिखें आप निम्न चित्र से समझ सकते हैं :-



डेमो आप नीचे देख सकते हैं |

Inset Typography

-->

---

Tips Hindi Mein

-->

---

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

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