css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

responsive credit card icons made with HTML and CSS. Shrink screen to see the credit cards shrink proportionately

Sizing the containing module with REM and all internals with EM. This allows for the re-sizing of just one font-size to control the spacing and sizing of all child elements.

OK so there is one svg for outlined text but could work with just white.

Comments

  1. i would really love the actual icons to change a little bit when they're shrunk to remove some of the details that might just be distracting at that size anyway. like, at a certain size, the text of "master card" is replaced with just white bars where the text would be (once the text is too small to read anyway) or even removed entirely once it gets small enough. i think that is the definition of true responsiveness. here is an example of what i mean, although i don't like how they made the art style change redically at each breakpoint.

  2. @wbarlow while I agree that some changes can be made when you are actually using these icons in a project to take away certain details, I built this pen to illustrate the effectiveness of using relative units. By changing one font size I was able to shrink down multiple values proportionately which is what I was going for with this pen.

  3. @davidicus that's fair. kudos for a kickass project and exceptionally clean CSS!

  4. This is really cool, well done. Good demonstration of relative units. Obviously this would be impractical to use in production... but it has me curious about what use it could be in an animation of some kind, like the card materializing piece by piece, etc. Anyway, cool cards.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...