css3 buttons

css3 buttons

 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{  background-color: #5f7a87;
    border-radius: 50%;
    display: table-cell;
    height: 96%;
    vertical-align: middle;
    width: 96%;}
   
   
    .outer_round_button.red_circle{border: 1px solid #a7db6d;
    border-radius: 100%;
    display: table;
    height: 106px;
    padding: 5px;
    text-align: center;
    width: 106px;}
    .red_circle .round_button{  background-color: #a7db6d;
    border-radius: 50%;
    display: table-cell;
    height: 96%;
    vertical-align: middle;
    width: 96%;}
   
   
   
    .outer_round_button.green_circle{border: 1px solid #00ada9;
    border-radius: 100%;
    display: table;
    height: 106px;
    padding: 5px;
    text-align: center;
    width: 106px;}
    .green_circle .round_button{  background-color: #00ada9;
    border-radius: 50%;
    display: table-cell;
    height: 96%;
    vertical-align: middle;
    width: 96%;}   
   
    .outer_round_button:hover { padding:0px;}

parallax scrolling jquery example

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/






simple js Countdown timer

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 "http://2.bp.blogspot.com/-Kdcl3Ru-Y48/VVQkpq24n0I/AAAAAAAAANs/nxPoWJvtUvc/s1600/" to "images/" in js file.






























Css3 Buttons styles

Css3  Buttons styles
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: 2px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-size: 4em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #000000 5px 5px 15px;
  transform: rotate(0deg);
  transition: all 1s ease-in;
}

.button:hover {
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  background-color: #bab573;
  color: #ffffff;
  padding: 15px;
  text-shadow: #000000 5px 5px 26px;
  transform: rotate(360deg);
}








.btn1 {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 35px;
  padding: 4px 20px 10px 20px;
  text-decoration: none;
}

.btn1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: -moz-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: -ms-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: -o-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: linear-gradient(to bottom, #3cb0fd, #2019e6);
  text-decoration: none;
}







.btn2 {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius:209px 50px 209px 50px;
  -webkit-box-shadow: 0px 3px 3px #95d6d3;
  -moz-box-shadow: 0px 3px 3px #95d6d3;
  box-shadow: 0px 3px 3px #95d6d3;
  font-family: Arial;
  color: #ffffff;
  font-size: 35px;
  padding: 5px 23px 10px 20px;
  text-decoration: none;
}

.btn2:hover {
  background: #ae41d9;
  background-image: -webkit-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -moz-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -ms-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -o-linear-gradient(top, #ae41d9, #2019e6);
  background-image: linear-gradient(to bottom, #ae41d9, #2019e6);
  text-decoration: none;
}







.btn3 {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 3px #21b8b0;
  -moz-box-shadow: 0px 3px 3px #21b8b0;
  box-shadow: 0px 3px 3px #21b8b0;
  font-family: Arial;
  color: #ffffff;
  font-size: 35px;
  padding: 5px 23px 10px 20px;
  border: dotted #25c759 2px;
  text-decoration: none;
}

.btn3:hover {
  background: #ae41d9;
  background-image: -webkit-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -moz-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -ms-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -o-linear-gradient(top, #ae41d9, #2019e6);
  background-image: linear-gradient(to bottom, #ae41d9, #2019e6);
  text-decoration: none;
}





.btn4 {
  -moz-background-size: 3% 68%;
  -moz-border-radius: 25px;
  -moz-box-shadow: #6E7849 0px 0px 10px;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-background-size: 3% 68%;
  -webkit-border-radius: 25px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transition: all 0.5s ease-in-out;
  background-color: #de355c;
  background-image: -moz-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -ms-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -o-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -webkit-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: linear-gradient(90deg, #d7ad37, #de355c);
  background-size: 3% 68%;
  border-radius: 25px;
  border: 2px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-size: 4em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #2cba8b 5px 5px 15px;
  transition: all 0.5s ease-in-out;
}

.btn4:hover {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  padding: 15px;
  transform: scale(1.1);
}




.button5{
  -moz-background-size: 3% 68%;
  -moz-border-radius: 25px;
  -moz-box-shadow: #6E7849 0px 0px 10px;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-background-size: 3% 68%;
  -webkit-border-radius: 25px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transition: all 0.5s ease-in-out;
  background-color: #de355c;
  background-image: -moz-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -ms-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -o-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -webkit-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: linear-gradient(90deg, #d7ad37, #de355c);
  background-size: 3% 68%;
  border-radius: 25px;
  border: 2px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-size: 4em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #2cba8b 5px 5px 15px;
  transition: all 0.5s ease-in-out;
}

.button5:hover {
  -moz-box-shadow: #c3f218 3px 9px 10px;
  -moz-transform: rotate(-2deg) scale(1.1);
  -ms-transform: rotate(-2deg) scale(1.1);
  -o-transform: rotate(-2deg) scale(1.1);
  -webkit-transform: rotate(-2deg) scale(1.1);
  background-color: #e864cc;
  background-image: -moz-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: -ms-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: -o-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: -webkit-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: linear-gradient(90deg, #d765bb, #e864cc);
  box-shadow: #c3f218 3px 9px 10px;
  padding: 15px;
  text-shadow: #62f335 5px 5px 15px;
  transform: rotate(-2deg) scale(1.1);}

</style>

</head>

<body><H2 style="background-color:ORANGE; color:WHITE; text-align:center;">some css3  styles buttons.</H2>
<span  class="button">CssZilla</span>
<span  class="btn1">CssZilla</span>
<span class="btn2">CssZilla</span>
<span  class="btn3">CssZilla</span>
<span  class="btn4">CssZilla</span>
<span  class="button5">CssZilla</span>
</body>
</html>

CSS3 Resizing

CSS3 Resizing


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.


<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>

<body>
<h1 style="background:#006666; color:white; text-align:center;"> this is the example of  resize horizontaly, verticaly and both.</h1>
<div class="div1">
CssZilla is a best blog to learn about web designing.</div>

<div class="div2">
CssZilla is a best blog to learn about web designing.</div>

<div class="div3">
CssZilla is a best blog to learn about web designing.</div>

</body>
</html>

CSS3 Multiple Columns

CSS3 Multiple Columns


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.


<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:orange;
-moz-column-rule-width:2px;
column-count:4;
column-gap:75px;
column-rule-style:solid;
column-rule-color:green;
column-rule-width:10px;
border: 2px solid black;
}

</style>
</head>

<body>

<div>
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
CssZilla is a best blog to learn about web designing.
</div>
</body>
</html>

Effect on animation duration

Effect on animation duration


effect on animation duration

if you want to do some effect on duration then first  you need to divide your
Element duration in percentage. Then give some effect like color , rotation ,skew,matrix.etc.

Example:-
Got to link below the you will see the live example of coddling below.


<html>
<head>
<title>csszilla</title>

<!--------------------csszilla--------------------->
<style>
.yellow {background-color:yellow; margin-top:100px;
                width:100px;s
                height:50px;
                display:block;
                position:relative;             
                animation-name:move;
                animation-duration:6s;
                animation-iteration-count:4;     
                 animation-iteration-count: infinite;
                 font-size:26px;
               
                }
               
               
                 @keyframes move {
                                0% { background-color:orange; left:0px; top:0px;}           
                                25% { background-color:green; left:100px; top:0px;}
                                50%  { background-color:#0000FF; left:100px; top:100px;}
                                75%  { background-color:#0000FF; left:0px; top:100px;}
                                100% { left:0px; top:0px; background-color:#993300;}
                 }
                 
                 
                 .green {background-color:green; margin-top:100px;
                width:100px;
                height:50px;
                display:block;
                position:relative;             
                animation-name:move;
                animation-duration:6s;
                animation-iteration-count:4;     
                 animation-iteration-count: infinite;
                 animation-direction: reverse;
                 animation-timing-function: ease;
                  font-size:26px;
                 
               
                }


</style>
</head>
<body>
<h2>css3 animation method</h2>
<div class="yellow">CSSZilla</div>
<div class="green">CSSZilla</div>
<div class="rotation"> helo</div>


</body>
</html>