The CSS property, “card”, is pretty self-explanatory in the way that it allows you to create a type of digital card within a web page. Although, these cards can be customized in an infinite amount of ways and can end up being used very unexpectedly. They can contain both text and images, and even have other elements such as buttons within them. Nothing draws a viewer in quite like an animation on the page, and these cards can even have a variety of different movements. This property can be used anywhere from a simple online business card to an interactive online card game and more.

Basic CSS cards can be used to make any image or text stand out from the rest of the webpage. The HTML code for these cards is simply <div class=”card”>, with .card {} as the CSS customization code. You can even give a basic card a 3D appearance by using a box-shadow so it really stands out, but personally, my favorite element is the simple animations you can add to it to really make it pop. To have the card change when the cursor hovers over it, you can use the code .card:hover {}. Here’s an example of a card that produces a shadow when the cursor is on it.

See the Pen CSS Archaeology Card: Box Shadow by Shannon Salvaterra (@sws5822) on CodePen.

You can take the animation a step further by using a flip card, in which the card flips over when the cursor is on it. Slightly reformat the existing card HTML code to <div class=”flip-card”> and use .flip-card {} for the CSS customization. You can also change the direction and rotation of the card movement as well by using a CSS code similar to the one from the example below. That code is transform: rotateY(180deg):, in which you’re choosing the x or y-axis, along with the degree of rotation. You can select any combination of imagery or text for both the front and back of the card. In the HTML on the next line, you’ll need to then add the codes <div class=”flip-card-inner”>, which positions the front and back of the card, followed by <div class=”flip-card-front”> and <div class=”flip-card-back”> to specify which content is on the front versus the back of the card. 

See the Pen CSS Archaeology: Flip Card by Shannon Salvaterra (@sws5822) on CodePen.

Not only can these cards be used to attract attention, but they can be used for a professional appeal as well. The product/profile card can be useful in creating business cards to either link a customer to a product, or connect someone to a person’s contact information. These type of cards are made with the standard card CSS code and just adding your personal elements within them. Buttons can also be added to the card by adding <button> into the HTML element that you’d like it to appear in. A button’s appearance can also change with the hovering cursor by using button:hover {} in the CSS style code.

See the Pen CSS Archaeology: Profile/Product Card by Shannon Salvaterra (@sws5822) on CodePen.

These three examples are just some basic variations to the card property. Cards can be customized to the extreme and are used by some of the largest companies today in their advertising. Netflix.com uses the animation-card property to bring the screens on its website to life, where they insert video clips and animation that simulates scrolling through the movies and TV shows. The idea of a typical card on a website may seem a bit boring at first, but this example proves that they can be styled into some of the most eye-catching and outstanding sections a website has to offer.