GyanCode: 2016

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">

</div>
</section>

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

Centering a Website

<body>
<div id="container">

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

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

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>

Project Counter

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project Counter</title>
</head>
<style>
.count{ display: inline-block; margin:10px 0; width:100%;}
.count .single{width: 20%;float: left;padding: 4% 3% 2% 3%;margin: 2.5%;height: 230px;border: 5px #FFFFFF solid;border-radius: 50%;text-align: center;}
.count .single .counter {font-size: 48px;color: #FFFFFF;display: inline-block;font-weight: bold;text-align: center;}
.count .single span{ font-size:30px; color:#FFFFFF;}
.count .single h3{color:#FFFFFF;line-height: 24px; font-size:18px; font-weight:bold;}
.count .counter > span {margin-bottom: 0;}
.circle {background: #2980b9;width: 200px;line-height: 200px;display: inline-block;color: #fff; border-radius: 100%;}
</style>
<body>
<div class="count">
<div class="single" style="background-color:#833292;"><div class="counter">80</div><span>%</span><h3>Repeat Customers</h3></div>
<div class="single" style="background-color:#f8622f;"><div class="counter">350</div><span>+</span><h3>E-Commerce Portals</h3></div>
<div class="single" style="background-color:#0674a5;"><div class="counter">2000</div><span>+</span><h3>Website Projects</h3></div>
<div class="single" style="background-color:#dc2889;"><div class="counter">13</div><span>+</span><h3>Years of Experience</h3></div>
</div>
</body>
</html>

News Ticker Vertical

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>News Ticker Vertical</title>
</head>
<style>
.newstape {color: #999999; height: 419px; overflow: hidden;}
.newstape .newstape-content {position: relative;}
.newstape .newstape-content .news-block{ margin-bottom:20px;}
.newstape .newstape-content .news-block .test{ color:#999999; font-size:16px; font-family:Calibri; margin:0px;}
.newstape .newstape-content .news-block .name{ color:#f83e4e; text-align:left; margin:0px;}

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.newstape').newstape();
});
</script>

<body>
<div class="newstape">
<div class="newstape-content">
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
</div>
</div>
</body>
</html>

Thursday, 13 October 2016

Full width & height banner in any screen

<style>
#header #parallax_bg{width: 100%;height: 100vh;overflow: hidden;}
#header #parallax_bg img{ max-width:350%; text-align:center;    height: auto;}
#header {padding-top: 0px;padding-bottom: 0px; text-align: center;color: #f8f8f8;}
#header .banner{ width:80%; display:inline-block;position: relative;}
#header .banner .logo{text-align: center;margin: 0px 0 50px; }
#header .banner .top-show{margin-top: -57%; margin-right: auto;margin-left: auto; text-align: center; margin-bottom: 0; top: 20%; position: absolute;left: 0; right: 0;}
</style>

<div id="header">
<div id="parallax_bg"><img src="images/banner.jpg"></div>
    <div class="banner">
      <div class="top-show">
        <div class="logo"><a href=""><img src="images/logo.png"></a></div>
      </div>
    </div>
</div>

Saturday, 8 October 2016

Mobile Frame create in Html with css


	<!DOCTYPE html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Mobile App Demo</title>
	</head>

	<body>


	<div class="third-frame">
	<div class="second-frame">
	<div class="frame-scroll-correction"></div>
	<iframe class="main-frame" src="home.html"></iframe>
	</div>
	</div>



	<style>

	*{
	margin:0px;
	padding:0px;
	border:0px;
	}

	body{
	background-color:#ececec;
	}

	.main-frame{
	background-color:#000000;
	margin-left:auto;
	margin-right:auto;
	display:block;
	position:relative;
	z-index:1;
	width: 340px;
	height: 550px;
	}

	.second-frame{
	height:100%;
	width: 340px;
	border:solid 20px #000;
	border-radius:40px;
	border-bottom:solid 80px #000;
	border-top:solid 60px #000;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:2;
	}

	.third-frame{
	height:100%;
	background-color:#ccc;
	padding:5px;
	width: 380px;
	border-radius:45px;
	margin-left:auto;
	margin-right:auto;
	margin-top:80px;
	}

	.frame-scroll-correction{
	position:absolute;
	height:100%;
	width:22px;
	background-color:#000;
	z-index:99;
	right:-20px;
	}

	.resolution-selecter-deploy em{
	float:right;
	padding-right:20px;
	font-size:19px;
	font-style:normal;
	}



	</style>

	</body>
	</html> Check the Example

Thursday, 15 September 2016

Mega menu for mobile off-canvas

Jquery Show Less and More Content

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Jquery Show Less and More Content</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(function() {
var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)";
$('.show').each(function() {
var content = $(this).text();
if (content.length > showTotalChar) {
var con = content.substr(0, showTotalChar);
var hcon = content.substr(showTotalChar, content.length - showTotalChar);
var txt= con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>  <a href="" class="showmoretxt">' + showChar + '</a></span>';
$(this).html(txt);
}
});
$(".showmoretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showChar);
} else {
$(this).addClass("sample");
$(this).text(hideChar);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>

<style>
.body{padding:0; margin:0;}
.main_ctnt {
    border: 1px solid #000000;
    margin: 100px;
    padding: 15px;
    width: 650px;
}
.show {
    font:normal 15px arial;
    text-align: justify;
    padding: 15px 0 0 0;
}
.morectnt span {
display: none;
}
.showmoretxt {
    font: bold 15px tahoma;
    text-decoration: none;
}
</style>

    </head>
    <body>
    <div class="main_ctnt">
<div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta.</div>
</div>

    </body>
</html>

Radio button css

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>awesome bootstrap checkbox demo</title>
	<link rel="stylesheet" href="bootstrap.css"/>
	<link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/>
	<style> .radio label {display: inline-block;position: relative; padding-left: 5px; } .radio label::before {content: "";position: absolute; width: 17px;height: 17px;left: 0; margin-left: -20px;border: 1px solid #cccccc; border-radius: 50%; background-color: #fff;} .radio label::after {display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #009C71; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } .radio input[type="radio"] { opacity: 0; z-index: 1; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio.radio-inline { margin-top: 0; }	</style>
	</head>
	<body>


	<div class="radio radio-info radio-inline">
	<input type="radio" id="test" value="option1" name="radioInline" checked>
	<label for="test"> Checked </label>
	</div>
	<div class="radio radio-inline">
	<input type="radio" id="test2" value="option2" name="radioInline">
	<label for="test2"> Test </label>
	</div>
	</body>
	</html>

Clip Image

Friday, 5 August 2016

Less & show button in jquery with toggle

Saturday, 23 July 2016

right side scroller color change

css here......

.mousescroll::-webkit-scrollbar {

width: 7px;

}

.mousescroll::-webkit-scrollbar-track {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

.mousescroll::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

div#chatlist {

width: 50px;

height: 140px;

}

div.mousescroll {

overflow: hidden;

}

div.mousescroll:hover {

overflow-y: scroll;

}

html demo

<div id="chatlist" class="mousescroll">

<ul>

<li>item</li>

</ul>

Friday, 24 June 2016

Sticky Navigation

Add Class When Page Scroll Reach At Specific ID

Tuesday, 24 May 2016

On Mousehover Div rotate

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $(".card").hover(function() {
   $(this).addClass("flipped");
}, function() {
    $(this).removeClass("flipped");
});
});
</script>
<style>
.flip {
    -webkit-perspective: 800;
    perspective: 800;
    width: 99%;
    height: 370px;
    position: relative;
    margin: 0 0 20px auto;
    display: inline-block;
    white-space: normal;
}

.flip .card {
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip .card.flipped {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
}

.flip .card .front {
    position: absolute;
    z-index: 1;
    background: #f9f9f9;
    border: solid 1px #ccc;
    border-radius: 2px;
    color: transparent;
    cursor: pointer;
    padding: 38px 23px;
    display: block;
}
.card img.home_icon {
    max-width: 160px;
    margin: 0 auto 20px;
    width: 100%;
    margin-top: 36px;
    max-height: 200px;
}
.whatwedo_home a {
    color: #333;
}
.flip .card .front h2 {
    padding: 10px;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    text-align: center;
    letter-spacing: 0px;
    text-decoration: none;
}

.flip .card .back {
    -webkit-transform: rotatex(-180deg);
    -ms-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
    background: #29BBEA;
    cursor: pointer;
    padding: 30px 10px;
}
.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    z-index: 2;
}

.flip .card .back h2 {
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0px;
    font-family: 'Open Sans', sans-serif;
}

.flip .card .back ul {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    padding-left: 0;
    list-style: none;
}
.flip .card .back ul li {
    padding: 6px 0;
    text-align: center;
    margin: 0px;
}
.flip .card .back ul a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.flip .card .back ul a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

.flip .card .back ul a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
}
.flip .card .back ul a::after, .flip .card .back ul a::before {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform .3s,opacity .2s;
    -o-transition: -o-transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s;
}
</style>
</head>
<body>
<div class="flip">
          <div class="card"> <a href="https://akshaysyal.wordpress.com/" class="face front"> <img src="http://logopals.com/img/design1.png" data-lazy-type="image" data-lazy-src="/media/2015/06/atomix_brain.png" alt="" class="lazy img-responsive home_icon" style="">

            <h2>WE DESIGN</h2>
            </a>
            <div class="face back">
              <h2>WE DESIGN</h2>
              <ul>
                <li><a href="">Responsive Website </a></li>
                <li><a href="">Website Maintenance</a></li>
                <li><a href="">Small Business Website  </a></li>
                <li><a href="">Newsletter Design</a></li>
    <li><a href="">Photographer Website</a></li>
               <li><a href="">Real Estate Website </a></li>
               <li><a href="">Landing Page Design</a></li>
              </ul>
            </div>
          </div>
        </div>

</body>
</html>

Thursday, 10 March 2016

A Larger Image OnClick With JavaScript With Thumbnails On Same Page

<!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=iso-8859-1"/>
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
            function showImage(imgName) {
                var curImage = document.getElementById('currentImg');
                var thePath = 'images/';
                var theSource = thePath + imgName;

                curImage.src = theSource;
                curImage.alt = imgName;
                curImage.title = imgName;
            }
        </script>
<style type="text/css">
#mainContainer, #footerArea {
    clear: both;
    width: 700px;
    margin: 10px;
}
#leftNav {
    float: left;
    width: 150px;
    margin-right: 15px;
    border-right: 1px solid #000;
    text-align: center;
}
#rightDisplay {
    float: right;
    width: 530px;
    margin: 0;
    text-align: center;
}
img {
    margin: 10px 0 10px 0;
}
</style>
</head>
<body>


<div id="leftNav"> <img src="images/bridget_moynahan_00_tn.jpg" onclick="showImage('bridget_moynahan_00.jpg');"/> <br/>
    <img src="images/bridget_moynahan_01_tn.jpg" onclick="showImage('bridget_moynahan_01.jpg');"/> <br/>
    <img src="images/bridget_moynahan_02_tn.jpg" onclick="showImage('bridget_moynahan_02.jpg');"/> <br/>
    <img src="images/bridget_moynahan_03_tn.jpg" onclick="showImage('bridget_moynahan_03.jpg');"/> <br/>
    <img src="images/bridget_moynahan_04_tn.jpg" onclick="showImage('bridget_moynahan_04.jpg');"/> <br/>
    <img src="images/bridget_moynahan_05_tn.jpg" onclick="showImage('bridget_moynahan_05.jpg');"/> </div>
<div id="rightDisplay"> <img id="currentImg" src="images/bridget_moynahan_00.jpg"/> </div>

</body>
</html>

Tuesday, 8 March 2016

Show Hide

HTML

<a href="#" onclick="showHideDiv('div-1')">Awards</a>
<a href="#" onclick="showHideDiv('div-2')">Awards</a>
<a href="#" onclick="showHideDiv('div-3')">Awards</a>
<a href="#" onclick="showHideDiv('div-4')">Awards</a>
<a href="#" onclick="showHideDiv('div-5')">Awards</a>

<div id="div-1" style="display:none; position:absolute; bottom:25px;">
<div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>

<div id="div-2" style="display:none; position:absolute; bottom:25px;">
<div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>

<div id="div-3" style="display:none; position:absolute; bottom:25px;">
<div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>

JAVA SCRIPT

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
function showHideDiv(id){
var obj = document.getElementById(id);
if (obj.style.display=="none"){
obj.style.display='block';
} else if(obj.style.display=="block"){
obj.style.display='none';
}
}
</script>

Monday, 7 March 2016

All media query for all screen version

bootstrap media query use in simple style

@media (max-width: 1224px) {}

@media (max-width: 1024px) {}

@media (max-width: 768px) {}

@media (max-width: 640px) {}

@media (max-width: 420px) {}

@media (max-width: 320px) {}

@media (max-width: 220px) {}

Reply Button like facebook

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<div class='cmt'>

<div class='cmttext'></div>

<button class='replybtn'>replybtn</button>

<div class='replyform'></div>

</div>

<div class='cmt'>

<div class='cmttext'></div>

<button class='replybtn'>replybtn</button>

<div class='replyform'></div>

</div>

<div class='cmt'>

<div class='cmttext'></div>

<button class='replybtn'>replybtn</button>

<div class='replyform'></div>

</div>

<script type="text/javascript">

var varHtml = "<form method='post' ..... ><textarea name='reply' ></textarea> <input type='submit' /> </form>";

var allElements = document.body.getElementsByClassName("replybtn");

var addCommentField = function() {

for (var i = 0; allElements.length > i; i++) {

if (allElements[i] === this) {

console.log("this " + i);

if (document.getElementsByClassName("replyform")[i].innerHTML.length === 0) {

document.getElementsByClassName("replyform")[i].innerHTML = varHtml;

}

};

for (var i = 0; i < allElements.length; i++) {

allElements[i].addEventListener('click', addCommentField, false);

}

</script>

</body>

</html>

Tuesday, 1 March 2016

Scrollbar css add

css here......

.mousescroll::-webkit-scrollbar {

width: 7px;

}

.mousescroll::-webkit-scrollbar-track {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

.mousescroll::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

div#chatlist {

width: 50px;

height: 140px;

}

div.mousescroll {

overflow: hidden;

}

div.mousescroll:hover {

overflow-y: scroll;

}

html demo

<ul>

</ul>

Thursday, 25 February 2016

All Source Disable in Web page

document.onkeypress = function (event) {

event = (event || window.event);

if (event.keyCode == 123) {

return false;

}

document.onmousedown = function (event) {

event = (event || window.event);

if (event.keyCode == 123) {

return false;

}

document.onkeydown = function (event) {

event = (event || window.event);

if (event.keyCode == 123) {

return false;

}

</script>

/*function check(e)

{

alert(e.keyCode);

}*/

document.onkeydown = function(e) {

if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117)) {//Alt+c, Alt+v will also be disabledsadly.

alert('not allowed');

}

return false;

};

</script>

Subscribe to: Posts ( Atom )

Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday, 27 December 2016

Tuesday, 20 December 2016

Thursday, 15 December 2016

OR

Tuesday, 13 December 2016

Monday, 28 November 2016

Saturday, 19 November 2016

Wednesday, 16 November 2016

Saturday, 12 November 2016

Thursday, 13 October 2016

Saturday, 8 October 2016

Thursday, 15 September 2016

Friday, 5 August 2016

Saturday, 23 July 2016

Friday, 24 June 2016

Tuesday, 24 May 2016

Thursday, 10 March 2016

Tuesday, 8 March 2016

Monday, 7 March 2016

Tuesday, 1 March 2016

Thursday, 25 February 2016