Default Responsive CSS for Template

/*Responsive CSS*/
@viewport {
width: device-width;
zoom: 1;
}

img, video, canvas {
max-width: 100%;
}

figure {
height: 0;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
width: 100%;
}
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

@media all and (min-width: 768px) and (max-width: 1024px) {

}

@media all and (min-width: 480px) and (max-width: 768px) {

}

@media all and (min-width: 320px) and (max-width: 480px) {

}

@media all and (min-width: 240px) and (max-width: 320px) {

}

Advertisements

Text Blink

* Text Blink

<style>
#Blinker {
display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left;
}

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-moz-animation-play-state: paused;
}

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-webkit-animation-play-state: paused;
}

</style>

<div id=”Blinker” >Text to blink here</div>

Floating magically div

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;
  2.     <style type=”text/css”>
  3.         #container
  4.         {
  5.             display: table;
  6.             width:400px;
  7.             height:20px;
  8.         }
  9.         #leftBox
  10.         {
  11.             display: table-cell;
  12.             background-color:#006699;
  13.             width:20px;
  14.             height:20px;
  15.         }
  16.         #centerBox
  17.         {
  18.             display: table-cell;
  19.             background-color:#CC0000;
  20.             height:20px;
  21.         }
  22.         #rightBox
  23.         {
  24.             display: table-cell;
  25.             background-color:#006699;
  26.             width:20px;
  27.             height:20px;
  28.         }
  29.     </style>
  30. </head>
  31.     <div id=”container”>
  32.         <div id=”leftBox”></div>
  33.         <div id=”centerBox”>Content</div>
  34.         <div id=”rightBox”></div>
  35.     </div>
  36. </body>
  37. </html>