GyanCode

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>

Footer Always on the bottom in web page

<!DOCTYPE html>
<html>
<style>
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
</style>
<body>
<h1>Footer Always on the bottom in web page</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<footer>Footer Always on the bottom in web page, but <strong>not fixed</strong>.</footer>
</body>

</html>

Style a Select Box

<!DOCTYPE html>
<html>
<style>
select {
border: 1px #ddd solid;
color: #333;
background: #f6f6f6;
font-weight: bold;
width: 300px;
-webkit-appearance: none;
font-size: 14px;
padding: 10px;
border-radius: 5px;
}
</style>
<body>
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</body>

</html>

Odd Even Css

<style type="text/css">
ul li{padding:10px 30px;}
ul li:nth-child(even) {background: #CCC}
ul li:nth-child(odd) {background: #FFF}
</style>

<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</body>

Saturday 19 November 2016

Css Only for Mozilla Browser

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css Only for Mozilla Browser</title>
<style type="text/css">
h1{ color:#00F3FF;}
@-moz-document url-prefix() {
h1 { color: red; }
}
</style>
</head>

<body>
<h1>Demo Test Demo Test</h1>
</body>
</html>

Using @import css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
@import url("style.css");
</style>

</head>

<body>
</body>

</html>

Bootstrap Multiselect

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Multiselect</title>
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#multi').multiselect({
includeSelectAllOption: true
});

});
</script>
<select id="multi" multiple="multiple">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Orange</option>
</select>
</body>
</html>

Wednesday 16 November 2016

Quick Responsive Photo Gallery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<title>Quick photo Gallery</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="modernizr.js"></script>
</head>
<body>

<div class="provider_content shadow margin">
<div class="m-p-g">
<h3 class="title">Photos</h3>
<div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
<div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
<div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
<div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
<div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
<div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
<div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
</div>
<div class="m-p-g__fullscreen"></div>
</div>

</div>
<script src="jquery.poptrox.min.js"></script>
<script>
var elem = document.querySelector('.m-p-g');
document.addEventListener('DOMContentLoaded', function() {
var gallery = new MaterialPhotoGallery(elem);
});
</script>
</body>
</html>
DONWLOAD

CSS Gradient

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Gyancode

A free library of HTML, CSS, JS

Search This Blog