A Pen by Simon Donaldson on CodePen.
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
| /** | |
| * Testing selectors | |
| */ | |
| body{background: #000;} | |
| ul li{color:white;} | |
| ul li+li{color:blue;} | |
| ul li+li+li{color:white;} |
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
| /******************************************************************************** | |
| * The Source code from USEHOOK.COM | |
| * Prettified via http://jsbeautifier.org/ | |
| * | |
| * Check it out. It's blooming awful code. | |
| * It refreshes your page every time you hit scrollTop = 0!! | |
| ********************************************************************************/ | |
| $(function () { | |
| window.loadheight = $('#hook').height(); |
sidonaldson
/ jsbin.aFuQuYeV.css
Created
November 29, 2013 12:00
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
| html { | |
| font-family: sans-serif; | |
| line-height: 1.4; | |
| } | |
| .lipsum-blocks p { | |
| display: inline-block; | |
| margin: 1em 1em 0 0; | |
| width: 200px; | |
| vertical-align: top; | |
| padding: 10px; |
A Pen by Simon Donaldson on CodePen.
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
| div{ | |
| height:300px;width:300px;background:red; | |
| -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%); | |
| clip-path: polyg-webkit-on(0% 0%, 100% 0%, 100% 100%, 0% 50%); | |
| } |
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
| div{ | |
| height:300px;width:300px;background:red; | |
| -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%); | |
| clip-path: polyg-webkit-on(0% 0%, 100% 0%, 100% 100%, 0% 50%); | |
| } |
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
| div{ | |
| height:300px;width:300px;background:red; | |
| -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%); | |
| clip-path: polyg-webkit-on(0% 0%, 100% 0%, 100% 100%, 0% 50%); | |
| } |
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
| div{ | |
| height:300px;width:300px;background:red; | |
| -webkit-mask-position: 0 0; | |
| -webkit-mask-size: 100%; | |
| -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, | |
| color-stop(0.00, rgba(0,0,0,1)), | |
| color-stop(0.50, rgba(0,0,0,1)), | |
| color-stop(0.50, rgba(0,0,0,0)), | |
| color-stop(1.00, rgba(0,0,0,0))); | |
| } |
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
| /** | |
| * SVG and CSS Gradient background | |
| */ | |
| html,body{ | |
| padding:0; | |
| margin:0; | |
| height:100%; | |
| background-color:#000; | |
| } | |
| body{ |
OlderNewer