#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
/** | |
* Attribute selectors and bling oefening | |
Opdracht: | |
Vervang alle … door de juiste selector of combinatie. | |
De omschrijving staat er telkens boven | |
*/ | |
/* Dit blok geldt voor alle input-elementen */ | |
… { |
/** | |
* Responsive blog layout te doen | |
*/ | |
article { | |
display: inline-block; | |
vertical-align: top; | |
} | |
nav li { | |
display: block; |
/** | |
* Child selectors en sibling combinators oefening | |
Opdracht: | |
Vervang alle … door de juiste selector of combinatie. | |
De omschrijving staat er telkens boven | |
*/ | |
body { | |
background: #fff; | |
font: 100%/1.5 georgia; |
/* | |
I want to make a bubble that explains people that they can save the page to their homescreen | |
I want to be absolutely sure that this is Safari on an iPhone or iPad | |
Not a browser in a webview in a native app | |
Not a browser in standalone mode | |
Not something else | |
This is the closest I can get to something I kinda trust. | |
*/ | |
var nav = window.navigator; |
The script below is triggered every day from my Mac. I use Hazel to move the tar.gz to an external hard disk once it's finished. This happens every day without me noticing. You can exclude folders if you want to. You probably want to exclude giant cache folders.
You should have a similar script.
/** | |
* Transitions | |
*/ | |
div:last-of-type { | |
transition: 1s ease; /* ease, linear, ease-in, ease-in-out, ease-out */ | |
/* Zoek ook eens op http://cubic-bezier.com/ | |
Of op http://matthewlein.com/ceaser/ | |
*/ | |
top: 12vw; |
/** | |
* Meer bling met CSS | |
*/ | |
* { | |
box-sizing: border-box; | |
} | |
html { | |
background: grey; | |
min-height: 100%; | |
font-family: georgia, serif; |
/** | |
* Tekst stylen met CSS | |
*/ | |
* { | |
box-sizing: border-box; | |
} | |
html { | |
background: #f06; | |
background: linear-gradient(45deg, #f06, yellow); | |
min-height: 100%; |