Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Daniel Mascena danielmascena

🎯
Focusing
View GitHub Profile
@danielmascena
danielmascena / dabblet.css
Created Jul 14, 2017 — forked from benfrain/dabblet.css
CSS Flexible Layout Module - flex property
View dabblet.css
/**
* 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;
View table.css
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 }
View css-selectors.md

CSS Selectors Cheatsheet

Element selectors

Element -- selects all h2 elements on the page

h2 {
    foo: bar;
@danielmascena
danielmascena / README.md
Created Apr 10, 2017 — forked from addyosmani/README.md
108 byte CSS Layout Debugger
View README.md

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
danielmascena / dabblet.css
Last active Mar 15, 2017
Hidden checkboxes
View dabblet.css
/* Hidden checkboxes */
#btnControl { display: none;}
#btnControl:checked + label > img {
transform: scale(.5) rotate(360deg);
}
img {transition: transform .5s linear;}
@danielmascena
danielmascena / dabblet.css
Created Dec 29, 2016
The first commented line is your dabblet’s title
View dabblet.css
/**
* 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
danielmascena / dabblet.css
Created Dec 19, 2016
The first commented line is your dabblet’s title
View dabblet.css
/**
* 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
danielmascena / dabblet.css
Last active Dec 16, 2016
The first commented line is your dabblet’s title
View dabblet.css
/**
* 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;
@danielmascena
danielmascena / dabblet.css
Last active Dec 16, 2016
The first commented line is your dabblet’s title
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
#fundo {
background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
height: 300px;
width: 1000px;
animation: rolling-position 10s infinite linear;
}
@danielmascena
danielmascena / dabblet.css
Last active Dec 15, 2016
The first commented line is your dabblet’s title
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
#fundo {
background: url(http://i.imgur.com/UZKEjzG.png) 0px center;
height: 300px;
width: 1000px;
}
You can’t perform that action at this time.