City Jalalabad: CSS-3

CSS-3 लेबलों वाले संदेश दिखाए जा रहे हैं. सभी संदेश दिखाएं

शनिवार, नवंबर 23, 2013

how to make a star without photoshop

tips hindi meशनिवार, नवंबर 23, 2013 10 comments CSS-3

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

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

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

कोड निम्न है

<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 का प्रयोग करें

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

Stroked Text Effect का प्रयोग अपने ब्लॉग पर कैसे करें वो भी बिना फोटोशाप के ?

tips hindi meरविवार, जनवरी 13, 2013 4 comments Blog Tricks,CSS-3

Stroked Text Effect का प्रयोग अपने ब्लॉग पर कैसे करें वो भी बिना फोटोशाप के ?

यदि आप भी इस तरह स्ट्रोक टेक्स्ट इफेक्ट के बारे में विस्तार से जानना चाहते हैं कि इस का प्रयोग अपने ब्लॉग पर कैसे किया जा सकता है तो आप हिंदी टिप्स ब्लॉग पर जा कर जानकारी प्राप्त कर सकते हैं |

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

Sylish Push Type बटन अपने ब्लॉग पर कैसे स्थापित करें ?

tips hindi meशनिवार, जनवरी 05, 2013 4 comments Blog Tricks,CSS-3

Sylish Push Type बटन अपने ब्लॉग पर कैसे स्थापित करें ?

आज की पोस्ट में पेश है stylish Push Type CSS आधारित बटन | इस प्रकार के बटन का निर्माण करना बहुत ही आसान है | आइये देखते हैं कि इन का निर्माण किस प्रकार किया जा सकता है |

HTML में class का महत्वपूर्ण योगदान है | इस प्रकार के बटन के लिए हम दो class का प्रयोग एक साथ करेंगे | बटन के लिए push_batan व बटन के रंग के लिए green

पहला कदम : HTML मोड में


<a class="push_button green" href="#" target="_blank"/>Tips Hini Mein
</a>

<a class="push_button red" href="#" target="_blank"/>Tips Hini Mein
</a>

<a class="push_button blue" href="#" target="_blank"/>Tips Hini Mein
</a>

<a class="push_button orange" href="#" target="_blank"/>Tips Hini Mein
</a>

दूसरा कदम : CSS के बुनियादी स्टाइल

अब हम CSS कोड लिखेंगे जो हमें HTML मोड में दिखाई देता है | इस CSS कोड से बटन के स्टाइल व शेप batan class का प्रयोग करते हुए कैसे लिखा जाता है देख सकते हैं |

इस प्रकार के लिए CSS कोड का निम्न अवलोकन कर सकते हैं


<style type="text/css">
.push_button {
    position: relative;
    width:200px;
    height:40px;
    text-align:center;
    color:#FFF;
    text-decoration:none;
    line-height:43px;
    font-family:'Oswald', Helvetica;
    display: block;
    margin: 30px;
}
.push_button:before {
    background:#f0f0f0;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
    box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    
    position: absolute;
    content: "";
    left: -6px; right: -6px;
    top: -6px; bottom: -10px;
    z-index: -1;
}

.push_button:active {
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .10) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
    top:5px;
}
.push_button:active:before{
    top: -11px;
    bottom: -5px;
    content: "";
}
.green {
    text-shadow:-1px -1px 0 #000;
    background: #228600;
    border:1px solid #224718;
 
 background-image:-webkit-linear-gradient(top, #224718, #228600);
    background-image:-moz-linear-gradient(top, #224718, #228600);
    background-image:-ms-linear-gradient(top, #224718, #228600);
    background-image:-o-linear-gradient(top, #224718, #228600);
    background-image:linear-gradient(to bottom, #224718, #228600);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #224718, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #224718, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #224718, 0 4px 2px rgba(0, 0, 0, .5);
}

.green:hover {
    background: #228600;
    background-image:-webkit-linear-gradient(top, #228600, #224718);
    background-image:-moz-linear-gradient(top, #228600, #224718);
    background-image:-ms-linear-gradient(top, #228600, #224718);
    background-image:-o-linear-gradient(top, #228600, #224718);
    background-image:linear-gradient(top, #228600, #224718);
}

.red {
    text-shadow:-1px -1px 0 #A84155;
    background: #A20C1E;
    border:1px solid #DA0821;
 
 background-image:-webkit-linear-gradient(top, #E9001C, #A20C1E);
    background-image:-moz-linear-gradient(top, #E9001C, #A20C1E);
    background-image:-ms-linear-gradient(top, #E9001C, #A20C1E);
    background-image:-o-linear-gradient(top, #E9001C, #A20C1E);
    background-image:linear-gradient(to bottom, #E9001C, #A20C1E);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AF3009, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AF3009, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AF3009, 0 4px 2px rgba(0, 0, 0, .5);
}

.red:hover {
    background: #A20C1E;
    background-image:-webkit-linear-gradient(top, #A20C1E, #E9001C);
    background-image:-moz-linear-gradient(top, #A20C1E, #E9001C);
    background-image:-ms-linear-gradient(top, #A20C1E, #E9001C);
    background-image:-o-linear-gradient(top, #A20C1E, #E9001C);
    background-image:linear-gradient(top, #A20C1E, #E9001C);
}

.blue {
    text-shadow:-1px -1px 0 #A84155;
    background: #069FCB;
    border:1px solid #01C6FF;
 
 background-image:-webkit-linear-gradient(top, #01C6FF, #037FA3);
    background-image:-moz-linear-gradient(top, #01C6FF, #037FA3);
    background-image:-ms-linear-gradient(top, #01C6FF, #037FA3);
    background-image:-o-linear-gradient(top, #01C6FF, #037FA3);
    background-image:linear-gradient(to bottom, #01C6FF, #037FA3);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #056480, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #056480, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #056480, 0 4px 2px rgba(0, 0, 0, .5);
}

.blue:hover {
    background: #069FCB;
    background-image:-webkit-linear-gradient(top, #037FA3, #01C6FF);
    background-image:-moz-linear-gradient(top, #037FA3, #01C6FF);
    background-image:-ms-linear-gradient(top, #037FA3, #01C6FF);
    background-image:-o-linear-gradient(top, #037FA3, #01C6FF);
    background-image:linear-gradient(top, #037FA3, #01C6FF);
}
.orange {
    text-shadow:-1px -1px 0 #000;
    background: #E16C04;
    border:1px solid #FAA151;
 
 background-image:-webkit-linear-gradient(top, #FAA151, #E16C04);
    background-image:-moz-linear-gradient(top, #FAA151, #E16C04);
    background-image:-ms-linear-gradient(top, #FAA151, #E16C04);
    background-image:-o-linear-gradient(top, #FAA151, #E16C04);
    background-image:linear-gradient(to bottom, #FAA151, #E16C04);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #E56D02, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #E56D02, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #E56D02, 0 4px 2px rgba(0, 0, 0, .5);
}

.orange:hover {
    background: #FAA151;
    background-image:-webkit-linear-gradient(top, #E16C04, #FAA151);
    background-image:-moz-linear-gradient(top, #E16C04, #FAA151);
    background-image:-ms-linear-gradient(top, #E16C04, #FAA151);
    background-image:-o-linear-gradient(top, #E16C04, #FAA151);
    background-image:linear-gradient(top, #E16C04, #FAA151);
}
</style>

उपरोक्त प्रयोग किये गये कोड का लाइव डेमो आप नीचे देख सकते हैं

Tips Hini Mein Download Subcribe	Tips Hini Mein Download Subcribe
Tips Hini Mein Download Subcribe	Tips Hini Mein Download Subcribe

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

happy new year in 3d

tips hindi meशनिवार, दिसंबर 29, 2012 10 comments Blog Tricks,CSS-3

नया साल मुबारक कहें नये अंदाज में 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>

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

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

A powerful CSS gradient Generator

tips hindi meबुधवार, दिसंबर 26, 2012 1 comment Blog Tricks,CSS-3

एक पावरफुल फोटोशाप जैसा CSS Gradient Generator आपके लिए |

Get This on Tips Hindi Mein

यदि आप फोटोशाप जैसे आकर्षक Gradient Effect का निर्माण CSS Code के द्वारा करना चाहते हैं तो ये CSS Gradient Generator आपके काम को बहुत आसान बना देगा | अपने मनपसंद रंग का चुनाव करें व प्राप्त कोड को अपनी पोस्ट में प्रयोग कर लें | निम्न में आप एक उदाहरण देख सकते हैं की मैंने हल्के नीले रंग का चुनाव किया है | इस कोड का प्रयोग करने पर आपकी बैकग्राउंड निम्न चित्र अनुसार दिखाई देगी | इस चित्र से नीचे आप वो कोड देख सकते हैं |

background: rgb(135,224,253); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 47%, rgba(5,171,224,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(135,224,253,1)), color-stop(47%,rgba(83,203,241,1)), color-stop(100%,rgba(5,171,224,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

आप ये जानेगे की इस प्राप्त कोड का प्रयोग कैसे करें ? प्राप्त कोड को class में के कमांड कोड से बांधेगे | निम्न अवलोकन करें :-
.blueback{
font-size:16px;
line-height:25ps;
color:yellow;
text-shadow:1px 1px 1px #343434;
text-decoration:none;
text-align:justify;
max-width:400px;
padding:10px;
}

उपरोक्त कमांड का प्रयोग करने के बाद Code निम्न प्रकार से दिखाई देगा |

<style type="text/css">
.blueback{
font-size:16px;
line-height:25ps;
color:yellow;
text-shadow:1px 1px 1px #343434;
text-decoration:none;
text-align:justify;
max-width:400px;
padding:10px;
background: rgb(135,224,253); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 47%, rgba(5,171,224,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(135,224,253,1)), color-stop(47%,rgba(83,203,241,1)), color-stop(100%,rgba(5,171,224,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 47%,rgba(5,171,224,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
</style>

इस कोड को इस पैराग्राफ में HTML मोड़ में निम्न प्रकार से लिखेंगे तो आपको इस बैकग्राउंड की झलक दिखाई देगी |

<p class="blueback">अपना टेक्स्ट यहाँ पर लिखें </p>

1. दूसरी लाइन में मैंने इसे के कमांड बटन के रूप में प्रयोग किया है
2. तीसरी लाइन में फॉण्ट के साइज को तय किया है
3. चौथी लाइन में दो लाइनों के मध्य की दूरी तय की है |
4. पांचवीं लाइन में शब्दों के नीचे दिखाई देने वाली छाया को तय किया है |
5. छटी लाइन में पैराग्राफ में URL लिंक लगाने पर टेक्स्ट अंडर-लाइन न हो तय किया है |
6. सातवी लाइन में पैराग्राफ की चौड़ाई कितनी हो ये तय किया है |
7. आठवी लाइन में पैराग्राफ चारों तरफ से किनारों से कितनी दूरी पर हो, तय किया है |

इतना तय करने के बाद आपको ये पैराग्राफ इन्हीं Properties के अनुसार दिखाई दे रहा है |

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

Hover Effects with CSS3

tips hindi meसोमवार, दिसंबर 24, 2012 6 comments Blog Tricks,CSS-3

Hover Effects with CSS3 Transitions and Animations

CSS-3 एक विशाल शक्तिशाली जरिया है वेब डिजाईनिंग में वेब पेज की सजावट के लिए | इस पोस्ट में हम जानेंगे की कैसे हम रचनात्मक तरीके से इस का उपयोग किया जा सकता है | हम ये जानेंगे की कैसे CSS-3 transition का प्रयोग करके थम्बनेल होवर इफेक्ट का निर्माण किया जा सकता है | होवर में उस थम्बनेल (चित्र) के बारे में संक्ष्पित जानकारी जोड़ सकते हैं, एक अलग स्टाइल में |

उपरोक्त बताये अनुसार का लाइव डैमो आप नीचे देख सकते हैं |

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

इस तरह के इफेक्ट को हम दो भागो में बांटेगे | पहला भाग HTML Mode
HTML मोड़ में चित्र व संक्ष्पित जानकारी निम्न अनुसार लिखेंगे

<div class="container">
<div class="thmmain"> 
<div class="view view-thm">
<img src="your-image-link-here" width="300"/>
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
<div class="view view-thm">
<img src="your-image-link-here" width="300" />
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
<div class="view view-thm">
<img src="your-image-link-here" width="300" />
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
<div class="view view-thm">
<img src="your-image-link-here" width="300"/>
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
</div>
</div>

उपरोक्त HTML कोड में जहाँ पर your-image-link-here लिखा है वहां पर अपने द्वारा चयनित लिंक लगायें |

उपरोक्त HTML कोड में जहाँ पर नया साल आपके लिए ढेर सी खुशियाँ ले कर आये लिखा है वहां पर अपने द्वारा चयनित विवरण लिखें |

उपरोक्त HTML कोड में जहाँ पर URL लिखा है वहां पर चित्र से संबंधित जानकारी देने के लिए लिंक लिखें |

नीचे वो CSS कोड है जिसे आपने सिर्फ एक बार अपने ब्लॉग के साइडबार में स्थापित करना है | कोड स्थापित करने के लिए निम्न चरणों का पालन करें |

1. ब्लॉग पर लान-इन करें |
2. लेआउट पर जाएँ |
3. Add a Gadget पर क्लिक करें |
4. HTML/Javascript विजेट का चयन करें |
5. उपरोक्त CSS कोड को पेस्ट करने के बाद सेव बटन पर क्लिक करें |

<style type="text/css">
.container{
 position:relative;
}
.thmmain{
 position:relative;
   max-width:620px;
    margin: 0 auto;
 float:left;
}
.view {
   width: 270px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff;
}
.view .mask,.view .content {
   width: 270px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view-thm img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-thm .mask {
   background-color: rgba(255, 231, 179, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-thm h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-thm p {max-height:40px;
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 5px 20px 20px;
   text-align: center;
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-thm a.info {max-width:125px;font-size:12px;
 display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #FCE7B8;
   color: #000;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-thm:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-thm:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-thm:hover h2,.view-thm:hover p,.view-thm:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
</style>

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

आप भी दिखाएं Neon Light Effect अपने ब्लॉग पर बिना फोटोशाप के

tips hindi meरविवार, दिसंबर 23, 2012 5 comments Blog Tricks,CSS-3

आप भी दिखाएं Neon Light Effect अपने ब्लॉग पर बिना फोटोशाप के

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

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

<p class="neon">Tips Hindi</p>

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

@import url(http://fonts.googleapis.com/css?family=Lobster);
p.neon {
      text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #ff00de,
                   0 0 70px #ff00de,
                   0 0 80px #ff00de,
                   0 0 100px #ff00de,
                   0 0 150px #ff00de;
  font-family: 'Lobster', helvetica, arial;  
       font-size: 200px;
       color:#000;
       background:#000;
       padding:20px;
       text-align:center;
       text-decoration:none;
       border-radius:10px;
height:170px;
padding-top:120px;

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

Tips Hindi

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

Tips Hindi

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

subscribe popup box

tips hindi meशुक्रवार, दिसंबर 21, 2012 7 comments Blog Tricks,CSS-3,Widget

एक पॉपअप बाक्स में पायें तीन सबकराईब आप्शन

जैसा कि इस पोस्ट की टाइटल से जाहिर है कि एक ही पॉपअप बाक्स में पायें तीन सब्क्राईब आप्शन
1. FaceBook Like
2. Google Plus Follower
3. FeedBurner SubScribe

इसे आपने ब्लॉग पर स्थापित करने के लिए आसन से चरणों का पालन करें |
1. अपने ब्लॉग पर लाग-इन करें |
2. लेआउट पर क्लिक करें |
3. Add a Gadget पर क्लिक करें |
4. HTML/JAVASCRIPT विजेट का चयन करें |
5. अब निम्न चित्र अनुसार निम्न कोड में फेस-बुक पर बनाये पेज का नाम अपने ब्लॉग के नाम से व फीड-बर्नर पर बनाई गयी फीड का नाम व गूगलप्लस फालोवर से बदलने के बाद इस कोड को HTML/JAVASCRIPT विजेट में पेस्ट करने के बाद इसे अपने ब्लॉग की साइडबार में स्थापित कर लें | बस ये विजेट आपके ब्लॉग पर स्थापित हो जायेगा |

<!-- FACEBOOK LIKE, GOOGLE PLUS AND FEEDBURNER POPUP BOX FORM: cityjalalabad.blogspot.in -->
<style type="text/css">
* html #thmstylepopupdiv {position:absolute;}
#thmstylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%;margin:0; overflow-y:auto; z-index:9999}
#thmstylepopup {background-color:#fff; overflow:none;}
.thmstylepopup {width:640px; height:500px; position:fixed; top:35%; left:40%; margin-top:-200px; margin-left:-200px; border: 3px solid #2650A9; border-radius:8px;padding: 20px; z-index:9999}
.thmtitle {background:#3B5999;color:#fff;font-size: 12px !important;font-weight:bold;margin:5px 0;border-left:10px solid #6D85B5;border-right:10px solid #6D85B5;padding:5px;line-height:15px; font-family:arial !important; float:left; z-index:9999}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/**/
</style>
<![endif]-->
<div id="thmstylepopupdiv">
<div id="thmstylepopup" class="thmstylepopup">
<h3 class="thmtitle">Never Miss Any Update From Us! <img alt="Like" style="vertical-align:middle" src="http://goo.gl/bX6c0" /></h3><right style="float:right; margin-left:10px;cursor:pointer;margin-top:10px;"><span style="12px; color:#000; text-decoration:none;">+Always Remember</span> 
<a target='_blank' style="font-size:12px; color:#f40; text-decoration:none;margin-right:55px;" href="http://cityjalalabad.blogspot.in/">Tips Hindi Mein </a>
<a style=" font-size:12px; color:#343434; text-decoration:none;" onmouseup="document.getElementById('thmstylepopupdiv').style.display='none'"><img style="float:right;" src="http://1.bp.blogspot.com/-AQR0QDlw3Io/UNNLz9X4UwI/AAAAAAAAAHg/fvH08jIeBZg/s1600/close-button.jpg" width="35"/></right>

<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTipsHindiMein&width=620&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=185" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:650px; height:278px;" allowtransparency="true"></iframe>
</center>
<br/>
<table style="width:640px;margin-top:-30px;">
<tr><td><div style="margin-top:-60px;padding:5px;border:1px solid #eee;">
<a href='http://cityjalalabad.blogspot.com'>
<img alt='Tips Hindi Mein' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>
<div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/103509920493064770128" data-source="blogger:blog:followers" data-width="315">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div>
</td>

<td style="max-width:300px;max-height:170px;">
<a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=CityJalalabad">
<img style="margin-left:10PX;float:left;margin-top:-50px;" src="http://2.bp.blogspot.com/-a0-_dxhUG2A/UMAezRkKnOI/AAAAAAAAFFk/tFyvj4il-WE/s1600/email.png" width="55"/></a>
<h4 style="text-align:center;margin-left:65px;margin-top:-50px;" ><a href="http://feedburner.google.com/fb/a/mailverify?uri=CityJalalabad">Subscribe on Feed Burner :</a></h4>
 <h5 style="text-align:center;font-size:12px;color:#bbb;line-height:17px;margin-left:75px;margin-top:15px;" >Get alerts directly into your inbox after each post and stay updated!</h5>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CityJalalabad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input style="margin-left:102px;" gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />

<br/>
<input style="margin-left:100px;color:#fff;background:#228600;width:155px;border-radius:5px;padding:7px;" class="sub" value="Submit" class="submitbutton" type="submit" />
</form>
<br/>
</td>
</tr>
</table>
<a style="font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;" href="http://cityjalalabad.blogspot.com/2012/12/subscribe-popup-box.html" target="_blank">Get This on : Tips Hindi Mein </a>
</div></div>
<!-- FACEBOOK LIKE, GOOGLE PLUS AND FEEDBURNER POPUP BOX FORM: cityjalalabad.blogspot.in -->

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

Label 1

लाल किताब

recent

शनिवार, नवंबर 23, 2013

रविवार, जनवरी 13, 2013

शनिवार, जनवरी 05, 2013

शनिवार, दिसंबर 29, 2012

बुधवार, दिसंबर 26, 2012

सोमवार, दिसंबर 24, 2012

Happy new year

Happy new year

Happy new year

Happy new year

रविवार, दिसंबर 23, 2012

शुक्रवार, दिसंबर 21, 2012

टिप्स हिंदी में का नया लिंक

कुल पृष्ठ दृश्य

Contact Us

Alexa Rank

my code

All Collections

संपर्क फ़ॉर्म

Followers

label

Popular Posts

Labels

ताजातरीन टिप्पणियाँ

AD Section

अन्य महत्वपूर्ण लिंक

VB Code Link

Feetjit

..

Blog Archive

My Blog List

भारतीय ब्लॉगस का संपूर्ण मंच

http://cityjalalabad.blogspot.com

Text Resizer

एग्रीगेटर

भारतीय भाषाओँ में पढ़ें

कुछ ऐसे विजेट जो आपके ब्लॉग पर भी

लाग इन

अन्य महत्वपूर्ण लिंक

Blog Links