sidonaldson

/**
 * Testing selectors
 */

body{background: #000;}
ul li{color:white;}
ul li+li{color:blue;}
ul li+li+li{color:white;}

sidonaldson

/********************************************************************************
 * 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

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;  

sidonaldson

EqxKi

A Pen by Simon Donaldson on CodePen.

License.

sidonaldson

EqxKi

A Pen by Simon Donaldson on CodePen.

License.

sidonaldson

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%); 
 }

sidonaldson

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%); 
 }

sidonaldson

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%); 
 }

sidonaldson

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)));
}

sidonaldson

/**
 * SVG and CSS Gradient background
 */
html,body{
  padding:0;
  margin:0;
  height:100%;
  background-color:#000;
}
body{