GeorgeTzellis
This file contains 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
| /* CSS Region experiment 1*/ | |
| /* source content flows into article-flow */ | |
| .source { flow-into: article-flow;} | |
| /* then the regions pull from article-flow */ | |
| .region { flow-from: article-flow;} | |
| .region { | |
| float: left; |
This file contains 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
| /* CSS Region experiment 2*/ | |
| #source { flow-into: prose;} /* #sources push their content into */ | |
| #source2 { flow-into: prose;} /* the named flow 'prose', */ | |
| .region { flow-from: prose;} /* then .region pulls from prose */ | |
| #region_1, #region_2, #region_3 { | |
| position: absolute; | |
| background: lightblue; | |
| } | |
| #region_1 { |
This file contains 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
| /* CSS Regions experiment 3 */ | |
| #source { flow-into: prose;} /* #sources push their content into */ | |
| #source2 { flow-into: prose;} /* the named flow 'prose', */ | |
| .region { flow-from: prose;} /* then .region pulls from prose */ | |
| #region_1, #region_2 { | |
| float: left; | |
| height: 600px; /* % values are buggy */ | |
| background: lightblue; | |
| } |
This file contains 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
| /* CSS Regions experiment 4 */ | |
| #source { flow-into: flow1;} /* #sources push their content into */ | |
| #region_1 { flow-from: flow1;} /* then .region pulls from prose */ | |
| /#source { flow-into: flow2;} | |
| #source2 { flow-into: flow2;} | |
| #region_2 { flow-from: flow2;} | |
| #region_3 { flow-from: flow2;} | |
| #region_1, #region_2, #region_3 { |
This file contains 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
| /* Dalmatian scrollbars (-webkit) */ | |
| html, body { width: 99%;height: 99%; } | |
| div { | |
| width: 50%; | |
| height: 30%; | |
| overflow: auto; | |
| outline: 1px solid; | |
| margin: 10px; | |
| box-sizing: border-box; | |
| } |
GeorgeTzellis
/ dabblet.css
Created
July 23, 2012 16:06
width: auto to 0 = line-height transition: 1 to 0
This file contains 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
| /* width: auto to 0 = line-height transition: 1 to 0 */ | |
| div { | |
| display:block; | |
| width: 100px; | |
| line-height: 0; | |
| color: transparent; | |
| background: #ff0; | |
| transition: all 1s ease-in-out; | |
| } | |
| .animated { |
This file contains 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
| /* :default pseudo-class */ | |
| button:default { | |
| color: red; | |
| } |
This file contains 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
| /* elements take a stroll */ | |
| a:active { | |
| background-color: rgba(0,255,255,0.9); | |
| bottom: 29px; | |
| right: -200px; | |
| transition: right 3s ease, | |
| bottom 3s cubic-bezier(1, -1, 1, -1); | |
| } | |
| a:focus { | |
| background-color: rgba(255,0,255,0.9); |
This file contains 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
| /* :valid selector, RegExp patterns */ | |
| :valid {background-color: lightgreen;} | |
| :invalid {background-color: red;} | |
| form { | |
| margin: 4em 1em 0 1em; | |
| } |
This file contains 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
| /* pseudo-elements on <html> */ | |
| html{ | |
| margin: 3em; | |
| border: 1em solid red; | |
| padding: 1em; | |
| min-height: 100%; | |
| position: absolute; | |
| background-color: cyan; | |
| } | |
| html::before{ |
OlderNewer