splosch

<div class="rating">
  <input type="radio" name="rating"><label>Really Bad</label> 
  <input type="radio" name="rating"><label>Bad</label> 
  <input type="radio" name="rating"><label>Ok</label> 
  <input type="radio" checked name="rating"><label>Good</label> 
  <input type="radio" name="rating"><label>Really Good</label> 
</div>

splosch

CSS riddle

I tried to find a way to explain more complicated CSS rulesets with a CSS riddle.

A Pen by Mario Winkler on CodePen.

License.

splosch

<div class="fancy-border-outer">
	<p class="fancy-border-inner">text with colorful gradient frame</p>
</div>
 
<div class="fancy-border-outer">
	<p class="fancy-border-inner">text with colorful <br> gradient frame <br> Testbla</p>
</div>

splosch

SASS / SCSS: colorloop

given a list of hex-colors this SASS code allows to color siblings while iterating through this color list

A Pen by Mario Winkler on CodePen.

License.

splosch

Cross-Browser Image Blur With Transition

Adapted cross browser blurry image solution

Cross-browser blur for images: CSS3 filters for Webkit, MS proprietary code for IE, SVG filter for Firefox. Hover transition to sharpen. More details in the related entry on my blog.

Forked from Dudley Storey's Pen Cross-Browser Image Blur With Transition.

A Pen by Mario Winkler on CodePen.

splosch

<h1>Canvas basic layers demo</h1>
<p>powerded by kinetic.js</p>

<a href="http://jsfiddle.net/splosch/sezph315/1/">Working Demo (JSFiddle)</a>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>

<div id="container"></div>

splosch

(function(window, document, JSON){
  "use strict";
  var SEP = '|', ua, opera, ie;
  /* 
   * Collect Browser & Device Data
   */
  var Collector = {
    /*
     * MD5 Checksum calculation
     */

splosch

<button class="cct_runtime_3 btn">3</button>
<button class="cct_runtime_3 btn active">3</button>
<button class="cct_runtime_6 btn">6</button>
<button class="cct_runtime_6 btn active">6</button>
<button class="cct_runtime_12 btn">12</button>
<button class="cct_runtime_12 btn active">12</button>
<button class="cct_runtime_18 btn">18</button>
<button class="cct_runtime_18 btn active">18</button>
<button class="cct_runtime_24 btn">24</button>
<button class="cct_runtime_24 btn active">24</button>

splosch

Flip the Coin - Coding Challenge

A Pen by Mario Winkler on CodePen.

License.

splosch

javascript:void !function(e,t,n,r,i,s){while(n--&&(i=t[n])>e);s=r.style,s.position="fixed",s.zIndex=-1>>>1,s.top=s.left="50%",s.marginTop=s.marginLeft=i/-2+"px",r.src="http://chart.apis.google.com/chart?cht=qr&chld=H|0&chs="+i+"x"+i+"&chl="+escape(location)}(Math.min(top.innerHeight,top.innerWidth),[100,150,200,250,300,350,400,500],8,document.body.appendChild(new Image))