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

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

SASS Mixin for Creating CSS Triangles

I feel like one of the most common shapes that we can reliably create with CSS vs images is the triangle. One of the reasons for this is that it works as far back as IE7 (IE6 works, but doesn't support background-color: transparent ). Another is how frequently a little triangle icon can be used (e.g., ascending/descending buttons, expanding menus, open/close state, etc.) I'm not going to cover the techniques of creating triangles with CSS . That's been done already , and probably better than I would do it. What I'm going to share with you, is a little SASS mixin that I've been using to generate triangles. See the Pen SASS Triangles by Thomas Pietrosanti ( @Rykus0 ) on CodePen . I'm using a SASS placeholder ( %triangle-base ) as a base to contain the common styles. This makes it easy to extend without generating tons of extra code each time I want to make a triangle. When this compiles, it creates a rule that applies to all of th...
Post a Comment
Read more

SASS Converts Zero Opacity 'rgba' To 'transparent'

I recently had a strange problem after updating SASS. I have a modal dialog with a semi-transparent overlay behind it. For modern browsers, I'm using a CSS transition from rgba(0,0,0,0) to rgba(0,0,0,.5) For older browsers (namely IE8), I'm using some JavaScript to apply the transparency and animate the transition. To make sure the background gets set correctly, I'm using the standard fallback strategy of defining the background as background: rgb(0,0,0); right before the rgba line. This worked fine, until SASS optimized my code by changing background: rgba(0,0,0,0); to background: transparent; The reason? It's 2 characters shorter. Yes, we've now saved 2 bytes of easily compressible text in exchange for breaking my code. Why did it break? Well, if you haven't already figured it out, normally a browser that doesn't support rgba will simply skip that property and move on. But transparent is supported. So now, instead of h...
Post a Comment
Read more