利用 Css 制作精美的卡片UI

NickZhou 發布于2019-08-01 16:48 / 2240人閱讀

摘要：固定塊元素的大小，其中包含我們的圖片，這使我們能夠在滿足尺寸要求的情況下，任何圖片都可用于制作成卡片。字體及其他博文鏈接利用制作精美的卡片源碼鏈接利用制作精美的卡片原文鏈接翻譯墨丶水瓶

本教程將會告訴你如何用 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 )

翻譯：墨丶水瓶

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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