Posts

Showing posts from May, 2015

css3 buttons

By -
 go to this link and see the live example of css buttons  https://jsfiddle.net/csszilla/ssgp6mwr/8/ html code <div class="text_slider">    <span class="outer_round_button">     <span class="round_button">     <p style="color:white";>csszilla</p> </span> </span>       <span class="outer_round_button red_circle">      <span class="round_button">       <p style="color:white";>csszilla</p>       </span>        </span> <span class="outer_round_button green_circle">      <span class="round_button">      <p style="color:white";>csszilla</p>       </span>        </span>   <css code> .outer_round_button{border: 1px solid #5f7a87;     border-radius: 100%;     display: table;     height: 106px;     padding: 5px;     text-align: center;     width: 106px;}     .round_button{  ba
Post a Comment
Read more

parallax scrolling jquery example

By -
Image
Hello Guys Please see this. its a code for parallax scrolling for your website. Just use js and include in your js folder and add this code on your div in which your want parallax effect. "data-parallax="images/parallax-contact.jpg"" SEE DEMO :  https://jsfiddle.net/csszilla/d13doy84/2/embedded/result/
Post a Comment
Read more

simple js Countdown timer

By -
Image
Hello Guys, I have found this simple js based countdown timer made by www.gieson.com. Its free to use.....    Please include these images in your images folder and change the path in js. For example replace "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9sOjj299D43ZxYLyhGxkiOuKXSodJhPvZWPJkC0aJeENPIrWpNU3AmS4l-I_Aw-8qakZ2RRDjfuyer9zsFO4owazjF4M4bt66oRQXrqIGjcu0kkqI4n_TQaNsdauOW6-QyW7Lrj4DOM4/s1600/" to "images/" in js file.
Post a Comment
Read more

Css3 Buttons styles

By -
go to this link and see the live example https://jsfiddle.net/csszilla/ssgp6mwr/5/ <html> <head> <title>csszilla</title> <style> .button {   -moz-border-radius: 25px;   -moz-box-shadow: #6E7849 0px 0px 10px;   -moz-transform: rotate(0deg);   -moz-transition: all 1s ease-in;   -ms-transform: rotate(0deg);   -ms-transition: all 1s ease-in;   -o-transform: rotate(0deg);   -o-transition: all 1s ease-in;   -webkit-border-radius: 25px;   -webkit-box-shadow: #6E7849 0 0 10px;   -webkit-transform: rotate(0deg);   -webkit-transition: all 1s ease-in;   background-color: #6E7849;   background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);   background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);   background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);   background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);   background-image: linear-gradient(90deg, #B9C788, #6E7849);   border-radius: 25px;   border
Post a Comment
Read more

Image Magnify on hover by css and js

By -
Image
Jquery Zoom  See Demo here:--- https://jsfiddle.net/csszilla/kmLyqxx8/embedded/result/
Post a Comment
Read more

CSS3 Resizing

By -
CSS3 Resizing By resizing property we can resize the element   vertically, horizontally and both of them in one. Example:- Open the   link   then you will see the live example of this coding. https://jsfiddle.net/csszilla/ssgp6mwr/4/   <html> <head> <title>csszilla</title> <style> .div1{ background:green; color:white; font-size:18px; resize: horizontal; overflow: auto; width:200px; height:200px; margin-bottom:10px; text-align:center; } .div2{    background:orange; color:white; font-size:18px; resize: vertical; overflow: auto; width:200px; height:200px; margin-bottom:10px; } .div3 {     background:#6666CC; color:white; font-size:18px; resize: both; overflow: auto; width:200px; height:200px; margin-bottom:10px; } </style> </head> <bo
Post a Comment
Read more

CSS3 Multiple Columns

By -
CSS3 Multiple Columns  Properties By column property we can   divided  a element into many column . column-count         by this property we can make many columns of a element column-gap             by this  we add gap between column column-rule-style    this property  use for rule style between column column-rule-width       it for rule width column-rule-color      it’s for rule color column-rule               shorthand property for setting  the column- width, color and style. column-width          this property for increase and  decrease the width of columns of  an element. Example:- Open the link then you will see the live example of this coding. https://jsfiddle.net/csszilla/ssgp6mwr/3/   <html> <head> <title>csszilla</title> <style> div{ background:green; color:white; font-size:18px; -moz-column-count:4; -moz-column-gap:75px; -moz-column-rule-style:solid; -moz-column-rule-color:o
Post a Comment
Read more