Skip to content

Instantly share code, notes, and snippets.

@effulgence
effulgence / index.html
Created December 2, 2012 05:07
A CodePen by Hugo Giraudel. CSS temperature controler - If someone wants to fork and add some JS / animation to make the whole thing more dynamic, please go and show me. :) Inspired by R.sky work on Dribbble : http://dribbble.com/shots/657843-Temperature-
<div class="wrapper">
<div class="background">
<div class="mask">
<div class="roll"></div>
</div>
<ul>
<li>25</li>
<li>50</li>
<li>75</li>
</ul>
@effulgence
effulgence / index.html
Created December 2, 2012 03:50
A CodePen by ryan2611.
<div id="content">
<img class="avatar" src="http://i.imgur.com/r0mcJ.jpg alt="Ryan Murphy" width="70px" height="70px">
<h1>
RYAN MURPHY</h1>
<h2> UI DESIGNER</h2>
<ul id="work">DIVISIONS OF WORK
<li><a href="http://dribbble.com/ryanAmurphy/projects/93876-UI-Stuff">USER INTERFACE</a></li>
<li><a href="http://dribbble.com/ryanAmurphy/projects/93875-Typography">TYPOGRAPHY</a></li>
@effulgence
effulgence / index.html
Created December 2, 2012 00:12
A CodePen by Neil Kinnish. - This is a fork of Chris Coyiers Pen... http://codepen.io/chriscoyier/pen/jIpCv - I just tweaked and removed spans
<a href="#" class="button blue">
Find Out<br>More
</a>
<a href="#" class="button yellow">
Pre-Order<br>Now
</a>
@effulgence
effulgence / index.html
Created December 2, 2012 00:05
A CodePen by Andrew Weeks. Responsive SVG graph - The graph line and (after a short delay) labels and tick marks remain undistorted as the graph resizes with the window. Lovely.
<h1>Responsive SVG graph demo</h1>
<svg class="graph">
<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<g transform="translate(30,0)">
<g class="x axis" transform="translate(0,925)">
<g style="opacity: 1;" transform="translate(0,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 1</text></g><g style="opacity: 1;" transform="translate(61.333333333333336,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 3</text></g><g style="opacity: 1;" transform="translate(122.66666666666667,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 5</text></g><g style="opacity: 1;" transform="translate(184,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 7</text></g><g style="opacity: 1;" transform="translate(245.33333333333334,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 9</text><
@effulgence
effulgence / index.html
Created November 17, 2012 22:49
A CodePen by mutukrish. Set of Icons made of css
<div id="bar">
<div class="icon icon-minus">
<span class="name">Minus</span>
</div>
<div class="icon icon-plus">
<span class="name">Plus</span>
</div>
@effulgence
effulgence / index.html
Created November 17, 2012 22:02
A CodePen by Adem ilter. Countdown Clock
<div class="container">
<ul class="flip minutePlay">
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
@effulgence
effulgence / _media-queries.scss
Created June 11, 2012 15:40 — forked from anthonyshort/_media-queries.scss
Media Queries in Sass
// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break