gcyrillus

/* cow fences */
html {min-height:100%;
background:
linear-gradient( 0deg,transparent 0, #333 0px, #888,transparent 4px, transparent 1em),
linear-gradient(-45deg,transparent 0, #555 2px, transparent 5px , transparent 4em, transparent 8em),
linear-gradient(45deg,transparent 0, #333 2px, transparent 5px , transparent 4em, transparent 8em),
linear-gradient( 90.5deg,transparent 0.55em, #930 0.65em,#c63, #930 1.25em, transparent 1.45em, transparent 5em);
background-position:  0 0 ,  2em 0;
background-repeat:repeat;
background-position:0 40px,0 41px ,2px 40px,0 0;

gcyrillus

/* boxes , image  & ribbon */
html {
	font-size:1.2em;/* rezize font-size to see */
	background:#333;
	}
body {
	text-align:center;
}
aside {
	display:inline-table; 

gcyrillus

<div class="wrap">
			<header>
        				<a href="" class="icon fb"><img class="icon fb" src="http://www.ctrlshiftstudios.com/imgs/fb.png"/></a>
				<a href="" class="icon tw"><img class="icon tw" src="http://www.ctrlshiftstudios.com/imgs/tw.png"/>	</a>
				<a href="" class="icon yt"><img class="icon yt" src="http://www.ctrlshiftstudios.com/imgs/yt.png"/>	</a>
          <img class="pix" src="http://www.ctrlshiftstudios.com/imgs/pix.png"/>
       </header>
			
			<article>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci

gcyrillus

/* rgba color, used as filter */
html {
	background:green;
	background-image :repeating-linear-gradient(0deg,turquoise 0,transparent, transparent 20px);
	height:100%;
	width:100%;
	color:rgba(255,255,255,0.5);
	display:table;
}
body {

gcyrillus

/* splash , japanized kiwi */
html {height:100%;width:100%;display:table;background:#A0CE13;}
body {display:table-cell;vertical-align:middle;}
nav            	{padding:10px; width:600px;margin:auto;
				 position:relative;
				 background:
				 radial-gradient( yellow , #A0CE13 68px, white 70px , green 76px, transparent 80px) no-repeat,
				 linear-gradient(90deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%)  ,
				 linear-gradient(10deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(-10deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,

gcyrillus

/* vertical-horizontal-centering , display through CSS 2.1 or 3 if understood by browser 
this include I8 and above, opera, FF, Saf, Ch, etc ... */
html,body {
display:table; 					/* today */
display:flex;  					/* tomorrow & only for body */
height:100%;					/* today & tomorrow */
width:100%;						/* today only */
margin:0;}
body {
display:table-cell;				/* today */

gcyrillus

/* center legend */
legend {font-size:30px;
    font-weight:400;
    border-bottom:#e45f56 solid 5px; 
    margin-left:35.7%;
    }
form { color:#666;
    width:310px;
    text-align:center;
    }

gcyrillus

/* Chess board CSS3  */
html {width:100%;height:100%;display:table;}
body {display:table-cell;height:100%;vertical-align:middle;}
.eaten {width:411px;;height:2.8em;border:1px solid;margin:0 auto;font-size:25px;}
.eaten span {display:inline-block;transform : rotate(-45deg);}
table {widh:80%;margin:auto;table-layout:fixed;border-collapse:collapse;box-shadow:0 0  1px;background:#def}
th, td {width:10%;table-layout:fixed;border:1px solid;vertical-align:middle;padding:0;}
table tr:nth-child(1n) td span:nth-child(1n) {display:inline-block;width:100%;text-align:center;font-size:30px;background:transparent}
img {max-width:100%;vertical-align:top;width:100%;height:100%;max-height:100%;opacity:0.5;}
tr:nth-child(odd) :nth-child(odd),tr:nth-child(even) :nth-child(even),th{background:#06a;}

gcyrillus

/* animation marquee like: animation + attr data- */
 div {text-align:center;}
 p {display:inline-block;margin:3em auto;border:double;background:orange;padding:5px 0;
 position:relative;overflow:hidden;}
 strong {display:block;animation:linear  marqueelike 12s infinite ;margin-left:-100%;padding:0 5px;text-align:left;}
 strong:after {content:attr(data-text);position:absolute;white-space:nowrap;padding-left:10px;color:#555;}
 @keyframes marqueelike {
 0%, 100% {margin-left:0;}
 99.99% {margin-left:-100%;}
 }

gcyrillus

/* animation marquee like: animation + attr data- */
 div {text-align:center;}
 p , article{display:inline-block;margin:3em auto;border:double;background:orange;padding:5px 0;
 position:relative;overflow:hidden;table-layout:fixed; box-shadow:0 0 15px green}
 strong {display:block;animation:linear  marqueelike 12s infinite ;margin-left:-100%;padding:0 5px;text-align:left;}
 strong:after {content:attr(data-text);position:absolute;white-space:nowrap;padding-left:10px;}
 @keyframes marqueelike {
 0%, 100% {margin-left:0;}
 99.99% {margin-left:-100%;}
 }