JSFiddle

Ankith's public fiddles

• Good Night

  Simple night mode with JS

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Animating Words / CSS

  animation delay set with CSS variables and calc with a little bit of javascript to wrap words

• Private fiddle Extra
• Delete fiddle
Groups Extra
• HTML/CSS Navigation

  navigating sections using the checked radio state

• Private fiddle Extra
• Delete fiddle
Groups Extra
• CSS Variables / Understanding Fallback

  understanding fallback and substitution

• Private fiddle Extra
• Delete fiddle
Groups Extra
• HTML5 Video

  Basic player with custom controls

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Understanding CSS Transform Rendering

  Chrome and Firefox differ in how the character is rendered. note the shift from vector rendering to a more rasterized state

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Navigation Off the Canvas

  Is nice.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Page loader II

  Sequential animation transform with perspective properties.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Page Loader

  Template page loader. Cubic-bezier easing. Pure CSS.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• SVG text as Data URI / CSS Background Animations

  Using text as CSS backgrounds with Data-URI and SVG and an attempt to understand infinite loop/wrap behaviour.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Pseudo and Void Elements / HTML Experiment

  A look at Pseudo elements rendered inside void elements.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Feature Queries / CSS

  Using the supports at-rule. Detects if the value syntax is valid for a property in the current browser.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Browser Console / API

  Browser console API. From formatting the output to displaying tabular data.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Non Scrollable Overflow

  Block start and inline start sides in the visual formatting model do not allow any scrolling beyond them. All UA will clip overflow in that direction.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Test Case : Inline and Absolute Position

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Faking Skewed Layouts with CSS

  Using pseudo elements with border triangles to create a faux skewed look.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Word Breaking / wbr & shy

  Using wbr tag for possible line breaks and the shy as a soft hyphen that is visible on word-break.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• To Infinity and Beyond

  Cycling through elements with setInterval and a little bit of jQuery.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Pure CSS Modal with JavaScript History Control

  Using target selector and empty fragment identifiers, we can trigger a change in properties associated with a modal. Using animations we can also attach a simple fade in.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Flat Design With Text Shadows

  Increment the text shadow by calculated shifts and apply overflow hidden to prevent the last ugly bit from showing up.

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• 2
• ▶︎
• 3