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)

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

Labels:

Comments

Post a Comment

Popular posts from this blog

CSS line-height Units Explained

In Chris Coyier's recent article, " Fun with line-height! ", he mentions that we often use unitless values for line-height so that it's proportional to the font size. This is only part of the story, and I was reminded of a Stack Overflow question that got me investigating more about how line-height worked with regards to the various CSS units. If you're declaring the line-height on each element, you won't notice any difference. But if you're not crazy and using the first C of CSS (that's 'Cascading', by the way), then the inherited line-height might not work the way you expect. Disclaimer: This is my understanding after doing some research and testing. I may not be completely correct. TL;DR When using a relative unit (em, %), the line-height is calculated based on the font size of the element where the line-height is defined. This line-height is then inherited, unchanged, by each of its descendants. So we end up with a line...
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

Be Careful Using SASS @extend, CSS3 Selectors, and IE8

I recently ran into a situation where some of my styles were broken in Internet Explorer 8. What makes this different from all the other times my styles broke in IE8 was that, as far as I could tell, it was correct. Consider the following code: %highlighted { background-color: #ff0; color: #333; } .keyword.is-active { @extend %highlighted; padding: 10px; text-transform: uppercase; } No problem, right? Then why isn't it working? I wasn't sure, until I looked at the compiled CSS and saw something like this: .some-list:nth-child(2n), .is-highlighted, .keyword.is-active { background-color: #ff0; color: #333; } .keyword.is-active { padding: 10px; text-transform: uppercase; } Since IE8 doesn't support the css selector nth-child , it ignores the entire rule . Without looking at the final output, there's no way of knowing if this will happen ahead of time. So what can you do? Well,...
Post a Comment
Read more