创意卡片设计（纯css）

效果展示：

这个案例比较简单：
就先分析一下这个结构吧：

值得一提的是，这个案例中的文字段落是使用lorem功能自动生成的，关于lorem功能的介绍参考这篇文章。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css Weird Shape</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="container"><div class="card"><div class="icon"><ion-icon name="earth-outline"></ion-icon></div><div class="content"><h2>Card One</h2><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero dolor iusto sed ipsam quos illo aspernatur ex ea eveniet distinctio? Sed ipsam numquam ducimus ipsa architecto vero, cumque quos mollitia.</p></div></div><div class="card"><div class="icon"><ion-icon name="diamond-outline"></ion-icon></div><div class="content"><h2>Card Two</h2><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero dolor iusto sed ipsam quos illo aspernatur ex ea eveniet distinctio? Sed ipsam numquam ducimus ipsa architecto vero, cumque quos mollitia.</p></div></div><div class="card"><div class="icon"><ion-icon name="rocket-outline"></ion-icon></div><div class="content"><h2>Card Three</h2><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero dolor iusto sed ipsam quos illo aspernatur ex ea eveniet distinctio? Sed ipsam numquam ducimus ipsa architecto vero, cumque quos mollitia.</p></div></div></div><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

css：

@import url("https://fonts.googleapis.com/css2?family=Ubantu:wght@300;400;500;700&display=swap");
* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Ubantu", sans-serif;
}
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #3c2846;
}
.container {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;padding: 40px;
}
.card {position: relative;width: 320px;height: 450px;margin: 30px;background: #287bff;border-radius: 20px;border-bottom-left-radius: 160px;border-bottom-right-radius: 160px;box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25),0 45px 0 rgba(0, 0, 0, 0.15);overflow: hidden;display: flex;justify-content: center;align-items: flex-start;
}
.card::before {content: "";position: absolute;top: -140px;left: -40%;width: 100%;height: 120%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));transform: rotate(35deg);pointer-events: none;filter: blur(5px);
}
.card:nth-child(1) {background: linear-gradient(to bottom, #ff2ae0, #645bf6);
}
.card:nth-child(2) {background: linear-gradient(to bottom, #ffec61, #f321d7);
}
.card:nth-child(3) {background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.icon {position: relative;width: 140px;height: 120px;background: #3c2846;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0#fff;z-index: 1000;display: flex;justify-content: center;
}
.icon::before {content: "";position: absolute;top: 0;left: -50px;width: 50px;height: 50px;border-top-right-radius: 50px;box-shadow: 15px -15px 0 15px #3c2846;
}
.icon::after {content: "";position: absolute;top: 0;right: -50px;width: 50px;height: 50px;border-top-left-radius: 50px;box-shadow: -15px -15px 0 15px #3c2846;
}
.icon ion-icon {color: #fff;font-size: 6em;z-index: 10000;--ionicon-stroke-width: 24px;
}
.content {position: absolute;width: 100%;padding: 30px;padding-top: 140px;text-align: center;
}
.content h2 {font-size: 1.75em;color: #fff;margin-bottom: 10px;
}
.content p {color: #fff;line-height: 1.5em;
}

创意卡片设计（纯css）相关推荐

纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
转载自张旭鑫一.从SVG实现多彩圆环倒计时效果说起上周我做了个demo,使用SVG和stroke-dasharray和stroke-dashoffset特性实现了一个彩条圆环倒计时效果,大概长下面 ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
纯css模拟液晶式显示数字时间
首先是借鉴了yiminghe大虾的创意和思路(http://www.iteye.com/topic/705529),可惜看到帖子的时候里面的demo已经打不开了,所以决定自己也做一个. 我觉得他画的数 ...
怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...

创意卡片设计（纯css）

创意卡片设计（纯css）相关推荐

最新文章

热门文章