Schepp's public fiddles
-
bBqdG
No-Library (pure JS), HTML, CSS, JavaScript
-
e-mail address obfuscation
No-Library (pure JS), HTML, CSS, JavaScript
-
Q6
No-Library (pure JS), HTML, CSS, JavaScript
-
Lazy Loading of Nivo Slider
Putting all images and the JavaScript for Nivo Slider into your HTML right from the start blocks the browser from loading more important stuff. Here is an example how you can lazy load all of it. And it degrades gracefully when JS is disabled.
-
Manual DOMContentLoaded trigger
jQuery 1.6.2, HTML, CSS, JavaScript
-
Eknxc
No-Library (pure JS), HTML, CSS, JavaScript
-
m62Up
jQuery 1.6.2, HTML, CSS, JavaScript
-
Client side WebP switch
+ Fallback for disabled JavaScript
-
WebP JavaScript feature detection
No-Library (pure JS), HTML, CSS, JavaScript
-
Complex gradients done with box-shadow
This enables horizontal & vertical linear-gradients in IE9 and also fixes visual fidelity problems in other browsers (FF + Chrome)
-
IE Text Rotation w/ Cleartype preserve
Set a background of possible or set background-color and color key it away before rotation.
-
Gradient + Rotation w/o Jagginess
When you apply a standard gradient to an element and rotate it, you get jagged edges. Solution: replace gradient with inset box-shadow!
-
TUBvX
No-Library (pure JS), HTML, CSS, JavaScript
-
Combobox
Thierry Koblentz and Lea Verou reminded me that I did a nice combobox-trick some weeks back in a project of mine. Here is the technique applied to their HTML.
-
X-browser CSS fake reflection (IE9+)
Since only WebKit knows about box-reflect-property we can only trick the eye into seeing a reflection for other browsers.
-
X-browser "wet floor" image reflection
A cross-browser (IE6+) image reflection technique using only HTML and CSS.
-
Rounded borders and gradients in IE9
A CSS-only technique to have IE9 nicely display rounded borders together with background-gradients.