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
/** | |
* 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; |
/* Hidden checkboxes */ | |
#btnControl { display: none;} | |
#btnControl:checked + label > img { | |
transform: scale(.5) rotate(360deg); | |
} | |
img {transition: transform .5s linear;} |
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 } |
/** | |
* 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; |
/** | |
* 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; |
/** | |
* CSS Flexible Layout Module - flexbox styling | |
*/ | |
* { transition: all 2s; } | |
body { | |
background: #bfbfbf; | |
} | |
header,aside,.mainContent,.extraDiv,footer { | |
padding: 1em; |
/** | |
* CSS Flexible Layout Module - extra div | |
*/ | |
body { | |
background: #bfbfbf; | |
min-height: 100%; | |
} | |
header { | |
background-color: blue; | |
min-height: 100px; |
/** | |
* CSS Flexible Layout Module | |
*/ | |
body { | |
background: #bfbfbf; | |
min-height: 100%; | |
} | |
header { | |
background-color: blue; | |
min-height: 100px; |