danielmascena

/**
 * CSS Flexible Layout Module - flexbox styling
 */
 
* { transition: all 2s; }
body {
background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
	padding: 1em;

danielmascena

/**
 * CSS Flexible Layout Module - flex property
 */
* { transition: all 2s; box-sizing: border-box;}
body {
	background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
	padding: 1em;
	font-size: 1.4em;

danielmascena

/**
 * CSS Flexible Layout Module - flex property
 */
* { transition: all 2s; box-sizing: border-box;}
body {
	background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
	padding: 1em;
	font-size: 1.4em;

danielmascena

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

danielmascena

CSS Selectors Cheatsheet

Element selectors

Element -- selects all h2 elements on the page

h2 {
    foo: bar;

danielmascena

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

danielmascena

/* Hidden checkboxes  */
#btnControl {    display: none;}

#btnControl:checked + label > img {
    transform: scale(.5) rotate(360deg);
    
}
img {transition: transform .5s linear;}

danielmascena

/**
 * The first commented line is your dabblet’s title
 */

#fundo {
	background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
	height: 300px;
	width: 1000px;
	position: relative;
	animation: rolling-position 10s infinite linear; 

danielmascena

/**
 * The first commented line is your dabblet’s title
 */

#fundo {
	background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
	height: 300px;
	width: 1000px;
	position: relative;
	animation: rolling-position 10s infinite linear; 

danielmascena

/**
 * The first commented line is your dabblet’s title
 */
:root {
--xis: calc(100% - 60%);
}
#fundo {
	background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
	height: 300px;
	width: 1000px;