利用 Css 制作精美的卡片UI

本教程将会告诉你如何用 Html 和 Css 实现卡片界面。教程会重点使用 Css filter 属性处理图片，以便给它添加一些过渡效果。

第一步：确定 HTML 代码结构

在创建 HTML 代码前，你首先应该想象它的结构。当你有一个好的模型时，应该第一时间把你想象的页面结构或者你的 CSS 模块及时地在纸上罗列出来。一个设计合理、结构良好的 HTML 页面会让你在接下来的工作过程中变的一异常轻松。

利用 Css 制作精美的卡片UI

  1. <a id="case-title" href=" https://www.loveo.cc/using-css-to-make-cards-ui.html">
  2.     利用css制作卡片UI -- 墨丶水瓶
  3. </a>
  4. <div class="card">
  5.     <a href="#.">
  6.         <div class="card-image">
  7.             <img src="https://www.loveo.cc/wp-content/uploads/2017/02/card-image.jpg"
  8.             alt="Orange" />
  9.         </div>
  10.         <div class="card-body">
  11.             <div class="card-date">
  12.                 <time>
  13.                     20 Novembre 1992
  14.                 </time>
  15.             </div>
  16.             <div class="card-title">
  17.                 <h3>
  18.                     Lorem Ipsum
  19.                 </h3>
  20.             </div>
  21.             <div class="card-exceprt">
  22.                 <p>
  23.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus
  24.                     autem consectetur voluptate facere at, omnis ab optio placeat officiis!
  25.                     Animi modi harum enim quia veniam consectetur unde autem inventore.
  26.                 </p>
  27.             </div>
  28.         </div>
  29.     </a>
  30. </div>

第二步：定义 Css 规则

一旦确立了 Html 结构，接下来我们将开始为它编写 Css 样式。我将在下面分别贴出每一部分的 Css 代码。

.card

  1. .card {
  2.     width:400px;
  3.     margin:0px auto;
  4.     background-color:white;
  5.     box-shadow:0px 5px 20px #999;
  6. }
  7. .card a {
  8.     color:#333;
  9.     text-decoration:none;
  10. }
  11. .card:hover .card-image img {
  12.     width:160%;
  13.     filter:grayscale(0);
  14. }

1.将 .card 设置为固定大小。

2.居中方式为 margin:0px auto;

3.为了在稍暗的背景中便于区分，将块元素设置为白色。

4.增加了一个小阴影产生叠加效应。

5.定义元素 a 标签的颜色与下划线修饰。

6.定义鼠标移上时放大元素并将滤镜灰度设置为“0”。

.card-image

  1. .card-image {
  2.     height:250px;
  3.     position:relative;
  4.     overflow:hidden;
  5. }
  6. .card-image img {
  7.     width:150%;
  8.     position:absolute;
  9.     top:50%;
  10.     left:50%;
  11.     transform:translate(-50%, -50%);
  12.     filter:grayscale(1);
  13.     transition-property:filter width;
  14.     transition-duration:.3s;
  15.     transition-timing-function:ease;
  16. }

1.固定块元素的大小，其中包含我们的图片，这使我们能够在满足尺寸要求的情况下，任何图片都可用于制作成卡片。

2.设置相对的定位方式，因为它里面包含了绝对定位的元素。

3.定义内容溢出元素框时裁剪并隐藏。

4.我们可以根据需要在固定大小的100%基础上增加图像的默认大小，但是不要添加小于400px的图像，也不要忘记遵守其宽度/高度比，以免出现空白。

5.为了将图像在父元素中完全显示及将 .card-image 的中心作为起点 ，我们需要同时设置定位方式为 absolute 。top 、left 为50% ， 然后能过 transform:translate(-50%, -50%) 设置位移，使 .card-image 的中心点作为起点 。

6.定义元素为 100% 灰度。

7.使元素在鼠标移上时在300毫秒内慢速开始，然后变快，然后慢速结束的过渡方式放大。

.card-body

  1. .card-body {
  2.     text-align:center;
  3.     padding: 15px 20px;
  4.     box-sizing: border-box;
  5. }

1.定义 .card-bady 元素的文本对齐方式为居中对齐。

2.设置元素的内边距。

3.元素 box-sizing 属性值为 border-box。

字体及其他

  1. .card-date {
  2.     font-family: 'Source Sans Pro', sans-serif;
  3. }
  4. .card-title, .card-excerpt {
  5.     font-family: 'Playfair Display', serif;
  6. }
  7. .card-date, .card-title {
  8.     text-align:center;
  9.     text-transform:uppercase;
  10.     font-weight: bold;
  11. }
  12. .card-date, .card-excerpt {
  13.     color: #777;
  14. }

 

See the Pen Css Card UI by 墨丶水瓶 (@Nexiy) on CodePen.

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

目前评论：2   其中：访客  2   博主  0

  1. avatar 昆山装修吧 1
    回复 2017年07月09日 14:34  沙发

    这个模板很喜欢，很有中国风感觉！

  2. avatar wordpress建站吧 1
    回复 2019年03月08日 11:25  板凳

    HTML 代码结构很重要

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: