GyanCode

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

</div>
</section>

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

Centering a Website

<body>
<div id="container">

</div>
</body>
<style type="text/css">
#container { width: 800px; margin: 0 auto;}
</style>

Change Selection Color

/* For Chrome browsers */
::-webkit-selection {
background-color: #FFA;
color: #000;}

/* Works in other */
::selection {
background-color: #FFA;
color: #000;}

Gyancode

A free library of HTML, CSS, JS

Search This Blog