Skip to main content

Fanning Cards with CSS

I was thinking of fanning out some cards to demonstrate options for one of our sites, and I wanted to do it in CSS, so I came up with this (Plan for fall-back in non-supporting browsers is just a button that shows the options). The plan is to show all options in full when the stack is clicked on, but right now it just fans out on hover.

This isn't anything terribly ground-breaking or difficult, but it is a nice, fun effect so I thought I'd share.

Edit:

I updated the link and code here to point to an updated version of the code that uses the css3 :target selector to spread out the cards when a link is clicked, and collapse them when it's closed.

(See the full page example for better effect)

See the Pen Fanning Cards by Thomas Pietrosanti (@Rykus0) on CodePen.

I used SASS to do handle some of the incremental and procedural parts, but did not leverage Compass, since I am not using it.

Really, all I'm doing is absolutely positioning divs on top of each other, making the transition origin to the bottom center, and rotating around the Z axis between -45° and 45° in regular intervals (determined by the number of cards).

I also added a drop-shadow for kicks that gets bigger as the cards go up - though this makes it look more like stairs, it does add a little depth.

Note that there was no javascript used in this example!

For an example of this in the wild, see the AWV Architectural Finishes page

Labels:

Comments

Post a Comment

Popular posts from this blog

Flags vs Vendor Prefixes for Experimental CSS

Google recently announced that it will be switching Chrome's rendering engine to a fork of Webkit, called “Blink”. If you're interested, you can read their blog post about Blink . One of the changes we will be seeing in Blink, is the use of browser flags in place of vendor prefixes . What this means, is that rather than prefixing experimental CSS with -webkit-, -moz-, -ms-, -o-, -khtml-, etc.; We will be required to enable these attributes using a flag in the browser (like the ones currently at chrome://flags). If you ask me, both ways have their advantages and disadvantages. Though, in the end, I lean towards the flags over the vendor prefixes, and here's why: #1 Code Bloat On average, using CSS with vendor prefixes requires writing it 5 times . Every time you use it . #2 Future Friendly Eventually, prefixed code will be replaced by the unprefixed code. #3 Browser Dev Friendly Browsers tend to continue to support the prefixed code, even if it doesn...
Post a Comment
Read more

Element.focus() in IE9 running Jasmine tests with Karma

I recently udpated our Jasmine unit tests to run in Karma ; expanding our browser coverage, adding code coverage reports , and using fixtures for testing DOM manipulation . One of my tests kept failing in IE9, but only when I ran from the console. If I attempted to debug in the browser, everything passed. It turns out that IE9 (at least) needed a few ms to catch it's breath before correctly focusing on the starting element. To do this, I just added a 100ms delay before each test ran (Using Jasmine 2.3). beforeEach(function(done){ loadFixtures('myfixture.html'); // Setting focus in IE requires a delay to work correctly! setTimeout(function(){ done(); }, 100); });
Post a Comment
Read more

Get width and height of a remote image with VB .NET

The Problem I wanted to grab the width and height of an image that was on a remote server. I've done this with PHP, but never in .NET. The Solution I did a little digging and came across this code (slightly modified for my own purposes). Dim request As HttpWebRequest = DirectCast(WebRequest.Create(URL), HttpWebRequest) request.Method = "GET" request.Accept = "image/*" Dim response As HttpWebResponse = DirectCast(request.GetResponse(), HttpWebResponse) Dim s As Stream = response.GetResponseStream() Dim bmp As New Bitmap(s) Width = bmp.Width Height = bmp.Height
Post a Comment
Read more