GyanCode

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

<!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>Untitled Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    $('#home').toggleClass('about',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#about').offset().top
    );
    $('#home').toggleClass('product',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#product').offset().top
    );
    $('#home').toggleClass('contact',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#contact').offset().top
    );
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed

</script>
<style>
body{ margin:0px;}
#home{ height:500px; background:#3f9fc9;}
#about{ height:500px; background:#009294;}
#product{ height:500px; background:#ffde00;}
#contact{ height:500px; background:#b619ff;}
</style>
<body>
<header id="home">
</header>
<section id="about">
</section>
<section id="product">
</section>
<section id="contact">
</section>

</body>
</html>

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>

Subscribe to: Posts ( Atom )

Gyancode

A free library of HTML, CSS, JS

Search This Blog