Gyancode

A free library of HTML, CSS, JS

Search This Blog

Thursday 16 February 2017

Centred Widthless floats

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Centred Widthless floats</title>
</head>
<style>
.navcentre {text-align:center;margin:10px auto;display:table;border:1px solid #000;padding: 2px;}
.navcentre ul { list-style:none;margin:0;padding:0;display:inline-block;white-space:nowrap;}
.navcentre ul li{display:inline-block }
.navcentre ul a{display:inline-block;padding: 6px 15px;text-decoration:none;background: #00e0c3;border: 1px solid #000000;color: #fff;font-size: 14px;font-family: verdana;}

.navcentre ul a:hover{background:red;color:#fff}
</style>
<body>
<div class="navcentre">
<ul>
<li><a href="#">Demo Text 1</a></li>
<li><a href="#">Demo Text 2</a></li>
<li><a href="#">Demo Text 3</a></li>
</ul>
</div>

</body>
</html>

Here is a example..




Monday 13 February 2017

CSS Gradient

You can add gradient in your website 

Ultimate CSS Gradient Generator

Just click here..

Border Add Before after CSS

<style type="text/css">
h1:before {content: ""; position: absolute; left: 0; top: 50%;  width: 2px; height: 66px; background: #fff; transform: translateY(-50%);}
h1:after {content: ""; position: absolute; left: 0; top: 50%;  width: 2px; height: 66px; background: #fff; transform: translateY(-50%);}
</style>
<h3>Demo Text here!</h3>

Thursday 9 February 2017

How to select first and last TD in a row?

tr td:first-child{ background:#f6f6f6; border:1px #ccc solid; color:#000;}
tr td:last-child { background:#eeeeee; border:1px #ccc solid; color:#000;}

Wednesday 8 February 2017

Dashed Border Effect

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dashed Border Effect</title>
</head>
<style>
.dashed { float: left; margin: 10% 0%; width: auto;}
.dashed a { background-color: #09c18c;display: block;    border: 2px dashed #000; padding: 30px 10px;  text-decoration: none; color: #fff;font-size: 24px; width: auto; width:250px; text-align:center;}
.dashed a:hover {border:2px dashed #fff;}
</style>
<body>

<div class="dashed"><a href="#">Dashed Border</a></div>

</body>
</html>


Wednesday 1 February 2017

CSS Notebook

<p class="paper">Notebook Paper
<br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sem vel mauris porttitor sit amet adipiscing odio interdum. Nunc non magna sit amet augue rutrum laoreet in in nulla. Nunc et malesuada orci. Sed metus enim, venenatis tincidunt tincidunt a, malesuada nec dolor. Nam volutpat, augue fringilla mattis venenatis, odio ipsum porta sapien, et tincidunt tortor erat quis nulla. Mauris dictum laoreet purus, et gravida magna aliquet quis. Phasellus sollicitudin tortor ut leo fringilla sed scelerisque diam suscipit. Donec non tortor id ante adipiscing tempus vitae et massa. Donec risus nisl, tincidunt quis facilisis blandit, lacinia vestibulum nulla.<br>
</p>​
<style>
html, body { height: 100%; }
body {
    margin: 0;
    padding: 0;
    height: 100%;
/* gradients - second red border, first red border, top white space, blue lines */
    background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-size: 1px, 1px, auto, auto 20px;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}

.paper {
margin: 0;
    display: block;
    font: 10pt Arial, sans-serif;    
    line-height: 20px;
    padding-top: 50px;
    padding-left: 10.5%;
    padding-right: 10.5%;
    text-align: justify;
}
.paper:first-line {
    font: 20pt Arial, sans-serif;
    line-height: 33px;
    vertical-align: baseline;
}
.paper:after {    
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    background: rgba(255,255,255,1);
    top: 40px;
    left: 2%;
    z-index: 10;
    -webkit-box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
    -moz-box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
    box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
}

.paper:focus {
    outline: none;
}
</style>

Wednesday 25 January 2017

Banner Overlay Effect

<style>
#banner { padding: 20px 0; background: url(../images/img.jpg) no-repeat top; background-size: cover; position: relative;  background-position: 50% 30%;    min-height: 500px;}
#contact-page:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.6);}
</style>
<section id="banner">
<h3>Banner Overlay Effect </h3>
</section>

On Mouse hover circle Radius

<style>
body {height: 100%;background-color: #f2f2f2;}
.portfolio-grid {list-style: none;padding: 0;margin: 0 auto;text-align: center;width: 100%;}
.portfolio-grid li {display: inline-block;margin: 5px 5px 5px 5px;vertical-align: top;   width:250px; height:250px;}
.portfolio-grid li.blue a{ background:#0000FF;}
.portfolio-grid li.orange a{ background:#FF6600}
.portfolio-grid li.black a{ background:#333;}
.portfolio-grid li.red a{ background:#FF0000;}
.portfolio-grid li > a{ font-size:36px; color:#fff; text-align:center; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; width:250px; height:250px;}
.portfolio-grid li > a { border: none;outline: none;display: block;position: relative;   transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;   -webkit-transition: all 0.3s ease-in-out;   -o-transition: all 0.3s ease-in-out;}
.portfolio-grid li > a:hover {  border-radius: 50%;  z-index: 9999;  width:250px; height:250px;}
.portfolio-grid li > a h3{ font-size:36px; color:#fff; padding:90px 0 0 0;}
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
</style>
<div id="portfolio">
<ul class="portfolio-grid">
<li class="blue">
<a href="#" class="animated flipInX">
<h3>Blue</h3>
</a>
</li>
<li class="red">
<a href="#" class="animated flipInX">
<h3>Red</h3>
</a>
</li>
<li class="orange">
<a href="#" class="animated flipInX">
<h3>Orange</h3>
</a>
</li>
<li class="black">
<a href="#" class="animated flipInX">
<h3>Black</h3>
</a>
</li>

</ul>

</div>

Monday 9 January 2017

Navigation hover effects

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Navigation hover effects</title>
</head>
<style>

@-webkit-keyframes fill {
  0% {  width: 0%; height: 1px; }
  50% { width: 100%;height: 1px; }
  100% { width: 100%; height: 100%; background: #333; }
}
@-webkit-keyframes circle {
  0% { width: 1px;top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 1px; z-index: -1;    background: #eee; border-radius: 100%;}
  100% { background: #aaa; height: 5000%; width: 5000%; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 0; }
}
body {font-family:Verdana, Arial, Helvetica, sans-serif;padding: 0;margin: 0;}
small {font-size: 12px;color: rgba(0, 0, 0, 0.4);}
h1 {text-align: center;padding: 50px 0;font-weight: 800;margin: 0;letter-spacing: -1px; color: inherit; font-size: 40px;}
h2 {text-align: center;font-size: 30px;margin: 0;font-weight: 300;color: inherit;padding: 50px;}
.center { text-align: center;}
section {height: 100vh;}
nav {width: 80%;margin: 0 auto; background: #fff;padding: 50px 0; border-radius: 130px; border-bottom:2px #6d6a6a solid;}
nav ul {list-style: none;text-align: center;}
nav ul li { display: inline-block;}
nav ul li a { display: block;padding: 15px;text-decoration: none;color: #aaa;font-weight: 800;text-transform: uppercase; margin: 0 10px;}
nav ul li a,nav ul li a:after,nav ul li a:before { transition: all .5s;}
nav ul li a:hover { color: #555;}
nav.stroke ul li a,nav.fill ul li a { position: relative;}
nav.stroke ul li a:after,nav.fill ul li a:after { position: absolute; bottom: 0;left: 0; right: 0; margin: auto; width: 0%; content: '.'; color: transparent; background: #aaa; height: 1px;}
nav.stroke ul li a:hover:after { width: 100%;}
nav.fill ul li a { transition: all 2s;}
nav.fill ul li a:after { text-align: left;content: '.'; margin: 0;  opacity: 0;}
nav.fill ul li a:hover { color: #fff; z-index: 1;}
nav.fill ul li a:hover:after {z-index: -10;animation: fill 1s forwards;-webkit-animation: fill 1s forwards; -moz-animation: fill 1s forwards; opacity: 1;}
nav.circle ul li a {position: relative;overflow: hidden; z-index: 1;}
nav.circle ul li a:after {display: block;position: absolute;margin: 0;top: 0; bottom: 0; left: 0;right: 0; content: '.'; color: transparent; width: 1px;  height: 1px; border-radius: 50%; background: transparent;}
nav.circle ul li a:hover:after { -webkit-animation: circle 1.5s ease-in forwards;}
nav.shift ul li a {position:relative;z-index: 1;}
nav.shift ul li a:hover {color: #91640F;}
nav.shift ul li a:after {display: block;position: absolute; top: 0;left: 0; bottom: 0;right: 0; margin: auto; width: 100%;height: 1px;content: '.'; color: transparent;background: #F1C40F;visibility: none;opacity: 0;z-index: -1;}
nav.shift ul li a:hover:after {opacity: 1;visibility: visible; height: 100%;}

</style>
<body>
<div class="container">

<section style="background: #3498db; color: #fff;">
  <h1>Beautiful navigation hover effects</h1>
  <p class="center">Scroll down to see some effects in action</p>
</section>
<section style="background: #e74c3c; color: #fff;">
  <h2>Underline Stroke</h2>
  <nav class="stroke">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
  </nav>
</section>
<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
  <h2>Underline Fill</h2>
  <nav class="fill">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
  </nav>
</section>
<section style="background: #f1c40f; color: rgba(0, 0, 0, 0.5);">
  <h2>Shift</h2>
  <nav class="shift">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
  </nav>
</section> 
</body>
</html>











Live Demo

Tuesday 3 January 2017

Sticky footer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Sticky footer</title>
</head>
<style>
* { margin: 0;}
html, body { font-family:Verdana, Arial, Helvetica, sans-serif}
.container {min-height: 50%; text-align:center; }
.container:after {content: ""; display: block;}
.container h1{ margin:20% auto;}
.footer, .container:after { height: 45px; }
.footer {background: #333; color:#fff;float: left; width: 100%;}
.footer h4{ text-align:center; font-size:13px; margin:14px 0;}
</style>
<body>
<div class="container">
 
  <h1>Sticky Footer</h1>
    
</div>

<footer class="footer">
  <h4>I'm the Sticky Footer.</h4>
</footer>
</body>
</html>