If you want print your page
use this script in web page...
<script type="text/javascript">
window.print();
</script>
use this script in web page...
<script type="text/javascript">
window.print();
</script>
Tuesday 14 March 2017
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>
<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>
<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>
<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">
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>
<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>
<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>
<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>
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>
Subscribe to:
Posts
(
Atom
)