Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Daniel Mascena danielmascena

🎯
Focusing
View GitHub Profile
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;
}
View SassMeister-input-HTML.html
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
</div>
</div>
You can’t perform that action at this time.