Skip to content

Instantly share code, notes, and snippets.

View primaapriansyah's full-sized avatar

Prima Utama Apriansyah primaapriansyah

8 followers · 30 following
View GitHub Profile
@primaapriansyah
primaapriansyah / index.html
Created December 21, 2012 23:23
A CodePen by foleyatwork. Smooth Ken Burns Effect Using the Transition Property
<section class="header">
<h1>Smooth Ken Burns Effect Using the Transition Property</h1>
<p><a href="http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/">Paul Irish</a> on why translate is better than positioning to move elements. The same is true for a lot of transition values and their counterparts. The first image shows a Ken Burns effect using transition:scale;. The second uses zoom; notice how at the very end of the animation the image is pixel fit, causing a stuttering effect on the bottom.</p>
</section>
<div class="imageWrapper"><div class="image">
<img src="http://static.squarespace.com/static/4fb50a18e4b0f2fffeb51dda/4fb50a19e4b0f2fffeb51ddf/50255b3184ae111bdb329ce6/1344625457128/sqspc2-1.jpg?format=1500w" />
</div></div>
<div class="imageWrapperZoom"><div class="imageZoom">
<img src="http://static.squarespace.com/static/4fb50a18e4b0f2fffeb51dda/4fb50a19e4b0f2fffeb51ddf/50255b3184ae111bdb329ce6/1344625457128/sqspc2-1.jpg?format=1500w" />
</div></div>
@primaapriansyah
primaapriansyah / index.haml
Created December 21, 2012 23:23
A CodePen by spacekat. GALACTICA - webkit-only knockout using Chris Coyier's technique: http://css-tricks.com/animated-knockout-letters/ Using the Google web font Krona One.
.header
%h1.galaxy
GALACTICA
@primaapriansyah
primaapriansyah / index.html
Created December 21, 2012 23:24
A CodePen by Brian Sweeting.
<div class="layouts_grid" id="layouts_grid">
<ul>
<li class="layout_block" data-id="7" data-row="1" data-col="1" data-sizex="1" data-sizey="1" style="background-color: #D24726;">
<div class="remove_element">X</div>
<div class="info">
<span class="block_name">Logo</span>
</div>
</li>
<li class="layout_block" data-id="2" data-row="1" data-col="2" data-sizex="5" data-sizey="1" style="background-color: #15992A;">
<div class="remove_element">X</div>
@primaapriansyah
primaapriansyah / index.html
Created December 21, 2012 23:24
A CodePen by Jason Brown. Its snowing! - Super simple snow I threw together for an answer on stack overflow. Added some simple mouse interaction to make flakes move away from the cursor.
<canvas id="canvas"></canvas>
@primaapriansyah
primaapriansyah / index.html
Created December 21, 2012 23:25
A CodePen by Micah Godbolt. Responsive Equal Height Divs - This pattern is a fork of a CSS Tricks Post To adapt this pattern for responsive use I placed it into a function and called it each time the window was resized. One note is that you must reset the div heights before you take a new measurement. Pros The Equal Height Rows Designers Crave -…
<section class="main">
<article>Gally maroon schooner wench provost fathom haul wind parrel chantey brigantine. Jack lass ho coffer sutler gabion fire in the hole spike yo-ho-ho Sail ho. </article>
<article>Ho six pounders Arr black spot port jib hogshead spirits bilge rat Admiral of the Black. Blow the man down measured fer yer chains hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer. </article>
<article>Lass gangplank bilged on her anchor bring a spring upon her cable rigging lookout Admiral of the Black sheet wench rutters. </article>
<article> Driver rope's end port spirits cog fore ye snow sloop hogshead. Belaying pin yo-ho-ho bilge rat come about squiffy spirits jack galleon Brethren of the Coast hang the jib.</article>
<article>Hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer. </article>
<article>Plate Fleet strike colors nipper league warp to go on </article>
<article>Admiral of the Black sheet wench rutters.</article>
<article
@primaapriansyah
primaapriansyah / index.html
Created December 21, 2012 23:27
A CodePen by Bennett Feely. Glowing 3D Text
<figure>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
<h1>3d CSS GLOW</h1>
@primaapriansyah
primaapriansyah / dabblet.css
Created January 16, 2013 03:13 — forked from anonymous/dabblet.css
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
@primaapriansyah
primaapriansyah / dabblet.css
Created February 4, 2013 08:03 — forked from dgmid/dabblet.css
Animated HTML5 / CSS3 image caption - Example 4
/**
* Animated HTML5 / CSS3 image caption - Example 4
*/
/* page styles */
body{
background: #fff;
min-height:100%;
}
@primaapriansyah
primaapriansyah / dabblet.css
Created February 4, 2013 08:05 — forked from dgmid/dabblet.css
CSS text-shadows - Example 2
/**
* CSS text-shadows - Example 2
*/
/* page styles */
@font-face {
font-family: 'ChunkFiveRegular';
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/chunkfive-webfont.eot');
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/chunkfive-webfont.eot?iefix') format('eot'),
@primaapriansyah
primaapriansyah / dabblet.css
Created February 4, 2013 08:05 — forked from dgmid/dabblet.css
CSS text-shadows - Example 3
/**
* CSS text-shadows - Example 3
*/
/* page styles */
@font-face {
font-family: 'Museo700';
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/museo700-regular-webfont.eot');
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/museo700-regular-webfont.eot?iefix') format('eot'),