Главная » Языки программирования

Css card with example

На чтение 10 мин
Содержание
  1. 107 Beautiful CSS Cards examples to improve your UI
  2. Card CSS examples
  3. Example 1: simple card design with HTML CSS
  4. HTML
  5. CSS
  6. Example 2: card with list items & two buttons
  7. HTML
  8. CSS
  9. Example 3: pricing card HTML CSS template
  10. HTML
  11. CSS
  12. Build HTML CSS projects
  13. Conclusion
  14. Popular posts
  15. About Shihab

107 Beautiful CSS Cards examples to improve your UI

Do you want to improve the user interface of your website?

You can try to add some fancy CSS Cards effect.

Here are some of the most beautiful CSS cards examples for your inspiration.

You may also like

  • CSS Flip Cards
  • CSS Product Cards
  • CSS Recipe Cards
  • CSS Credit Cards
  • 55 Animated jQuery Buttons
  • 75 CSS Text Animations You Can Use
  • 15 Amazing CSS Animated Background for you to try
  • 19 Cool CSS Loading Animation to inspire you
  • 17 Fancy CSS Search Boxes
  • 21 Modern CSS menu examples
  • 19 Stylish CSS forms
  • 23 Fantastic CSS Hover Effects
  • 19 CSS Border Animations you can implement
  • 15 Stylised CSS Tables
  • 13 Pure CSS Dropdown Menus
  • 15 Creative CSS Filter Examples
  • 35 Unique CSS Text Effects
  • 15 CSS Sliders you can use
  • 21 New Bootstrap Login Forms for you
  • 19 Bootstrap Profiles you can use for yourself
  • 13 Material Design Login Forms
  • 35 Cool CSS Select Boxes
  • 15 CSS Range Sliders you can use today
  • 35 Creative use of CSS clip-path examples
  • 29 Unique CSS Toggle Switches
  • 41 Beautiful CSS Animation Examples

#1578 – Profile Card

Dev: LittleSnippets.net

#1559 – Profile Card

Dev: LittleSnippets.net

Pure CSS Visiting Card

Dev: Irfan Khan

Profile Card with Slanted Edge

Dev: Codeshape

Profile card

Dev: Sabine Robart

#1568 – Profile Card

Dev: LittleSnippets.net

CFYE Profile Card

CSS Social Media Card

Dev: Nafees Anwar

#1540 – Profile Card

Dev: LittleSnippets.net

Profile Cards

Dev: Paolo Duzioni

#1218 – Profile Card

Dev: LittleSnippets.net

Profile Card

Dev: Jack Thomson

Dev: RahulDhiman

css profile card

Dev: Aniket Singh

Envato Remix contest

Dev: RaziTazi

Profile Card CSS

Dev: Daniel Ramos

Profile Card

Dev: Russ Perry

UI #3 – Profile Card

Dev: Jove Angelevski

Pure CSS Animated Fluent Design Card

Dev: sodapop

Profile cards with hover effect

Dev: Mike Young

Dev: IMarty

Profile Card

See the Pen Profile Card by Shahnur Alam (@codename065) on CodePen.

Dev: Shahnur Alam

Profile Card (Envato Codepen Remix)

Dev: Dion Pramadhan

Bootstrap Profile Cards 2019

Dev: Sahar Ali Raza

Lukas Bulga’s Profile Card

Dev: Matthew Ginnard

Fairly Colourful Profile Card

Dev: Takane Ichinose

Profile Cards

Dev: Connor

Profile Card UI Design Cool Hover Effect

Dev: FrankieDoodie

#0056 – Profile with image, caption and icons

Dev: LittleSnippets.net

#0057 – Profile card with image, caption & icons

Dev: LittleSnippets.net

CSS Only Profile Card ( Envato Codepen Remix )

Dev: Lorenzo Zottar

#030 – Profile Card Design

Dev: Florin Pop

#1515 – Profile Card

Dev: LittleSnippets.net

Bootstrap 4 Profile Cards

Dev: Amrit virk

#1336 – Profile Card

Dev: LittleSnippets.net

Remix Challenge

Dev: David Jones

Читайте также:  Python encode unicode to bytes

UI Card Design revisited 🙂

Dev: Yoann Nouveau

#14 – Large Blog Card

Dev: Daiquiri.io

Creative Services Cards Hover Effect

Dev: Youssef Shaaban Hamdallah

Cards hover effects

Dev: Span4ev

Cards with hover effect

Dev: Eman Fateen

Cards Hover Animation

Dev: Saiteja Vemula

See the Pen Card by Kier Borromeo (@srph) on CodePen.

Dev: Kier Borromeo

Cards Hover by MFK

Dev: Faisal Khan

#23 – Article Cards: Hover animation

Dev: Daiquiri.io

Simple Cards + Hover Effect

Dev: Mark Mead

cards hover effects

See the Pen cards hover effects by Benoit Pontbriand (@benp) on CodePen.

Dev: Benoit Pontbriand

CSS3 cards hover effects

Dev: Yifang Di

CSS cards with drop-shadow effect

Dev: Jaroslaw Hubert

Modern css cards design

Dev: FlorinCornea

Cards hover effect

Dev: Khadar Hassan

Profile CSS Hover Effect

Dev: Eric Rogg

Tricky CSS hover

See the Pen Tricky CSS hover by Piotr Galor (@pgalor) on CodePen.

Dev: Piotr Galor

Material Design: Profile Card

See the Pen Material Design: Profile Card by Emil Devantie Brockdorff (@Mestika) on CodePen.

Dev: Emil Devantie Brockdorff

#1344 – Profile Card

Dev: LittleSnippets.net

Profile Card Hover Effect

Profile Card

See the Pen Profile Card by Mohan Khadka (@khadkamhn) on CodePen.

Dev: Mohan Khadka

Dev: darkos

Profile Card – Pure CSS

CSS Profile Card

Dev: Byurhan Beyzat

Product Card UI / CSS

Dev: Omar Dsooky

Pure CSS Product Card

Dev: Adam Kuhn

UI Design – Product Card

Dev: CodeFrog

Product Card

See the Pen Product Card by Alexandra K (@ff0004-red) on CodePen.

Dev: Alexandra K

HTML CSS Product Card UI design

Dev: Md Shifut Hossain

#1418 – Product Card

Dev: LittleSnippets.net

UI to Code – Star Wars Product Card

Dev: Praveen Bisht

Product Card

See the Pen Product Card by Deni Kurniawan (@wingerdstok) on CodePen.

Dev: Deni Kurniawan

Checkbox card

See the Pen Checkbox card by Sławek Jaskulski (@fireblader) on CodePen.

Dev: Sławek Jaskulski

Material Card: Pure CSS Diagram

Dev: Befeepilf

Card Animation

Dev: Janne Leppänen

Material Playing Cards

Dev: Andy Tran

Folding card animation

Dev: Dan Benmore

Card animation

Dev: Makaveli

CSS-only Slide-up Caption Hover Effect

Dev: Mojtaba Seyedi

Pure CSS Card UI

Dev: Adam Kuhn

CSS Card Flip

See the Pen CSS Card Flip by Cole Bemis (@colebemis) on CodePen.

Dev: Cole Bemis

Pure CSS Card Carousel

Dev: Adam Kuhn

Pure CSS Card Flip

Dev: Eddy Sims

Pure CSS Card Deck

See the Pen Pure CSS Card Deck by Miro Karilahti (@miroot) on CodePen.

Dev: Miro Karilahti

CSS Hover Effects

Pure CSS Card w/ Social Icons

Dev: markelrayes

See the Pen Blog Card by Stéphane Deluce (@Stephane) on CodePen.

Dev: Stéphane Deluce

Card UI CSS

See the Pen Card UI CSS by Damien Flandrin (@dam62500) on CodePen.

Dev: Damien Flandrin

This is our awesome team

See the Pen Blog Cards by Chyno Deluxe (@ChynoDeluxe) on CodePen.

Dev: Chyno Deluxe

Blog Card with Hover State

Dev: szpakoli

Blog Post Item

Blog Card fun #1

Dev: IMarty

#12 – Blog Card: Transparent Text Animation

Читайте также:  Php header ошибка 500

Dev: Daiquiri.io

Blog Card – Page

Dev: Lütfü Can

Responsive UI Card

Dev: Vishnu Reji

See the Pen Blog cards by Brett (@tterb) on CodePen.

Card Hover Interactions

Dev: Ryan Mulligan

Card hover effects

Dev: Jason Hee

EC card hover

Dev: Jorge Sanes

Card hover FX

See the Pen Card hover FX by Reiha Hosseini (@mrReiha) on CodePen.

Dev: Reiha Hosseini

See the Pen Event Card by Travis Williamson (@travisw) on CodePen.

Dev: Travis Williamson

Simple CARD hover effect

Dev: YaroslavW

#hover Card Effect

Dev: Manoj Silag

Card hover effect experiments

Dev: Andrew Sims

CSS Clip-path Card Hover Effects

Dev: Ahmad Emran

Card Hover Interaction | HTML & CSS

Dev: Sikriti Dakua

Card Hover Effect | SASS | Cubic Bezier

Dev: Kaio Almeida

Cards Hover Effect -> HTML & CSS

Pure CSS Profile Card Hover Effect

See the Pen CARD by Pratham (@prathkum) on CodePen.

Dev: Pratham

Источник

Card CSS examples

CSS card examples

In this post, I will show you a couple of cards that I made with HTML & CSS. You can use any of the card CSS or designs that you like. Let’s explore them one by one.

Example 1: simple card design with HTML CSS

Card design with html css

In this example, I have an image on top, a card title, a description & a link/button. This card also has some other hover styles that you’ll find on the live demo.

HTML

 
Card title goes here
 
Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.
 Card button

Don’t forget to replace the image path.

CSS

.card-holder < max-width: 1100px; margin: 0 auto; >.card-holder .card < max-width: 350px; border: 1px solid #4285F4; border-radius: 3px; -webkit-transition: -webkit-box-shadow 0.7s ease-in; transition: -webkit-box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in, -webkit-box-shadow 0.7s ease-in; margin: 30px 15px; >.card-holder .card h5 < padding: 20px 15px; >.card-holder .card p < padding: 0 15px; margin: 0 0 20px; >.card-holder .card a < padding: 10px 30px; display: inline-block; background-color: #E43E31; margin: 0 15px 20px; border: 1px solid #d92a1c; border-radius: 25px; color: #FFFFFF; text-transform: uppercase; text-shadow: 2px 1px #222222; -webkit-transition: background-color 0.7s ease; transition: background-color 0.7s ease; font-weight: 700; font-size: 14px; >.card-holder .card a:hover < background-color: #c2190c; >.card-holder .card:hover

Example 2: card with list items & two buttons

Card design with html css that contains list items and two buttons

This card is an extended version of the first one. In addition to the first card, it has a couple of list items and two buttons.

HTML

Card title goes here
Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.
    
  
  • Lorem ipsum dolor sit elit
    • 
  
  • Amet consectetur adipisicing
    • 
  
  • Obcaecati modi ex culpa
    • 
  
  • Provident nostrum possimus
    •

CSS

ul < padding: 0; >ul li < list-style: none; font-size: 14px; border-bottom: 1px solid #c0c1c2; padding: 15px 15px; >ul li:first-child < border-top: 1px solid #c0c1c2; >.card-holder < max-width: 1100px; margin: 0 auto; >.card-holder .card < max-width: 350px; border: 1px solid #4285F4; border-radius: 3px; -webkit-transition: -webkit-box-shadow 0.7s ease-in; transition: -webkit-box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in, -webkit-box-shadow 0.7s ease-in; margin: 30px 15px; >.card-holder .card h5 < padding: 20px 15px; >.card-holder .card p < padding: 0 15px; margin: 0 0 20px; >.card-holder .card a < padding: 10px 30px; display: inline-block; background-color: #E43E31; margin: 0 15px 20px; border: 1px solid #d92a1c; border-radius: 25px; color: #FFFFFF; text-transform: uppercase; text-shadow: 2px 1px #222222; -webkit-transition: background-color 0.7s ease; transition: background-color 0.7s ease; font-weight: 700; font-size: 14px; >.card-holder .card a:hover < background-color: #c2190c; >.card-holder .card:hover

Example 3: pricing card HTML CSS template

Pricing card design with HTML & CSS

In this example, I have 3 cards side by side. This example best suits pricing cards.

Читайте также:  Разница время дата php

If you see closely, the cards are equal in height even though their content is not equal. Also, the buttons are aligned at the very bottom as you will see in the real world and on popular websites.

HTML

CSS

.example-3 < background-color: #fff4e6; >.example-3 h2 < text-align: center; text-transform: uppercase; color: #FD334D; font-size: 32px; >@media (min-width: 768px) < .example-3 h2 < font-size: 45px; >> @media (min-width: 768px) < .example-3 .card-holder < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; >> .example-3 .card-holder .item < margin: 0 0 30px; border: 1px solid #fcb65d; border-radius: 3px; -webkit-transition: -webkit-box-shadow 0.5s ease-in; transition: -webkit-box-shadow 0.5s ease-in; transition: box-shadow 0.5s ease-in; transition: box-shadow 0.5s ease-in, -webkit-box-shadow 0.5s ease-in; >@media (min-width: 768px) < .example-3 .card-holder .item < -ms-flex-preferred-size: 31%; flex-basis: 31%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; >> .example-3 .card-holder .item .item--header < text-align: center; background-color: #0C1733; padding: 30px 15px; >.example-3 .card-holder .item .item--header h3 < margin: 0; text-transform: uppercase; color: #92E81C; font-size: 36px; >.example-3 .card-holder .item .item--header p < margin: 0; >.example-3 .card-holder .item .item--header p .price < color: white; font-size: 22px; >.example-3 .card-holder .item ul < margin: 0; >@media (min-width: 768px) < .example-3 .card-holder .item ul < -webkit-box-flex: 1; -ms-flex: 1; flex: 1; >> .example-3 .card-holder .item ul li < font-weight: 100; >.example-3 .card-holder .item .link < padding: 30px 15px; >.example-3 .card-holder .item .link a < display: inline-block; background-color: #92E91F; padding: 10px 30px; color: #0C1733; font-size: 16px; font-weight: 700; border-radius: 7px; text-transform: capitalize; >.example-3 .card-holder .item:hover

If you want to see the full HTML template for all these cards, please visit my GitHub page.

See animated cards that have been made with only HTML & CSS.

Build HTML CSS projects

Conclusion

All these cards are mobile responsive. To align elements, I mostly used CSS flexbox in this post.

There is no CSS framework that I used in these card examples. So you don’t need Bootstrap, Zurb Foundation, Tailwind, or any other CSS framework to make these card designs.

You will also find the card CSS separately on my GitHub page that I mentioned earlier. If you have any suggestions or find difficulties, don’t hesitate to reach out.

Now let me know, which card you like the most.

Do you need to hire a web developer?

Shihab, headshot

About Shihab

With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.

At the same time, I’ve been creating resources for web developers, designers & freelancers in general.

Источник

Оцените статью