#HTML presentation tools
There are many HTML presentation tools and they are all created for slightly different reasons. Here's an overview. Please let me know if I forgot any.
##CSSS
CSS-based SlideShow System
<form role="search" class="search-form" id="search-form" action="#" method="post"> | |
<section class="search-terms"> | |
<label for="search-term" class="search-term-label screen-reader-text">Search Terms</label> | |
<div> | |
<span class="search-term-wrap"> | |
<input type="search" id="search-term" class="search-term"> | |
</span> | |
<span class="search-term-button-wrap"> | |
<input type="submit" value="Search" class="search-button"> |
var robots = new Array(); | |
//FightCode can only understand your robot | |
//if its class is called Robot | |
var Robot = function(robot) { | |
}; | |
Robot.prototype.start = function( ev ){ |
var Robot = function(robot) { | |
robot.rotateCannon(-90); | |
}; | |
Robot.prototype.onIdle = function(ev) { | |
var robot = ev.robot; | |
robot.ahead(); | |
//i'll add a clone but i need to refactor collision | |
//robot.clone(); | |
}; |
$(document).ready(function()) | |
___ | |
document.addEventListener("DOMContentLoaded", function() {}); | |
/// | |
$("something"); | |
___ | |
document.querySelectorAll("something"); |
/* Animate to natural width */ | |
body,html { width:100%;height:100%; background: #111; padding: 33px 0; margin: 0; } | |
progress { | |
box-shadow: 0 0 3px 1px white, inset 1px 1px 1px 3px rgba(111,111,111,.33); | |
border: 3px double #fff; | |
border-radius: 11px; | |
color: white; | |
background: green; | |
overflow: hidden; |
/** | |
* acko.net 3D object scrolling | |
* <3<3 Steven Wittens | |
*/ | |
body { | |
font-family: sans-serif; | |
} |
/* | |
YouTube Footer Buttons | |
*/ | |
.button { | |
border: 1px solid #DDD; | |
border-radius: 3px; | |
text-shadow: 0 1px 1px white; | |
box-shadow: 0 1px 1px #fff; | |
font: bold 11px Sans-Serif; |
/** | |
* Conquering Borders: The Bane of Responsive Layouts | |
*/ | |
#container { | |
width: 90%; | |
margin: 20px auto; | |
} | |
.column { |