JSFiddle

  • Radial image reflection with css only with alternatives

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

    <img class="webkit" src="http://lorempixel.com/300/100/city/" />
    <div class="reflection" title="Reflection">
        <img src="http://lorempixel.com/300/100/city/" />
    </div>
  • Crop headline with CSS

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

    <h1>Spectent diu. Hunc obliquis his supplex!</h1>
  • Marquee - Old stylish HTML tag

    I'm loving it!

    <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="1" style="color:#000000;font-size:36px;font-family:Helvetica;" onmouseover="this.stop();" onmouseout="this.start();">
    Spectent diu. Hunc obliquis his supplex! Nix eurus dextra nulli. Dextra dominari sectamque. Aberant instabilis invasit declivia ambitae fidem recens ...</marquee>
  • Show difference between CSS visible: hidden and display none

    Show difference between CSS visible: hidden and display none.

    <div class="none">None space</div>
    <div class="hide">Hidden space</div>
    <div>Hello space!</div>
  • Bootstrap tab navigation from headlines

    jQuery 2.1.0, HTML, SCSS, JavaScript

    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">Spectent diu. Hunc obliquis his supplex! Nix eurus dextra nulli. Dextra dominari sectamque. Aberant instabilis invasit declivia ...</div></div></!--></!-->
  • D3js Playground - Let’s Make a Bar Chart SVG

    Play with d3js

    var data = [4, 8, 15, 16, 23, 42];
    
    var width = 420,
        barHeight = 40;
    
    var x = d3.scale.linear()
        .domain([0 ...
  • D3js Playground - Let’s Make a Bar Chart

    Play with d3js

    // Data
    var data = [4, 8, 15, 16, 23, 42,34,12,23,30,21,5,13,7,21,17,11 ...
  • D3js Playground #5 is the latest revision

    Play with d3js

    /* DOM Element selector */
    d3.select("body").style("background-color", "#189");
    
    /* Random Color */
    d3.selectAll("p").style("color", function() {
      return "hsl(" + Math ...
  • streamingvideoprovider playground #2 is the latest revision

    Test all settings from default player

    var vars = {
        clip_id: "euis6sdzh008",
        player_color1: "#c8c8c8",
        player_color: "#a6a6a6",
        transparent: "false",
        pause: "1",
        repeat: "",
        bg_color: "#FFFFFF",
        fs_mode: "2",
        no_fullscreen: "0",
        no_controls ...
  • BxSlider #175 is the latest revision

    BxSlider test all options online. Have fun!

      $(document).ready(function () {
    
          $('.bxslider').bxSlider({
              mode: 'horizontal',
              slideSelector: '',
              infiniteLoop: true,
              hideControlOnEnd: true,
              speed: 200,
              easing: null,
              slideMargin: 0,
              startSlide: 0 ...