Tu Pham 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.

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.

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.

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.

Create QR Code

A Pen by Simon Breiter on CodePen.

License.

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.

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

	<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>

	<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>

	.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"}/