A Pen by David Torres on CodePen.
Amir Naeem amirnaeem
Testing out CSS capabilities for a single div. This is my first attempt at creating CSS art.
Forked from Adam Towle's Pen One div CSS camera.
A Pen by Amir Naeem on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| %section | |
| %ul | |
| %li | |
| -5.times do | |
| .signal | |
| %li | |
| AT&T | |
| %li | |
| <i class="fa fa-wifi"></i> | |
| %li |
amirnaeem
/ CSS-Shapes-experiment-(webkit-only).markdown
Created
September 21, 2014 16:54
A Pen by Rachel Smith.
** Please refresh if you resize :) I may update to auto resize soon. **
I wanted to do something with CSS shapes so here it is. If you don't know what CSS Shapes are about then check out http://alistapart.com/article/css-shapes-101. There is little browser support for shapes right now so this is a Chrome/Safari only demo.
This layout/interaction was very heavily inspired cough cough by this site http://www.mcdonalds.co.uk/ukhome/testing/favourites-awards.html which was built by talented folks at http://www.goodboydigital.com/. Their implementation is in Canvas which is BY ALL MEANS the way to go for this sort of thing in production. I just wanted to give a glimpse in to the possibility of a future where we can literally bend DOM elements to our Will with CSS (also, I am a crazy person, clearly).
A Pen by Rachel Smith on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button class='push-button'>push it</button> |
amirnaeem
/ Pop-up-with-blurred-background-animation.markdown
Created
September 21, 2014 16:51
A Pen by Benjamin Dalton.
Here's a popup that appears while blurring out the body underneath. click the 'X' close on the popup and the blur transition back while the popup fades off.
Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or lightbox.
Uses CSS3 Filter (for blur) and CSS3 Animation for blur transitions. The jQuery is minimal in this iteration, simply used to fade in the pop-up and add and remove the CSS3 classes for blurring.
A Pen by Benjamin Dalton on CodePen.
amirnaeem
/ Suttell-Line-Animation.markdown
Created
September 21, 2014 16:51
A Pen by Isaac Suttell.
Animates the strokes of a svg using dasharray and dashoffset to make it appear like its being drawn. Uses bounce easing to add a slight forceful effect.
A Pen by Isaac Suttell on CodePen.
amirnaeem
/ 2-Sided-Digital-Business-Card.markdown
Created
September 21, 2014 16:46
A Pen by Jesse Couch.
Seen a lot of these, and just wanted to do my take on one. Pssst...click the profile icon. The background image uses a CSS filter, so it's the same image that is behind the avatar. Managed to get rid of the white edges that come with this by offsetting the position and adding to the width.
A Pen by Jesse Couch on CodePen.
Circular Calendar, made with Canvas & Javascript. Forked from this source http://jsfiddle.net/m1erickson/Q7S9L/ to make it dynamic and display the current date. Adapted by www.gartempe.com