现代 CSS 卡片

cssweb developmentfront end technology更新于 2024/5/30 5:32:17

如今，在网站上创建卡片对于显示网站上的各种数据非常重要。例如，在 TutorialsPoint 网站的主页上，您会找到以卡片形式呈现的不同课程，点击卡片后会重定向到课程的特定页面。

此外，如果您访问任何电子商务商店，例如亚马逊或 Flipkart，他们都会以卡片形式展示产品。创建卡片的主要好处是，我们可以通过图片显示产品的简短信息，并在产品页面上显示完整的信息。

在本教程中，我们将学习仅使用 HTML 和 CSS 创建不同的卡片。

示例 1(基本 CSS 卡片)

在下面的示例中，我们创建了包含单张图片的 div 元素"card"和 div 元素"card-content"。 "card-content" div 元素包含文本信息。

在 CSS 中，我们设置了卡片元素的固定尺寸。此外，我们还指定了背景颜色、边框半径和边框等样式。此外，当用户将鼠标悬停在卡片上时，我们会在卡片上应用 box-shadow 效果。

此外，我们还固定了图像的尺寸，并设置了顶角的边框半径。此外，我们还设置了文本内容的字体大小。在输出中，用户可以观察到最终的卡片效果。

<html>
<head>
   <style>
      .card {
         display: flex;
         flex-direction: column;
         border-radius: 5px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         transition: box-shadow 0.3s ease-in-out;
         width: 18rem;
         background-color: #fff;
      }
      .card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);}
      .card>img {
         border-radius: 5px 5px 0 0;
         height: 150px;
         width: 100%;
         object-fit: contain;
      }
      .card-content { padding: 20px;}
      .card h3 { font-size: 1.4rem; margin-top: 0;}
      .card p { font-size: 1rem; margin-bottom: 10px;
      }
      .card a {
         padding: 10px 20px;
         background-color: #222;
         border-radius: 10px;
         color: white;
         text-align: center;
         display: inline-block;
         text-decoration: none;
         transition: background-color 0.4s ease-in-out;
      }
      .card a:hover { background-color: #4b4a4a;}
   </style>
</head>
<body>
   <h2> Creating the <i> basic cards </i> using the CSS </h2>
   <div class = "card">
      <img src = "https://www.cainiaomax.com/static/images/logo.png?v2" alt = "Logo">
      <div class = "card-content">
         <h3> Python </h3>
         <p> Python course by Shubham Vora </p>
         <a href = "#"> Join now </a>
      </div>
   </div>
</body>
</html>

示例 2

在下面的示例中，我们创建了一个与第一个示例类似的卡片。在这里，我们为"card-image"div 元素设置了背景图片。此外，我们还从"Picsum"网站获取随机图片。在此卡片中，我们没有像第一个示例那样添加"立即加入"锚标签。

<html>
<head>
   <style>
      .card {
         display: flex;
         flex-direction: column;
         width: 20rem;
         background-color: white;
         border-radius: 10px;
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      }
      .card-image {
         height: 200px;
         background-image: url("https://picsum.photos/300/200");
         background-size: cover;
         border-radius: 10px 10px 0 0;
      }
      .card-content { padding: 20px;}
      .card-title {
         font-size: 1.5rem;
         font-weight: bold;
         margin: 0 0 10px 0;
      }
      .card-text { font-size: 1rem; margin: 0; }
   </style>
</head>
<body>
   <h2> Creating the <i> basic cards </i> using the CSS. </h2>
   <div class = "card">
      <div class = "card-image"> </div>
      <div class = "card-content">
         <h2 class = "card-title"> Random Image</h2>
         <p class = "card-text"> This is an random image description. </p>
      </div>
   </div>
</body>
</html>

示例 3

在下面的示例中，我们在卡片上添加了悬停效果以显示更多信息。

在这里，我们首先创建了卡片容器来创建普通卡片，并使用带有"position:relative"的 CSS 为其设置样式。我们在卡片容器内添加了"card-first"和"card-second"div 元素。"card-first"div 元素包含卡片上的信息，"card-second"div 元素包含用户将鼠标悬停在卡片上时显示的信息。

此外，我们设置了 CSS 中"card-first"div 元素的尺寸。此外，我们还在 CSS 中设置了"card-second"div 元素的尺寸，并使用 CSS 属性"transform:translate(100%)"隐藏卡片的第二部分。当用户将鼠标悬停在卡片元素上时，我们使用 CSS 属性"transform:translateX(-100%)"显示卡片的第二部分。

<html>
<head>
   <style>
      .card {
         position: relative;
         width: 300px;
         height: 200px;
         background-color: rgb(64, 64, 247);
         color: white;
         border-radius: 10px;
         box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
         overflow: hidden;
      }
      .card-first {
         position: absolute;
         width: 100%;
         height: 100%;
         padding: 20px;
         font-size: 1.7rem;
         transition: transform 0.5s ease-in-out;
      }
      .card-second {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         padding: 20px;
         transform: translateX(100%);
         transition: transform 0.5s ease-in-out;
      }
      .card:hover .card-first { transform: translateX(-100%);}
      .card:hover .card-second { transform: translateX(0%); }
   </style>
</head>
<body>
   <h2> Creating the <i> hover effect on the card </i> to show additional information. </h2>
   <div class = "card">
      <div class = "card-first">
         <h3> Samsung s22 </h3>
         <p> 1,01,000 INR </p>
      </div>
      <div class = "card-second">
         <p> 6.4 inch display </p>
         <p> 8 GB RAM </p>
         <p> 128 GB Storage </p>
         <p> 64 MP Camera </p>
      </div>
   </div>
</body>
</html>

示例 4

在下面的示例中，我们创建了"父"div 元素。之后，我们添加了多个包含图片和卡片描述的卡片元素。

在 CSS 中，我们使用了 clip() 函数来设置卡片的宽度。clamp() 函数接受三个参数。第一个参数是最小值，第二个参数是百分比值，第三个参数是最大值。在本例中，如果屏幕尺寸的 20% 在 300 到 500px 之间，则卡片宽度为 20%。否则，卡片宽度为 300px 或 500px。

此外，我们将"父"容器设置为弹性框，以便正确显示所有卡片。

<html>
<head>
   <style>
      .parent {
         padding: 30px 5%;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .card {
         position: relative;
         margin: 20px;
         width: clamp(230px, 20%, 500px);
         height: 250px;
         background-color: green;
         color: white;
         border-radius: 10px;
         transition: all 0.3s ease;
      }
      .card img {
         width: 100%;
         height: 150px;
         border-radius: 10px 10px 0 0;
         object-fit: cover;
      }
      .card-text {
         padding: 20px;
         text-align: center;
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         transition: all 0.3s ease;
      }
      .card-text h3 { font-size: 24px; margin-bottom: 10px;}
      .card-text p { font-size: 16px; margin-bottom: 0;}
   </style>
</head>
<body>
   <h3> Creating the <i> card with clamp() function </i> to manage card dimensions according to the screen dimensions </h3>
   <div class = "parent">
      <div class = "card">
         <img src = "https://picsum.photos/300/200" alt = "Random image">
         <div class = "card-text">
            <h2> Card 1 </h2>
            <p> This is a card description. </p>
         </div>
      </div>
      <div class = "card">
         <img src = "https://picsum.photos/300/200" alt = "Random image">
         <div class = "card-text">
            <h2> Card 2 </h2>
            <p> This is a card description. </p>
         </div>
      </div>
   </div>
</body>
</html>

用户学习了如何使用 HTML 和 CSS 创建现代卡片。在前两个示例中，我们创建了基本卡片;在第三个示例中，我们创建了具有悬停效果的卡片。此外，我们还学习了如何使用 clip() 函数根据设备屏幕尺寸处理卡片尺寸。