Gyancode

A free library of HTML, CSS, JS

Search This Blog

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

Saturday 12 November 2016

Right arrow with before after css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Right arrow with before after css</title>
</head>
<style>
.left-box { background: #27aae0; color: #fff; padding: 10px 15px; position: relative; margin: 10px 0px;  border-radius: 9px; width: 440px; float: left;}
.left-box h5 { font-size: 20px; margin:0px;}
.left-box p { font-size: 14px;}
.left-box:after {bottom: 100%; left: 28%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;   border-color: rgba(213,222,227,0); border-width: 11px; margin-left: 21em; border-left-color: #27aae0; top: 20px;}
</style>
<body>
<div class="left-box">
<h5>Is your website shunning your customers away?</h5>
<p> Does your customers on an ecommerce website come and abandon from buying in your website. Do they just leave and buy the same product from a competitor website then for sure you need to relook at your website usability design.</p>
</div>
</body>
</html>