Skip to content

Instantly share code, notes, and snippets.

View xav76's full-sized avatar

xav76

View GitHub Profile
@xav76
xav76 / index.slim
Created October 23, 2012 17:51
A CodePen by xav76. Improved Page Flipping Effect - Hey i saw Page Fan pen of McCray and really liked the idea, however i did not like that it was static :) so i improved it a bit with javascript
body
.page-w
div.page.page1
div.title 1
div.content
h2 Howdy Page 1
image src="http://dummyimage.com/190x90/593446/fff"
p Cras sollicitudin imperdiet diam at venenatis. Vivamus turpis lectus, elementum at bibendum et, condimentum non lorem. Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.
div.page.page2
div.title 2
@xav76
xav76 / index.html
Created October 23, 2012 17:52
A CodePen by Stuart Robson. Responsive Accordian to Accordian - A constant work in progress In its most basic form for you to adapt, refine and make better for the greater good
<h2>Responsive Vertical Accordian to Horizontal Accordian</h2>
<p>by <a href="http://twitter.com/sturobson">@sturobson</a></p>
<ul id="nav">
<li><a href="#">Item 1</a>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
</section>
</li>
<li><a href="#">Item 2</a>
@xav76
xav76 / index.markdown
Created October 23, 2012 18:00
A CodePen by bookcasey. 3D Text in Sass - 3D text effect using CSS3 text-shadow made easier to maintain with @for directive in Sass. Inspired by @mdo.

#3D Text in Sass

Inspired by @mdo

@xav76
xav76 / index.html
Created October 23, 2012 18:02
A CodePen by luizfelipe95.
<div class="controls">
<header>
<h1>Ondas em linhas</h1>
</header>
<h2>Controls</h2>
<label>Size: </label>
<input id="size" type="range" min="10" value="50"/>
<label>Speed: </label>
<input id="speed" type="range" value="5"/>
<label>Rotate: </label>
@xav76
xav76 / index.html
Created October 23, 2012 18:07
A CodePen by xav76. Push / Check (inspired) - Inspired by a dribbble shot create by Diego Monzon more info: http://dribbble.com/shots/774883-Push-Check?list=following
</br></br>
<div id="warp">
Inspired CSS version of Push / Check
<div class="minimal push">
<label class="check" >
<input class="push-btn" type="checkbox" name="push-btn" value="" checked="checked">PUSH
</label>
</div>
</br></br>
<div class="push">
@xav76
xav76 / index.html
Created October 23, 2012 18:08
A CodePen by Avi Kohn. CSS image slider w/ next/prev buttons - A 100% pure CSS image slider with previous/next buttons and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.
<!-- NOTE: None of the included images are mine and I take no credit for them!! -->
<ul id="body">
<input type="radio" name="radio-btn" id="img-1" checked />
<li id="img-container">
<div id="img-inner">
<img src="http://farm9.staticflickr.com/8043/8098759802_6da1ff5538_z.jpg">
</div>
<label for="img-6" class="sb-bignav" title="Previous"></label>
<label for="img-2" class="sb-bignav" title="Next"></label>
</li>
@xav76
xav76 / index.html
Created October 23, 2012 18:08
A CodePen by xav76.
<!DOCTYPE html>
<html>
<head>
<title>UI Transparent</title>
</head>
<body>
<div class="container">
<h1>UI Transparent</h1>
@xav76
xav76 / index.html
Created October 23, 2012 18:10
A CodePen by Pete. CSS3 Scaling Thumbnails - For my portfolio I wanted a grid of thumbnails that scaleZ on hover, overlapping their siblings. Added some blur and some scaling effect to the thumb title to create a neat depth effect. Still tweaking for mobi
<a href="#" class="thumbnail green"><img src="http://www.photographyblogger.net/wp-content/uploads/2011/02/0410.jpg"><span class="title">Thumb Title</span></a>
<a href="#" class="thumbnail blue"><img src="http://25.media.tumblr.com/tumblr_m4zl640xqN1rxrpico2_1280.jpg"><span class="title">Thumb Title</span></a>
<a href="#" class="thumbnail red"><img src="http://3.bp.blogspot.com/-fZzVHhusP04/Ta-RoCMJW2I/AAAAAAAABxc/ehuIytZernY/s1600/FROGpoison-dart-frog_5869_600x450.jpg"><span class="title">Thumb Title</span></a>
<a href="#" class="thumbnail purple"><img src="http://1.bp.blogspot.com/-_DbIIL07P6c/Ta-TQOMl0qI/AAAAAAAABxo/jSW1GbNfrj0/s1600/frog-picture.jpg"><span class="title">Thumb Title</span></a>
@xav76
xav76 / index.html
Created October 23, 2012 18:11
A CodePen by Tim Holman. Resizer - An attempt to improve the user experience of the text box, by allowing the text to shrink to fit when it is full... and a slightly different focus effect.
<input type='text' id='resizer' placeholder='Fill me with text.'>
<!--
Resizing text, text box
A little experiment to improve the user experience of the text box by:
1. Using a focusing shadow effect when the box is being used
@xav76
xav76 / index.html
Created October 23, 2012 18:14
A CodePen by Emad Elsaid. Page Flip modal dialog - an awesome modal dialog shows itself by flipping the whole page and appears on the back like a badge. i made a blog post about it here : http://www.blazeboy.me/2012/10/16/flip-page-modal-dialog/
<div class="flip-container">
<div class="flipper">
<div class="front">
<div id="header" class="clearfix">
<div id="logo">
Flip Dialog
</div>
<div id="menu">
<ul>