Gyancode

A free library of HTML, CSS, JS

Search This Blog

Wednesday 22 March 2017

How can i add label in Select Option in HTML

You can use this html code in your webpage.


<select class="board-selector">
                <option label="Create a Board">Create a Board</option>
                <option label="View all Boards">View all Boards</option>
                <optgroup label="Recent Boards">
                    <option label="awesome" selected="selected">awesome</option>
                </optgroup>
            </select>

Friday 17 March 2017

Box rotate with css transforms

<div class="original">
  <div class="spin">
    <figure class="box box-1">Box 1</figure>
  </div>
</div>

<div class="original">
  <div class="spin">
    <figure class="box box-2">Box 2</figure>
  </div>
</div>

<style>
body {
  color: #fff;
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 12px 15px;
}
.original,
.box {
  border-radius: 6px;
}
.original {
  background: #eaeaed;
  border: 1px dashed #cecfd5;
  float: left;
  margin: 12px 15px;
}
.box {
  background: #2db34a;
  height: 95px;
  line-height: 95px;
  text-align: center;
  width: 95px;
}
.spin {
  cursor: pointer;
  transform-style: preserve-3d;
}
.spin:hover {
    animation: spin 5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.box-1 {
  transform: rotate(20deg);
}
.box-2 {
  transform: rotate(-55deg);
}

</style>

Why can't I use background image and color together?

If you tring to do is to show both color & image you can use this css body tag


body{ width: 100%; height: 100%;  margin: 0; background: url(../images/bg_new.png) #f6f6f6 repeat right top !important; }

Tuesday 14 March 2017

Print Jquery

If you want print your page 
use this script in web page...


<script type="text/javascript">
window.print();
</script>


Sunday 12 March 2017

Fixed header and footer

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed header and footer</title>
<style type="text/css">
html, body { margin:0; padding:0; font-family: verdana; font-size: 13px;}
html, body {  height:100%;}
#top-bar {position:fixed; top:0px;left:0px;height:50px;width:100%; z-index:999; overflow:hidden;}
#topbar-inner, #footer-inner { background: #03bf95; text-align: center; color: #FFF;font-size: 18px; padding: 9px;}
#footer { position:fixed; bottom:0; width:100%; height:40px; z-index:999;}
.inner { padding:50px 0; position:relative;}
p {  margin:0 0 1em; font-size: 13px;}
#contain-all { width: 60%; margin: 0px auto; padding: 20px;}
</style>
</head>
<body>
<div id="outer">
  <div id="contain-all">
    <div class="inner">
      <p>This is an experimental layout and untested in a real situation but preliminary
        results look good. <strong>Note</strong> that opera 10.6 has introduced a bug where if the page has been scrolled and then refresh is clicked the fixed elements will disappear. </p>
      <p>The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.</p>
      <p>Good browsers get normal fixed positioning but ie6 and under make use of a bug in ie6 where children of elements that have overflow defined behave as though they are fixed.</p>
      <p>some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>Last bit of text</p>
    </div>
  </div>
</div>
<div id="top-bar">
  <div id="topbar-inner">Fixed Top & bottom</div>
</div>
<div id="footer">
  <div id="footer-inner"> Fixed footer </div>
</div>
</body>
</html>

Wednesday 8 March 2017

Animate "height" with CSS Transitions

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animate "height" with CSS Transitions </title>
</head>
<style type="text/css">
body{font-family: verdana; font-size: 14px; text-align: center;}
.accordion {display: inline-block;text-align: left; margin: 1%; width: 70%;}
.accordion:hover .accordion-content { max-height: 300px;}
.accordion-content { -webkit-transition: max-height 1s;  -moz-transition: max-height 1s;  -ms-transition: max-height 1s;  -o-transition: max-height 1s;  transition: max-height 1s;  background: #ffb1b1; overflow: hidden; max-height: 0;}
.accordion-inner {  padding: 0 15px;}
.accordion-toggle { -webkit-transition: background .1s linear; -moz-transition: background .1s linear;  -ms-transition: background .1s linear;  -o-transition: background .1s linear;  transition: background .1s linear;  background:#de0000;
  border-radius: 3px;  color: #fff;  display: block;  font-size: 24px;  margin: 0 0 10px;  padding: 10px; text-align: center;
  text-decoration: none;}
.accordion-toggle:hover {  background:#a20000;}


    </style>

<body>
<div class="accordion">
 
  <a href="#" class="accordion-toggle">Hover for height animate</a>
  <div class="accordion-content">
    <div class="accordion-inner">
      <p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
      <p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
    </div>
  </div>
</div>

</body>
</html>

Vertical align elements of different heights

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vertical align elements of different heights</title>
</head>
<style type="text/css">
* {margin:0;padding:0}
.outer {position:relative;display:table;height: 200px;width: 200px;    vertical-align: middle; text-align: center;    border: 1px solid #CCCCCC;    background:#ddd;    float:left}
.inner {width:100%;    display:table-cell;    vertical-align:bottom;    position:relative;}
p{background:#f6f6f6;border:1px solid #000; font-family: verdana; font-size: 13px;}
    </style>

<body>
<div class="outer">
  <div class="inner">
    <p>This is some random text : </p>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <p>This is some random text : This is some random text : This is some random
      text : </p>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <p>This is some random text : This is some random text : This is some random
      text : This is some random text : This is some random text :</p>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <p>This is some random text : This is some random text : This is some random
      text : This is some random text :</p>
  </div>
</div>

</body>
</html>

Monday 6 March 2017

Page Redirect another Url in 3 Seconds

You can past this code at the top of your page in the <head> section:
content="3" means second

<META http-equiv="refresh" content="3;URL=step2.htm">

Friday 3 March 2017

Table Css with Border and Background

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Border and Background</title>
</head>
<style type="text/css">
        table{}
        table tr{ border: 1px #eee solid;}
        table tr th{ border-bottom: 1px #ccc solid;border-top: 1px #ccc solid; margin: 0px; padding: 5px; border-right: 1px #ccc solid; background: #eee;}
        table tr th:first-child{ border-left:1px #ccc solid;}
        table tr td{ border-bottom: 1px #ccc solid; padding: 5px; margin: 1px; /* border-left: 1px #ccc solid; */ border-right: 1px #ccc solid;}
        table tr td:first-child{ border-left:1px #ccc solid;}
    </style>

<body>
<table width="700" cellpadding="10" cellspacing="0">
            <tr>
                <th>Demo</th>
                <th>Demo</th>
                <th>Demo</th>
                <th>Demo</th>
            </tr>
            <tr>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
            </tr>
            <tr>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
                <td>Test Text</td>
            </tr>
        </table>

</body>
</html>

Width and Spacing Table Create


<html>
    <head>
        <title>Width and Spacing</title>
        <style type="text/css">
            th, td {background-color: #eee;}
        </style>
    </head>
    <body>
        <table width="700" cellpadding="10" cellspacing="5">
            <tr>
                <th width="150"></th>
                <th>Withdrawn</th>
                <th>Credit</th>
                <th width="150">Balance</th>
            </tr>
            <tr>
                <th>January</th>
                <td>250.00</td>
                <td>660.50</td>
                <td>410.50</td>
            </tr>
            <tr>
                <th>February</th>
                <td>135.55</td>
                <td>895.20</td>
                <td>1170.15</td>
            </tr>
        </table>
    </body>
</html>