Skip to content

Instantly share code, notes, and snippets.

@ramsesoriginal
ramsesoriginal / dabblet.css
Created January 20, 2012 08:44
Demo redBall landing page with animation
/**
* Demo redBall landing page with animation
*/
body { background: black; padding: 100px; margin: 0; }
hgroup {
text-align: center;
@ramsesoriginal
ramsesoriginal / dabblet.css
Created February 28, 2012 09:18
Responsive Menu
/**
* Responsive Menu
*/
* {
box-sizing: border-box;
transition: all 0.5s ease;
vertical-align: middle;
}
@ramsesoriginal
ramsesoriginal / dabblet.css
Created February 28, 2012 13:49
Semantic Table + Styling + Charting
/*
* Semantic Table + Styling + Charting
*/
@import url(http://fonts.googleapis.com/css?family=Share);
body {
margin: 10px;
}
#stylised {
@ramsesoriginal
ramsesoriginal / dabblet.css
Created February 28, 2012 14:10
Minimal markup form with dynamic same-width labels
/**
* Minimal markup form with dynamic same-width labels
*/
fieldset {
min-width: 100px;
display: inline-block;
}
fieldset input{
@ramsesoriginal
ramsesoriginal / dabblet.css
Created February 28, 2012 14:19
Form styling example with exal length labels in ordered list
/**
* Form styling example with exal length labels in ordered list
*/
* {
padding:0;
margin:0;
}
@ramsesoriginal
ramsesoriginal / dabblet.css
Created February 28, 2012 14:20
Pure CSS Tabs
/**
* Pure CSS Tabs
*/
ul {
padding:0;
}
.tabs {
position: absolute;
@ramsesoriginal
ramsesoriginal / dabblet.css
Created February 28, 2012 14:31
Horizontal scrolling (to be enhanced with http://brandonaaron.net/code/mousewheel/docs
/**
* Horizontal scrolling (to be enhanced with http://brandonaaron.net/code/mousewheel/docs
*
* JavaScript to add besides the plugin:
* $(function() {
* $("body > div#container").mousewheel(function(event, delta) {
* this.scrollLeft -= (delta * 30);
* event.preventDefault();
* });
* });​
@ramsesoriginal
ramsesoriginal / dabblet.css
Created February 29, 2012 08:54
HTML5 Form input types + special attributes
/**
* HTML5 Form input types + special attributes
*/
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@import url(http://fonts.googleapis.com/css?family=Metamorphous);
@import url(http://fonts.googleapis.com/css?family=Allura);
@import url(http://fonts.googleapis.com/css?family=PT+Mono);
@import url(http://fonts.googleapis.com/css?family=Magra:700);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@ramsesoriginal
ramsesoriginal / dabblet.css
Created March 6, 2012 15:16 — forked from anonymous/dabblet.css
Gastropool tabs
/**
* Gastropool tabs
*/
/* Type & image presets */
html,
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small,
strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
@ramsesoriginal
ramsesoriginal / dabblet.css
Created March 7, 2012 07:35
Expanding accordion menu (ex-mootols homepage accordion)
/**
* Expanding accordion menu (ex-mootols homepage accordion)
*/
@import url(http://fonts.googleapis.com/css?family=Magra:700);
* { transition: all 0.5s ease;}
html, body {