Gyancode

A free library of HTML, CSS, JS

Search This Blog

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>

Change Selection Color

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

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

Tuesday 13 December 2016

CSS Vertical Menu Add Submenu

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS vertical menu add submenu</title>
<style type="text/css">
.navigation { width: 300px; }
.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mainmenu a {
    display: block;
    background-color: #CCC;
    text-decoration: none;
    padding: 10px;
    color: #000;
}
.mainmenu a:hover { background-color: #C5C5C5; }
.mainmenu li:hover .submenu {
    display: block;
    max-height: 500px;
}
.submenu a { background-color: #999; }
.submenu a:hover { background-color: #666; }
.submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}
.mainmenu li:hover .submenu .submenu2 {
    display: block;
    max-height: 500px;
}
.submenu2 a { background-color: #999; }
.submenu2 a:hover { background-color: #666; }
.submenu2 {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}

</style>
</head>
<body>
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a>
          <ul class="submenu2">
            <li><a href="">Tops</a></li>
            <li><a href="">Bottoms</a></li>
            <li><a href="">Footwear</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact us</a></li>
  </ul>
</nav>
</body>
</html>

Monday 28 November 2016

How To Create a border with Before & after css

<!DOCTYPE html>
<html>
<style>
.titlehome {font-size:24px;line-height:24px; text-align:center; padding:7px 15px 10px 15px; color:#000; font-weight:bold; margin-bottom:10px;position: relative;z-index: 1;}
.titlehome span { color: #000; text-align: center; background: #fff; padding: 0 50px;}
.titlehome:before {border-top: 2px solid #f67519;content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0;right: 0;bottom: 0; width: 100%; z-index: -1;}

</style>
<body>
  <div class="titlehome"><span>Border  Design Css with Before & After Css</span></div>
</body>

</html>