Jens Grochtdreis jensgro
jensgro
/ dabblet.css
Created
December 18, 2015 20:31
— forked from gunnarbittersmann/dabblet.css
heading decorated
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * heading decorated | |
| */ | |
| html | |
| { | |
| height: 100%; | |
| background: linear-gradient( | |
| to right bottom, | |
| yellow, |
jensgro
/ dabblet.css
Last active
August 28, 2015 14:45
— forked from anonymous/dabblet.css
keyboard order and flexbox ordering
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * keyboard order and flexbox ordering | |
| */ | |
| nav { | |
| display: flex; | |
| padding: 20px; | |
| } | |
| a:nth-of-type(2) { | |
| order: -1; |
jensgro
/ dabblet.css
Created
May 22, 2015 12:55
— forked from csssecrets/dabblet.css
Scrolling hints
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Scrolling hints | |
| */ | |
| ul { | |
| display: inline-block; | |
| overflow: auto; | |
| width: 7.2em; | |
| height: 7em; | |
| border: 1px solid silver; |
jensgro
/ gist:901b1661a45826d3be1e
Last active
August 29, 2015 14:20
— forked from andreruffert/mobile-first-rwd-sites.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| %placeholder { | |
| foo: bar; | |
| &:first-child { | |
| first: child; | |
| } |
jensgro
/ SassMeister-input.scss
Created
April 13, 2015 15:54
Linear Gradient with Compass (including IE8)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.12) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @import "compass"; | |
| $experimental-support-for-svg: true; | |
| .test { | |
| @include background(linear-gradient(top, #fd8700, #a20000)); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.12) | |
| // Compass (v1.0.3) | |
| // ---- | |
| .module { | |
| background: red; | |
| &__element { | |
| background: #cecece; | |
| &--modifier { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Basic border-image demo | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Basic border-image demo | |
| */ | |
| div { | |
| border: 40px solid transparent; | |
| border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \ | |
| <circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \ | |
| <circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \ | |
| <circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \ |
jensgro
/ pseudo-elements.md
Last active
August 29, 2015 14:16
— forked from p3t3r67x0/pseudo_elements.md
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {