Responsive Website Design: March 2015

Friday 27 March 2015

Responsive Website template

Code of abv template

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Website template</title>
<style>
body{

}
/*----------------------------------------------------Top Fixed header------------------------------------------------------------*/
.banneroo {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #e3cb4b;
background: #333;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
opacity: 0.94;
}

.banneroo h1 {
/*    line-height: 60px;*/
text-align:center;
color:#000000;
text-shadow: 1px 1px 1px #ccc;
}

.go{
width:200px;
height:100px;
background:#999999;
margin:auto;
box-shadow: 3px 3px 10px 5px #000;
}
/*-------------------------------------------------------Main container----------------------------------------------------------*/

.boxo1 {
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 14px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

.boxo1:before, .boxo:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.boxo1:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.boxo {
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

.boxo:before, .boxo:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.boxo:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.boxo p{
font-size:40px;
text-align:center;
}
.boxo p:after{
content:"css3";
font-size:20px;
font-style:italic;
color:#666666;
padding:10px;
}
.boxo p::before{
content:"html5";
font-size:20px;
font-style:italic;
color:#666666;
padding:10px;
}
/*--------------------------------------------------Buttons------------------------------------------------------*/
.blues {
color: #fff;
/*width: 190px;
height: 35px;*/
cursor: pointer;
font-family: Arial, Tahoma, sans-serif;
font-size: 1.0em;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 11px;
border-width: 1px;
border-color: #0053a6 #0053a6 #000;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
}
.blues h5{
color: #3284d7;
    font-size: 23px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px;
    text-align: center;
    text-shadow: 1px 1px 0 #330b33;
}
.blues h5:hover{
color: #33FFFF;
    font-size: 23px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px;
    text-align: center;
    text-shadow: 1px 1px 0 #330b33;
}

.blues:hover {
border-color: #002d59 #002d59 #000;
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}

.blues:active {
border-color: #000 #002d59 #002d59;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}

/*------------------------------------------------Form format--------------------------------------------------------*/

.formwrap { display: block; margin-bottom: 15px; }
.formwrap label { 
display: inline-block; 
width: 80px; 
font-size: 11px; 
font-weight: bold; 
color: #444; 
font-family: Arial, Tahoma, sans-serif; 
}

.formwrap .shadowfield {
position: relative;
width: 100%;

font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
.formwrap .shadowfield:focus {
border-color: #930; 
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}

/*------------------------------------image flip effect----------------------------------------- */
.newabc{
background:#333;
padding:10px;
margin:auto;
}
.mg-flip-container {
  perspective:1000px;
  margin:auto;
}
.mg-flip-container:hover .mg-flip-content,
.mg-flip-container.hover .mg-flip-content {
  transform:rotateY(180deg);
}
.mg-flip-container,.front-side,.back-side {
  width: 200px;
  height: 200px;
}
.mg-flip-content {
  transition:.6s; /* Flip duration */
  transform-style:preserve-3d;
  position:relative;
}
.front-side,
.back-side {
  backface-visibility:hidden;
  position:absolute;
  top:0;
  left:0;
}
.front-side {
  z-index:2;
  transform:rotateY(0deg);
}
.back-side {
  transform:rotateY(180deg);
}

/*---------------------------------------------second image hover effect(zoom-in)-----------------------------------------------*/
.image-zoom-container {
 list-style: none;
 font-size: 0px;
}
.zoom-container {
 position: relative;
 overflow: hidden;
 display: inline-block;
 width: 33.33%;
 font-size: 16px;
 font-size: 1rem;
 border: 1px solid #fff;
 vertical-align: top;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.zoom-container img {
 display: block;
 width: 100%;
 height: auto;
 -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 background: rgba(0, 0, 0, .5);
 -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption h3 {
 display: block;
 text-align: center;
 font-family: 'Source Sans Pro', sans-serif;
 font-size: 1.5em;
 font-weight: 900;
 letter-spacing: -1px;
 text-transform: uppercase;
 color: #fff;
 margin: 23% 0 0;
 padding: 10px 0;
 border-top: 5px solid #333333;
 border-bottom: 5px solid #000000;
}
.zoom-container:hover img {
 -webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
}
.zoom-container:hover .zoom-caption {
 background: none;
}
 
@media (max-width: 767px) {
 .zoom-container {
  width: 50%;
 }
}
 
@media (max-width: 480px) {
 .zoom-container {
  width: 100%;
 }
}
</style>
</head>

<body>
<div class="banneroo">
<h1>
Welcome To HTML5</h1>
</div>
<div class="boxo">
<div class="mg-flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="mg-flip-content">
    <div class="front-side">
     <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="front" width="200" height="200" class="aligncenter size-full wp-image-3079" />
    </div>
<div class="back-side">
      <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="back" width="200" height="200" class="aligncenter size-full wp-image-3078" />
    </div>
</div>
</div>
</div>
<div class="boxo1">
<form class="formwrap">
<label class="formwrap">Name</label> <input type="text" class="shadowfield" placeholder="name"><br>
<label class="formwrap">Password</label> <input type="password" class="shadowfield" placeholder="Password">
<div class="blues">
<h5>
SUBMIT</h5>
</div>
</form>
</div>
<div class="boxo">
<div class="image-zoom-container">
 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>
Place</h3>
</span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" />
  </a>
 </div>

 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>
Where</h3>
</span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" />
  </a>
 </div>

 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>
Peace</h3>
</span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" />
  </a>
 </div>
</div>
</div>
<div class="boxo">
<p>
Web design and development</p>
</div>
</body>
</html>

Tuesday 24 March 2015

Side-Menu-show and hide

1> create index.html

2>create menu.css

body {

-webkit-transition: background 0.5s ease-in;
 transition: background 0.5s ease-in; /* transition properties and type. */

}

.toggler { /* Icon toggler */
 width: 30px;
 height: 30px;
 border: 6px solid black;
 text-indent: -100000px;
 position: relative;
 cursor: pointer;
}

.toggler::before{
 position: absolute;
 border: 6px solid black;
 content: '';
 width: 100%;
 height: 20%;
 top: 6px;
 left: -6px;
 display: block;
}

.toggler:hover, .toggler:hover::before{
 border-color: darkred;
}

#contentwrapper { /* DIV that wraps around entire BODY content */
 background: white;
 -webkit-transform-origin:  100% 20%;
 transform-origin: 100% 20%;

-webkit-transition: all 0.5s ease-in; /* transition properties and type. Actual duration is set by script */
 transition: all 0.5s ease-in;

-webkit-transition-property: -webkit-transform, padding;
 transition-property: transform, padding;
}

#contentwrapper::before { /* veil overlapping BODY content to add shadow */
 position: absolute;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0);
 left: 0;
 top: 0;
 z-index: -1000;
}

#sideviewmenu {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 10000;
 width: 280px; /* width of slide out menu */
 height: 100%;
 color: white;
 background: transparent;
 visibility: hidden;

-webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;

-webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;

-webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);

-webkit-transition: all 0.5s ease-in; /* transition properties and type. Actual duration is set by script */
 transition: all 0.5s ease-in;
}

#sideviewmenu .backdrop { /* Radial gradient background behind menu layer */
 position: absolute;
 left: 0;
 top: 0;
 content: '';
 display: block;
 width: 100%;
 height: 100%;
 z-index: -1;
 background: rgb(125,126,125); /* Begin Radial gradient background */
 background: -moz-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
 background: -webkit-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 12+ */
 background: -ms-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
 background: radial-gradient(ellipse at center,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 opacity: 0.9;
}

#sideviewmenu ul.menulinks { /* UL list within menu that will be animated during open state */
 list-style: none;
 font: bold 130% 'Asul', sans-serif;
 text-transform: uppercase;
 margin: 0;
 padding: 0;
 text-shadow: 0 -2px 1px #8a8a8a;
 transition: none;
}

#sideviewmenu ul.menulinks li { /* LI elements within ul.menulinks that will be animated during open state */
 position: relative;
 display: block;
 left: -100%;
 text-indent: 10px;

-webkit-transition: none;
 transition: none;
}

#sideviewmenu ul.menulinks li a {
 text-decoration: none;
 color: white;
 padding: 30px 0;
 letter-spacing: 3px;
 display: block;
}

#sideviewmenu ul.menulinks li a:hover {
 color: lightyellow;
}

.opensideviewmenu { /* class that gets added to BODY element on page when menu is revealed */
 background: black;
}

.opensideviewmenu #contentwrapper {
 padding: 15px;

-webkit-transform: scale(0.8); /* scale down BODY content to 80% of original size*/
 transform: scale(0.8);
}

.opensideviewmenu #contentwrapper::before { /* Apply gradient background to content's shadow layer */
 z-index: 1000;
 content: '';
 background: -moz-linear-gradient(left,  rgba(0,0,0,0.21) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.21)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left,  rgba(0,0,0,0.21) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left,  rgba(0,0,0,0.21) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left,  rgba(0,0,0,0.21) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
 background: linear-gradient(to right,  rgba(0,0,0,0.21) 0%,rgba(0,0,0,0) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

.opensideviewmenu #sideviewmenu {
 -webkit-transform: translate3d(0, 0, 0); /* translate menu back to original position on page to reveal it */
 transform: translate3d(0, 0, 0);

-webkit-box-shadow: 5px 0 5px black;
 box-shadow: 5px 0 5px black;
 visibility: visible;
}

.opensideviewmenu #sideviewmenu .backdrop{
visibility: visible;
}

.opensideviewmenu #sideviewmenu ul.menulinks li {
 left: 0; /* reveal LI elements within ul.menulinks */

-webkit-transition: all 0.5s ease-in; /* transition properties and type. Actual durations and delays are set by script */
 transition: all 0.5s ease-in;
}

3>create menu.js

var sideviewmenu = (function(win, $){

var defaults = {
  main_transition_duration: 0.3,
  menu_transition: {duration: 0.4, delay: 0.4},
  list_transition: {listclass: 'menulinks', duration: 0.5, basedelay: 0.4, delay: 0.3},
  menusource: 'menucontents.txt',
  menuid: 'sideviewmenu',
  onopenclose:function(state){
   // event handler
  }
 }

var transform = typeof $(document.documentElement).css('perspective') != "undefined" // test for support for CSS3 transform
 var menuloaded = false

function getajaxcontent(url, options){
  $.ajax({
   url: url,
   dataType: 'html',
   error:function(ajaxrequest){
    alert('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
   },
   success:function(content){
    menuloaded = true
    options.menuref = $(content)
    sideviewmenu(options)
   }
  })
 }

function sideviewmenu(options){

var menusource = options.menusource || defaults.menusource
  if (!menuloaded && menusource != 'inline'){
   getajaxcontent(menusource, options)
   return
  }

var s = $.extend({}, defaults, options),
    $bod = $(document.body),
    $content = $('#contentwrapper')

var $menu = s.menuref || $('#' + s.menuid)

if ($content.length == 0){
   $bod.wrapInner('<div id="contentwrapper" />')
   $content = $('#contentwrapper')
  }

$bod.prepend( $menu )
  var $menubackdrop = $('<div class="backdrop" />').prependTo($menu)

function togglescrollbars(state){
   if (state == 'open'){
    $menu.css({overflow: 'auto'})
    $menubackdrop.css({height: $menu.get(0).scrollHeight})
    s.onopenclose('opened')   
   }
   else{
    $content.css({height: '', overflow: ''})
    $bod.css('overflow', 'auto')
    $menu.css({overflow: ''})
    s.onopenclose('closed')
   }
  }

if (transform){
   $content.css({'transitionDuration': s.main_transition_duration + 's'})
   $menu.css({transitionDuration: s.menu_transition.duration + 's', transitionDelay: s.menu_transition.delay + 's'})
   $menu.find('.' + s.list_transition.listclass + ' li').each(function(i){ // loop through LI elements within UL menu
    $(this).css({
     transitionDuration: s.list_transition.duration + 's',
     transitionDelay: s.list_transition.basedelay + s.list_transition.delay * i + 's'
    })
   })
 
   $bod.on('transitionend webkitTransitionEnd', function(e){
    if (/transform/i.test(e.originalEvent.propertyName) && e.target.getAttribute('id') == s.menuid){ // check event fired on "transform" prop
     if ( !$bod.hasClass('opensideviewmenu') ){ // if menu is hidden (at end of animation)
      togglescrollbars('close')
     }
     else{ // if menu is visible (at end of animation)
      togglescrollbars('open')
     }
    }
   })
  }
  else{ // no CSS3 transform support
   $menu.css({left: '-100%', visibility: 'visible'})
  }

sideviewmenu.toggle = function(state){
    $bod.css('overflow', 'hidden')
   $content.css({height: window.innerHeight, overflow: 'hidden'})
   var actionfunc = (state == 'open')? 'addClass' : (state == 'close')? 'removeClass' : 'toggleClass'
   setTimeout(function(){
    $bod[actionfunc]('opensideviewmenu')
   }, transform? 25 : 0)
   if (!transform) { // fall back animation
    var leftval = (state == 'open')? 0 : (state == 'close')? '-100%' : ($bod.hasClass('opensideviewmenu'))? '-100%' : 0
    $menu.animate({left: leftval}, s.menu_transition.duration +'ms', function(){
     if (leftval == 0){ // if menu is visible (at end of animation)
      togglescrollbars('open')
     }
     else{ // if menu is hidden (at end of animation)
      togglescrollbars('close')
     }
    })
   }
  }

$menu.add($content).on('click', function(){ // close menu when clicking on menu or content (main BODY)
   if ($bod.hasClass('opensideviewmenu')){
    sideviewmenu.toggle('close')
   }
  })
  
 } // end sideviewmenu function

return sideviewmenu

}) (window, jQuery);

4>create menucontents.txt

Monday 23 March 2015

javascript text banner animation

<!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>javascript text banner animation</title>
<style>
body{
background:#CCCCCC;
}
.wrapper{
margin:auto;
width:50%;
background:#669900;
}
.textbanner{
background:#0066CC;
padding:40px;
text-align:center;
}
</style>
</head>
<body>
<div class="wrapper">

<div class="textbanner">
<script language="JavaScript1.2">
var message="Welcome to Javascript!"
var neonbasecolor="#333"
var neontextcolor="#ccc"
var neontextcolor2="#ddd"
var flashspeed=100      // speed of flashing in milliseconds
var flashingletters=3      // number of letters flashing in neontextcolor
var flashingletters2=1      // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0      // the pause between flash-cycles in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</div>

</div>
</body>
</html>

Tuesday 10 March 2015

Drop-Down Navigation: Touch-Friendly and Responsive

create index.html

<!DOCTYPE html>

<head>
 <meta charset="utf-8" />
 <title>Drop-Down Navigation: Touch-Friendly and Responsive</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="description" content="Drop-Down Navigation: Touch-Friendly and Responsive" />
 <meta name="robots" content="all">
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 
 
 
 <style>

body
  {
   background-color: #000000;
   padding: 1.25em;
  }

a{
   text-decoration:none;
   }
  #nav
  {
   width: 60em; 
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   position: absolute;
   top: 25%;
   left: 50%;
   margin-left: -30em; 
  }

#nav > a
   {
    display: none;
   }

#nav li
   {
    position: relative;
   }
    #nav li a
    {
     color: #fff;
     display: block;
    }
    #nav li a:active
    {
     background-color: #c00 !important;
    }

#nav span:after
   {
    width: 0;
    height: 0;
    border: 0.313em solid transparent; 
    border-bottom: none;
    border-top-color: #FFFFFF;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em; 
   }

/* first level */

#nav > ul
   {
    height: 3.75em; 
    background-color: #333;
   }
    #nav > ul > li
    {
     width: 25%;
     height: 100%;
     float: left;
     list-style: outside none none;
    }
     #nav > ul > li > a
     {
      height: 100%;
      font-size: 1.5em; 
      line-height: 2.5em; 
      text-align: center;
     }
      #nav > ul > li:not( :last-child ) > a
      {
       border-right: 1px solid #eee;
      }
      #nav > ul > li:hover > a,
      #nav > ul:not( :hover ) > li.active > a
      {
       background-color: #CCCCCC;
      }

/* second level */

#nav li ul
    {
     background-color: #999999;
     display: none;
     position: absolute;
     top: 100%;
    }
     #nav li:hover ul
     {
      display: block;
      left: 0;
      right: 0;
     }
      #nav li:not( :first-child ):hover ul
      {
       left: -1px;
      }
      #nav li ul a
      {
       font-size: 1.25em; 
       border-top: 1px solid #eee;
       padding: 0.75em; 
      }
       #nav li ul li a:hover,
       #nav li ul:not( :hover ) li.active a
       {
        background-color: #ccc;
       }

@media only screen and ( max-width: 62.5em ) /* 1000 */
  {
   #nav
   {
    width: 100%;
    position: static;
    margin: 0;
   }
  }

@media only screen and ( max-width: 40em ) /* 640 */
  {
   html
   {
    font-size: 75%; /* 12 */
   }

#nav
   {
    position: relative;
    top: auto;
    left: auto;
   }
    #nav > a
    {
     width: 3.125em; 
     height: 3.125em; 
     text-align: left;
     text-indent: -9999px;
     background-color: #ddd;
     position: relative;
    }
     #nav > a:before,
     #nav > a:after
     {
      position: absolute;
      border: 2px solid #fff;
      top: 35%;
      left: 25%;
      right: 25%;
      content: '';
     }
     #nav > a:after
     {
      top: 60%;
     }

#nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
     display: block;
    }

/* first level */

#nav > ul
   {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
   }
    #nav:target > ul
    {
     display: block;
    }
    #nav > ul > li
    {
     width: 100%;
     float: none;
    }
     #nav > ul > li > a
     {
      height: auto;
      text-align: left;
      padding: 0 0.833em; 
     }
      #nav > ul > li:not( :last-child ) > a
      {
       border-right: none;
       border-bottom: 1px solid #eee;
      }

/* second level */

#nav li ul
    {
     position: static;
     padding: 1.25em; 
     padding-top: 0;
    }
  }

</style>
</head>

<body>

<nav id="nav" role="navigation">
 <a href="#nav" title="Show navigation">Show navigation</a>
 <a href="#" title="Hide navigation">Hide navigation</a>
 <ul class="clearfix">
  <li><a href="#">Home</a></li>
  <li>
   <a href="#" aria-haspopup="true"><span>Web Design</span></a>
   <ul>
    <li><a href="#">Design</a></li>
    <li><a href="#">GUI</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Codes</a></li>
   </ul>
  </li>
  <li>
   <a href="#" aria-haspopup="true"><span>Services</span></a>
   <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Web Development</a></li>
    <li><a href="#">Web Images</a></li>
   </ul>
  </li>
  <li><a href="#">Contacts</a></li>
 </ul>
</nav>

</body>

</html>