利用 Css 制作精美的卡片UI

NickZhou 发布于2019-08-01 16:48 / 2235人阅读

摘要：固定块元素的大小，其中包含我们的图片，这使我们能够在满足尺寸要求的情况下，任何图片都可用于制作成卡片。字体及其他博文链接利用制作精美的卡片源码链接利用制作精美的卡片原文链接翻译墨丶水瓶

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

第一步：确定 HTML 代码结构

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


    利用css制作卡片UI -- 墨丶水瓶


    
        
            
        
        
            
                
                    20 Novembre 1992
                
            
            
                
                    Lorem Ipsum
                
            
            
                
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus
                    autem consectetur voluptate facere at, omnis ab optio placeat officiis!
                    Animi modi harum enim quia veniam consectetur unde autem inventore.

第二步：定义 Css 规则

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

.card

.card {
    width:400px;
    margin:0px auto;
    background-color:white;
    box-shadow:0px 5px 20px #999;
}
.card a {
    color:#333;
    text-decoration:none;
}
.card:hover .card-image img {
    width:160%;
    filter:grayscale(0);
}

将 .card 设置为固定大小。

居中方式为 margin:0px auto;

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

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

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

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

.card-image

.card-image {
    height:250px;
    position:relative;
    overflow:hidden;
}
.card-image img {
    width:150%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    filter:grayscale(1);
    transition-property:filter width;
    transition-duration:.3s;
    transition-timing-function:ease;
}

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

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

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

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

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

定义元素为 100% 灰度。

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

.card-body

.card-body {
    text-align:center;
    padding: 15px 20px;
    box-sizing: border-box;
}

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

设置元素的内边距。

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

字体及其他

.card-date {
    font-family: "Source Sans Pro", sans-serif;
}
.card-title, .card-excerpt {
    font-family: "Playfair Display", serif;
}
.card-date, .card-title {
    text-align:center;
    text-transform:uppercase;
    font-weight: bold;
}
.card-date, .card-excerpt {
    color: #777;
}

博文链接：利用 Css 制作精美的卡片 UI

源码链接：利用 Css 制作精美的卡片 UI

原文链接：Tutoriel - Réaliser une carte en CSS ( Card UI CSS )

翻译：墨丶水瓶

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50757.html

利用 Css 制作精美的卡片UI

摘要：固定块元素的大小，其中包含我们的图片，这使我们能够在满足尺寸要求的情况下，任何图片都可用于制作成卡片。字体及其他博文链接利用制作精美的卡片源码链接利用制作精美的卡片原文链接翻译墨丶水瓶本教程将会告诉你如何用 Html 和 Css 实现卡片界面。教程会重点使用 Css filter 属性处理图片，以便给它添加一些过渡效果。第一步：确定 HTML 代码结构在创建 HTML 代码前，你...

Ilikewhite 2019-08-29 12:35 评论0 收藏0
前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，过往项目 2018 年 9 月份项目汇总（共 26 个项目） 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（...

muddyway 2019-08-30 15:44 评论0 收藏0
独立开发变现周刊（第28期）：一个JavaScript组件做到了150万美金收入

摘要：分享独立开发产品变现相关有价值的内容，每周五发布。团队认为做网站评论和与其它团队的协作是复杂的，对于这个过程没有真正的解决方案。官网实现美金收入的步骤个月前，我创建了自己的第一个账户，年月日。当我把它放到上时，得到了一些最初的关注。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size...

channg 2021-11-15 11:39 评论0 收藏0