Gyancode

A free library of HTML, CSS, JS

Search This Blog

Wednesday 25 January 2017

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>

Tuesday 27 December 2016

Comments in HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Comments in HTML</title>
</head>

<body>

<section id="comments">
<div class="container">
<!--<p>Demo Comments Here</p>-->
</div>
</section><!-- end comments here -->

</body>
</html>

Box Shadow Css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Box Shadow Css</title>
</head>
<style>
.shadow {margin: 40px;background-color: rgb(68,68,68); -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);box-shadow: 5px 5px 5px rgba(68,68,68,0.6);}
.shadow .content {position: relative; padding: 100px;background-color: #DDD;}
.shadow .content h2{ font-size:36px; text-align:center;}
</style>
<body>
<div class="shadow">
<div class="content">
<h2>Box Shadow Demo</h2>
</div>
</div>
</body>
</html>

Text Blur css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Blur css</title>
</head>
<style>
h1{color:#000000; font-size:50px; font-family:arial; text-shadow:   0 0 3px #000000, 3px 0 3px #000000, 0 3px 3px #000000, -3px 0 3px #000000,0 -3px 3px #000000;}
</style>
<body>
<h1>Demo text blur</h1>
</body>
</html>

Tuesday 20 December 2016

Auto Css Counters

<!DOCTYPE html>
<html>
<head>
<title>Auto Css Counters</title>
<style>
body { counter-reset: section;}
h2::before {  counter-increment: section; content: "Count " counter(section) ": ";}
</style>
</head>
<body>

<h1>Test:</h1>
<h2>Demo</h2>
<h2>Check</h2>
</body>
</html>

Images Double Border In css

<html>
<head>
<title>Images Double Border In css</title>
</head>
<style type="text/css">
img {padding:1px;border:1px solid #021a40; background-color:#ff0;}
</style>
<body>
<img src="demo.jpg" alt="demo"/>
</body>
</html>

Thursday 15 December 2016

Using @font-face Online

<link href="https://db.onlinewebfonts.com/c/6e4a9679e65cc320746c3e5d48e51f28?family=Raleway" rel="stylesheet" type="text/css"/>

OR

<style type="text/css"> @import url(https://db.onlinewebfonts.com/c/6e4a9679e65cc320746c3e5d48e51f28?family=Raleway); @font-face {font-family: "Raleway"; src: url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.eot"); src: url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.svg#Raleway") format("svg");} </style>

Centering a Website

<body>
  <div id="container">
    <!-- please insert your code -->
  </div>
</body>
<style type="text/css">
#container { width: 800px; margin: 0 auto;}
</style>