tupham81

Fake 3d Image - Three.js

Processing a depth map image together with a normal image using a fragment shader in order to make a fake 3d image with depth.

A Pen by Chris Johnson on CodePen.

License.

tupham81

<div
     id="app"
     class="ad-App">
</div>

tupham81

Daily UI #016 | Pop-up/Overlay

This is a popup overlay design for your portfolio! Display your projects/work in detail with a click of a button.

A Pen by Julie Park on CodePen.

License.

tupham81

Cross-browser QRCode

QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM. QRCode.js has no dependencies.

Check it out http://davidshimjs.github.com/qrcodejs/

A Pen by Sangmin, Shim on CodePen.

License.

tupham81

  <div class="slider" data-state="0">  
   
      <svg id="prev" viewBox="0 0 31 101" version="1.1" class="pfeil prev left"><path d="M 0,0 30,50 0,100"></path></svg>
      <svg id="next" viewBox="0 0 31 101" version="1.1" class="pfeil next left"><path d="M 0,0 30,50 0,100"></path></svg>
    
    <div class="status">
      <div class="stat" data-key="0"></div>
      <div class="stat" data-key="1"></div>
      <div class="stat" data-key="2"></div>
      <div class="stat" data-key="3"></div>

tupham81

Fluid Grid Using Text-align: Justify

A new technique for responsive grids I've been working on which uses inline-block and text-align: justify.

Take a look at this article for an explanation of the fundamentals of the technique:

http://www.barrelny.com/blog/text-align-justify-and-rwd/

Essentially, margins are calculated by the browser and never specified in the CSS. This saves a lot of tedious work! Also by not having to use floats, clearfixes, or nth-child, we avoid many common problems associated with more traditional methods.

tupham81

Create QR Code

Create QR Code

A Pen by Simon Breiter on CodePen.

License.

tupham81

QR code generating with vanilla js

QR code generating with vanilla js (SVG Element, Data URI PNG String, HTML table element) https://github.com/englishextra/qrjs

A Pen by englishextra on CodePen.

License.

tupham81

<div class="wrapper">
<h1>Stopwatch</h1>
<h2>Vanilla JavaScript Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div> 

tupham81

.card
 %input#rad1{:checked => "checked", :name => "rad", :type => "radio"}/
 %div{:for => "rad1"}
  %h1 1
  .btn
 %input#rad2{:name => "rad", :type => "radio"}/
 %div{:for => "rad2"}
  %h1 2
  .btn
 %input#rad3{:name => "rad", :type => "radio"}/