GeorgeTzellis

/* Data visualization */

main {
	transform: rotate(-90deg);
	!transform: rotate(-45deg); /* remove the ! to tilt years */
	transform-origin: 00% 0%;
	margin-left: 0%;
	margin-top: 15em;
}

GeorgeTzellis

/* Inline references */
div {
	position:relative;
	width: 200px;
	margin-left: 40px;
	background: green;
}
span {
	position: absolute;
	right: -50px;

GeorgeTzellis

/* z-index priority */
.custom.stacking-order { position: static; z-index: 2; 
float: left;margin-left:200px}
.z-index2     {position: relative; z-index: 2; }
.z-index1     {position: relative; z-index: 1; }
.opaque       {opacity: .999;   /* z-index: 0;auto;inherit */}
.overflow     {                    overflow: scroll;}
.inline-block {                    display: inline-block;}
.float        {                    float: left;}
.block        {                    display: block;}

GeorgeTzellis

/*	overflow	*/
html { transform: scale(.); } body { transform: scale(.); }
html { height: auto ; overflow-y: visible;/* initial values */
       height: 100% ;!overflow-y: auto   ;
      !height: 100vh;!overflow-y: scroll ;
      !height:1500px;!overflow-y: overlay;
      !height: 400px;!overflow-y: -webkit-marquee;
      !height:   0px;!overflow-y:  hidden;
}
body { height: auto ; overflow-y: visible;/* initial values */

GeorgeTzellis

/*			Position sticky			*/
section {
    display: block;
    margin: 3em;
    height: 3000px;
    width: 300px;
    background: rgba(0, 0, 255, 0.3);
}
 
article {

GeorgeTzellis

/*		Shapes			*/
section {
  display: inline-block;
  margin: 3em;
  width: 100px;
  height: 100px;
  background: yellow;
  box-shadow: 0 0 2px black;
}
 

GeorgeTzellis

/* 		Lorem Diver		*/
div {
	position: absolute;
    margin: 19em;
}
span{transition: 1s;}
span {
	position: absolute;
	top: 50%;
	left: 50%;

GeorgeTzellis

/* 		golden rectangle	*/
body { font-size: 90px; }
 
.square {
    position: absolute;
    width: 3em;
    height: 3em;
    background-image: linear-gradient(to bottom, rgba(50,50,50,.4) 1px, rgba(50,50,50,0));
	background-size: 1px 100%;
	background-repeat: no-repeat;

GeorgeTzellis

/*	skin	*/ body { margin: 3em;}
.noise {width: 200px;height: 200px;
	background-color: rgb(253, 250, 240);/*base layer*/
	background-image:
/*L2*/linear-gradient(to right,
	    transparent 0px, rgba(255,255,255,.1) 1px, transparent 1px,
        transparent 6px, rgba(255,255,255,.2) 6px, transparent 7px),
/*L1*/linear-gradient(to right,
	    transparent,     rgba(255,255,255,.3) 1px, transparent 1px);
	background-size:     7px 1px, 3px 1px;

GeorgeTzellis

/* scrolling islands */body {margin:3em 1em}
div  {width: 350px; height: 100px; overflow-x: scroll}
span {display: inline-block;background: rgba(0,0,255,0.3);}
.baseline {background: grey}
.flex {
	display: flex;
	flex-orient: horizontal;
	flex-pack: center;
	flex-align: center;
	background: rgba(255,200,0,0.3)