9 Creating a virtual credit card

 

This chapter covers

  • Using Flexbox and position in layout
  • Working with background images and sizing
  • Loading and applying local fonts
  • Using transitions and the backface-visibility property to create a 3D effect
  • Working with additional styles such as the text-shadow and border-radius properties

As we saw in chapter 3, animation in CSS opens lots of opportunities to create interactive web experiences. In chapter 3, we used animations to give users the sense that something was happening in the background as they waited for a task to complete. Now we’ll use animation to respond to users’ interactions and create a flip effect for a credit card image. On one side, the animation will show the front of a credit card; on hover or on click for mobile devices, it will flip to show the back of the credit card.

This effect is useful to users, as we’re re-creating what their credit cards may look like, showing which information from the cards they need to enter when buying something online, such as the expiration date or the security code. Animation is a way to represent something in real life by re-creating it for the web. This project goes hand in hand with the one in chapter 8, in which we designed a checkout cart.

9.1 Getting started

9.2 Creating the layout

9.2.1 Sizing the card

9.2.2 Styling the front of the card

9.2.3 Laying out the back of the card

9.3 Working with background images

9.3.1 Background property shorthand

9.3.2 Text color

9.4 Typography

9.4.1 @font-face

9.4.2 Creating fallbacks using @supports

9.4.3 Font sizing and typography improvements

9.5 Creating the flipping-over effect

9.5.1 Position

9.5.2 Transitions and backface-visibility