Skip to content

Instantly share code, notes, and snippets.

View justmarkup's full-sized avatar
👨‍🚀
...

Michael Scharnagl justmarkup

👨‍🚀
...
View GitHub Profile
@justmarkup
justmarkup / dabblet.css
Created January 7, 2012 20:01
My name is ... 12s animation
/**
* My name is ... 12s animation
*/
/*
* currently only works in Firefox cause there is a bug in Webkit https://bugs.webkit.org/show_bug.cgi?id=23209
*/
p,
h1 span {
@justmarkup
justmarkup / dabblet.css
Created January 8, 2012 14:21
slider menu (css only)
/**
* slider menu (css only)
*/
/**
* its not usable nowadys as it
* only works in Firefox and Webkit (should also work in IE10 but not tested)
* and even there you can not select the subnavi via keyboard
*/
@justmarkup
justmarkup / dabblet.css
Created January 31, 2012 19:28
Loading...
/**
* Loading...
*/
/**
* An attempt of an accessible and crossbrowser loading bar.
* Remove the animations from the pseudo elements to see how it looks like in old browsers, simple eh?
*/
@keyframes load {
@justmarkup
justmarkup / dabblet.css
Created February 27, 2012 14:07
Untitled
/**
* rwd animation
* from 320x480 to 1800x1000 in 14s
*/
div {
border: 5px solid #333;
border-width: 5px 5px 10px 5px;
border-radius: 10px;
width: 32px;
@justmarkup
justmarkup / developissimo.js
Created February 27, 2012 23:17
simple script for showing current screen width so you know where to set a breakpoint in your design
var developissimo = function() {
var devcon = document.createElement('div'),
devstyle = document.createElement('style');
devcon.id = 'developissimo';
devstyle.innerHTML = '#developissimo{position:absolute;top:0;right:0;z-index: 10000;padding:5px;background:#fff}';
document.head.appendChild(devstyle);
devcon.innerHTML = window.innerWidth;
document.body.appendChild(devcon);
@justmarkup
justmarkup / index.html
Created October 31, 2012 16:01
Responsive Styleguide
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Responsive Styleguide</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
html {
font: 62.5%/1.4 Arial, sans-serif;
padding: 2em;
/**
* Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform
* transform: rotate(20deg)
* Rotate the object by 20deg
*/
.rotate {
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-o-transform: rotate(40deg);
/**
* Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform
* transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
*/
html {padding: 2em}
.step {
width: 10em;
height: 10em;
padding: 0.2em;
/**
* Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform
* transform: scale(3, 0.5)
* Scales the element by the factor of 3 on the x axis and by the factor of 0.5 by the y axis
*/
.scale {
-ms-transform: scale(3, 0.5);
-webkit-transform: scale(3, 0.5);
-o-transform: scale(3, 0.5);
remove: function( key ) {
try {
localStorage.removeItem( storagePrefix + key );
return this;
} catch( e ) {
return false;
}
},
get: function( key ) {