GyanCode: 2017

Tuesday 11 April 2017

Tooltip with bootstrap

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tooltip with bootstrap</title>
</head>
<script type="text/javascript">
$('a').tooltip();
</script>
<body>
<div class="navbar tooltip-demo">
<ul class="nav">
<li><a class="top" title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a></li>
<li><a class="right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a></li>
<li><a class="bottom" title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a class="left" title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>
</body>
</html>

Monday 10 April 2017

Text-shadow not showing

I want to apply text-shadow property on a heading text but it is not showing

<style rel="Stylesheet" type="text/css" >
.shadow {
color: black;
font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #fe4902,
2px 2px #fe4902,
3px 3px #fe4902;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
}
.shadow:hover {
position: relative;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
text-shadow: 5px 0px 2px rgba(150, 150, 150, 1);
}
</style>

HTML :

<h1 class='shadow'>Reseller welcome</h1>

Wednesday 5 April 2017

CSS !important not working

I have the following code and for some reason the !important qualifier isn't working.

<div style="font-family : calibri; font-size: 20pt !important;">
<ul>
<li>
<span style="font-size: 11px;">
<span style="font-size: 11px;">
Honey Glazed Applewood Smoked Spiral Ham
</span>
<span style="font-size: 11px;">
Served with Dijon Honey Mustard and Turkey Roulade
</span>
</span>
</li>
</ul>
</div>

Give the <div> an id and then add this rule to your CSS stylesheet (or in a <style> tag if you don't want to change the style sheet):

#your_div_id span {font-family : calibri; font-size: 24px !important;}

!important in CSS allows the author to override inline styles (since they have a higher precedence than style sheet styles normally). It doesn't automatically make the style marked !important override everything else.

Tuesday 4 April 2017

Some Reason CSS not working

This problem is making me feel like an absolute noob.

Here is the head of my .html file:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="http://fakedomain.com/smilemachine/html.css" rel="stylesheet"/>
<title>Some Reason CSS not working</title>

</head>

And my html.css file is indeed where it should be. But I'm getting absolutely no styling whatsoever. Help!

And please don't down vote just because the answer is obvious and I can't see it.

1. Maybe CSS not available in folder
2. Maybe Path issue
3. Maybe you can't attach the CSS
4. Maybe css name

You can check all issue your design as working fine.

Okay, so now I'm just trying to fix the problem locally on my machine. Here is the head:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>(Note: Use like this)
<title></title>

</head>

Thanks...

Friday 31 March 2017

CSS Font Sizes

In this tip, you will learn how to specify a font’s size with CSS.

Being a practical nerd, I will not waste time talking about all the various methods for declaring font sizes with CSS … instead I will concentrate on the two widely used ways and then briefly explain the differences. First, the two main methods:

By pixel

By em

What is the difference between and EM and a pixel?

Pixels are an absolute measure of a font’s size and an EM is a relative measure – that means the actual pixel size of the font (as they appear on screen) set with EM’s, can fluctuate. This makes using EM’s trickier. So the nerd answer is NOT to use EMs!

Let’s look at a quick EM example anyway:

<div style="font-size:1.2em">
So the above would cause the fonts to be about 20% larger than the baseline font size – thus 1.2em. I am not going to go into all the nerd details about EM’s because I think pixels are the way to go.

Thursday 30 March 2017

Height:100vh doesn't work correctly with content in the div

<!DOCTYPE html>

<head>

<title>Height:100vh doesn't work correctly with content in the div</title>

</head>

.intro { color: #fff;height: 100vh; background: url('yourimage.jpg') no-repeat center center; background-size: cover; position: absolute;bottom: 2em; }

p.hello {margin: 30px; }

.page1 {color: #fff; height: 100vh; background: beige; }

.page2 {color: #fff; height: 100vh; background: black; }

</style>

<body>

Intro text is coming soon!

</p>

<p>

Buttons coming here.

</p>

</div>

<p>Tekst test</p>

</div>

<p>Tekst test.</p>

</div>

</body>

</html>

Wednesday 29 March 2017

Height for Full Screen Div?

I have a DIV element that needs to fill the entire screen until the user scrolls and reveals the content. So essentially remain at the viewports height.

Here is what I did and it works, but it’s only compatible with newer browsers.

.section-full {
height:100vh;
min-height:100vh;

}

Tuesday 28 March 2017

Changing the Font to All Caps with CSS

While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool.

Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:

h1 {
text-transform: uppercase;
}

With this, everything that has the h1 tag applied, WILL APPEAR IN ALL CAPS.

Another interesting text-transformation property is "capitalize"

h1 {text-transform: capitalize;}

With This, All Your Words Will Begin With A Capital Letter!

The 3 ways to insert CSS into your web pages

1. With an external file that you link to in your web page:

2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:

<head>
   <style type="text/css">
      p { padding-bottom: 12px; }
   </style>
</head>

3. By inserting the CSS code right on the tag itself:

<p style="padding-bottom:12px;">Your Text</p>

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>

Tuesday 28 February 2017

Word Wrap with Css

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.wrap{ width: 400px;border: 1px solid #ccc;background:#f6f6f6;word-wrap: break-word;float:left; margin:0px auto; padding:15px; font-size:16px; font-family:Verdana;}
</style>
</head>
<body>
<span class="wrap"> Lorem Ipsum is simply dummynospacetextcontentyoucancheckdummynospacetextcontentyoucancheckdummynospacetextcontentyoucancheck text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</span>

</body>
</html>

Thursday 23 February 2017

Border Design Css 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;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.titlehome span {
color: #000;
text-align: center;
background: #fff;
padding: 0 50px;
}

.titlehome:before {
border-top: 1px solid #f67519;
content: "";
margin: 0 auto;
position: absolute;
top: 3%;
left: 0;
right: 0;
bottom: 0;
width: 150px;
z-index: -1;
}
.titlehome:after {
border-top: 1px solid #f67519;
content: "";
margin: 0 auto;
position: absolute;
top: 90%;
left: 0;
right: 0;
bottom: 0;
width: 150px;
z-index: -1;
}
</style>
<body>
<div class="titlehome"><span>Border Design Css with Before & After Css</span></div>
</body>

</html>

How to make blinking/flashig text with css3 and jquery

<section id="msg-blink" class="blink_me">This Will Blink</section>

you can use css3 or jquery both style are working
<style text="text/css">
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }

}
</style>
<script type="text/javascript">

function blinker() {
$('.blink_me').fadeOut(500);
$('.blink_me').fadeIn(500);
}

setInterval(blinker, 1000);
</script>

Thursday 16 February 2017

Centred Widthless floats

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Centred Widthless floats</title>
</head>
<style>
.navcentre {text-align:center;margin:10px auto;display:table;border:1px solid #000;padding: 2px;}
.navcentre ul { list-style:none;margin:0;padding:0;display:inline-block;white-space:nowrap;}
.navcentre ul li{display:inline-block }
.navcentre ul a{display:inline-block;padding: 6px 15px;text-decoration:none;background: #00e0c3;border: 1px solid #000000;color: #fff;font-size: 14px;font-family: verdana;}

.navcentre ul a:hover{background:red;color:#fff}
</style>
<body>
<div class="navcentre">
<ul>
<li><a href="#">Demo Text 1</a></li>
<li><a href="#">Demo Text 2</a></li>
<li><a href="#">Demo Text 3</a></li>
</ul>
</div>

</body>
</html>

Here is a example..

Monday 13 February 2017

CSS Gradient

You can add gradient in your website

Ultimate CSS Gradient Generator

Just click here..

Border Add Before after CSS

<style type="text/css">
h1:before {content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 66px; background: #fff; transform: translateY(-50%);}
h1:after {content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 66px; background: #fff; transform: translateY(-50%);}
</style>
<h3>Demo Text here!</h3>

Thursday 9 February 2017

How to select first and last TD in a row?

tr td:first-child{ background:#f6f6f6; border:1px #ccc solid; color:#000;}
tr td:last-child { background:#eeeeee; border:1px #ccc solid; color:#000;}

Wednesday 8 February 2017

Dashed Border Effect

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dashed Border Effect</title>
</head>
<style>
.dashed { float: left; margin: 10% 0%; width: auto;}
.dashed a { background-color: #09c18c;display: block; border: 2px dashed #000; padding: 30px 10px; text-decoration: none; color: #fff;font-size: 24px; width: auto; width:250px; text-align:center;}
.dashed a:hover {border:2px dashed #fff;}
</style>
<body>

<div class="dashed"><a href="#">Dashed Border</a></div>

</body>
</html>

Wednesday 1 February 2017

CSS Notebook

<p class="paper">Notebook Paper
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sem vel mauris porttitor sit amet adipiscing odio interdum. Nunc non magna sit amet augue rutrum laoreet in in nulla. Nunc et malesuada orci. Sed metus enim, venenatis tincidunt tincidunt a, malesuada nec dolor. Nam volutpat, augue fringilla mattis venenatis, odio ipsum porta sapien, et tincidunt tortor erat quis nulla. Mauris dictum laoreet purus, et gravida magna aliquet quis. Phasellus sollicitudin tortor ut leo fringilla sed scelerisque diam suscipit. Donec non tortor id ante adipiscing tempus vitae et massa. Donec risus nisl, tincidunt quis facilisis blandit, lacinia vestibulum nulla.<br>
</p>
<style>
html, body { height: 100%; }
body {
margin: 0;
padding: 0;
height: 100%;
/* gradients - second red border, first red border, top white space, blue lines */
background-image: -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-size: 1px, 1px, auto, auto 20px;
background-repeat: repeat-y, repeat-y, no-repeat, repeat;
background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}

.paper {
margin: 0;
display: block;
font: 10pt Arial, sans-serif;
line-height: 20px;
padding-top: 50px;
padding-left: 10.5%;
padding-right: 10.5%;
text-align: justify;
}
.paper:first-line {
font: 20pt Arial, sans-serif;
line-height: 33px;
vertical-align: baseline;
}
.paper:after {
content: '';
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
background: rgba(255,255,255,1);
top: 40px;
left: 2%;
z-index: 10;
-webkit-box-shadow:
inset 2px 2px 5px rgba(125,125,125,1),
2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),
2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
-moz-box-shadow:
inset 2px 2px 5px rgba(125,125,125,1),
2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),
2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
box-shadow:
inset 2px 2px 5px rgba(125,125,125,1),
2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),
2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
}

.paper:focus {
outline: none;
}
</style>

Wednesday 25 January 2017

Banner Overlay Effect

<style>
#banner { padding: 20px 0; background: url(../images/img.jpg) no-repeat top; background-size: cover; position: relative; background-position: 50% 30%; min-height: 500px;}
#contact-page:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.6);}
</style>
<section id="banner">
<h3>Banner Overlay Effect </h3>
</section>

On Mouse hover circle Radius

<style>
body {height: 100%;background-color: #f2f2f2;}
.portfolio-grid {list-style: none;padding: 0;margin: 0 auto;text-align: center;width: 100%;}
.portfolio-grid li {display: inline-block;margin: 5px 5px 5px 5px;vertical-align: top; width:250px; height:250px;}
.portfolio-grid li.blue a{ background:#0000FF;}
.portfolio-grid li.orange a{ background:#FF6600}
.portfolio-grid li.black a{ background:#333;}
.portfolio-grid li.red a{ background:#FF0000;}
.portfolio-grid li > a{ font-size:36px; color:#fff; text-align:center; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; width:250px; height:250px;}
.portfolio-grid li > a { border: none;outline: none;display: block;position: relative; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;}
.portfolio-grid li > a:hover { border-radius: 50%; z-index: 9999; width:250px; height:250px;}
.portfolio-grid li > a h3{ font-size:36px; color:#fff; padding:90px 0 0 0;}
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}

70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}

100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}

70% {
-moz-transform: perspective(400px) rotateX(10deg);
}

100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-o-transform: perspective(400px) rotateX(-10deg);
}

70% {
-o-transform: perspective(400px) rotateX(10deg);
}

100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
transform: perspective(400px) rotateX(-10deg);
}

70% {
transform: perspective(400px) rotateX(10deg);
}

100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}

.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
</style>
<div id="portfolio">
<ul class="portfolio-grid">
<li class="blue">
<a href="#" class="animated flipInX">
<h3>Blue</h3>
</a>
</li>
<li class="red">
<a href="#" class="animated flipInX">
<h3>Red</h3>
</a>
</li>
<li class="orange">
<a href="#" class="animated flipInX">
<h3>Orange</h3>
</a>
</li>
<li class="black">
<a href="#" class="animated flipInX">
<h3>Black</h3>
</a>
</li>

</ul>

</div>

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>

Subscribe to: Posts ( Atom )

Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 11 April 2017

Monday 10 April 2017

I want to apply text-shadow property on a heading text but it is not showing

Wednesday 5 April 2017

Tuesday 4 April 2017

Friday 31 March 2017

By pixel

By em

Thursday 30 March 2017

Wednesday 29 March 2017

Tuesday 28 March 2017

1. With an external file that you link to in your web page:

2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:

3. By inserting the CSS code right on the tag itself:

Wednesday 22 March 2017

You can use this html code in your webpage.

Friday 17 March 2017

Tuesday 14 March 2017

Sunday 12 March 2017

Wednesday 8 March 2017

Monday 6 March 2017

Friday 3 March 2017

Tuesday 28 February 2017

Thursday 23 February 2017

Thursday 16 February 2017

Monday 13 February 2017

Ultimate CSS Gradient Generator

Thursday 9 February 2017

Wednesday 8 February 2017

Wednesday 1 February 2017

Wednesday 25 January 2017

Monday 9 January 2017

Tuesday 3 January 2017