【每日一练】15—CSS实现好看的卡片效果

写在前面

最近，在做一个新项目，考虑用Tailwind CSS来实现UI效果，这个新出来的CSS框架，很多人说，它是一个用了会上瘾的框架，虽然出来时间不长，但是他的火爆程度，直接向bootstrap靠近，当然，好不好用，这个看每个人的主观感觉。

如果你想学习新东西的话，可以去试试，我也是刚刚开始用，我一直觉得，框架这种东西就是锦上添花的，可以帮助我们提升工作效果，但并不一定适合所有项目，至于用什么框架工具，还是需要根据自己需求来，需要具体情况具体分析，然后结合各框架工具特点，才能把工具用到极致。

当然，框架我们需要会用，原生的CSS，也需要会写，因此，今天，我们继续来练习一个CSS的小项目，最终的效果如下：

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【每日一练】15—CSS实现好看的卡片效果</title>
</head>
<body><div class="container"><div class="card"><div class="icon"><ion-icon name="diamond-outline"></ion-icon></div><div class="content"><h2>什么是Tailwind CSS</h2><p>就是一个 CSS 框架，和你知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。</p></div></div><div class="card"><div class="icon"><ion-icon name="earth-outline"></ion-icon></div><div class="content"><h2>什么是Tailwind CSS</h2><p>就是一个 CSS 框架，和你知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。</p></div></div><div class="card"><div class="icon"><ion-icon name="rocket-outline"></ion-icon></div><div class="content"><h2>什么是Tailwind CSS</h2><p>就是一个 CSS 框架，和你知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。</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代码如下：

*
{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Ubuntu', 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;
}
.card
{position: relative;width: 320px;height: 450px;margin: 30px;background: #287bff;border-radius: 20px;display: flex;justify-content: center;align-items: flex-start;overflow: hidden;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);
}
.card::before
{content: '';position: absolute;top: -150px;left: -40%;filter: blur(5px);width: 100%;height: 150%;transform: rotate(35deg);background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2));pointer-events: none;
}
.card:nth-child(1)
{background: linear-gradient(to bottom,#ff2ae0, #64b5f6);
}
.card:nth-child(2)
{background: linear-gradient(to bottom,#ffec61, #f321d7);
}
.card:nth-child(3)
{background: linear-gradient(to bottom,#24ff72, #9a4eff);
}
.card .icon
{position: relative;width: 140px;height: 120px;background: #3c2846;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;display: flex;justify-content: center;align-items: flex-start;box-shadow: 0 10px 0 rgba(0,0,0,0.1),inset 0 -8px 0 #fff;z-index: 1000;
}
.card .icon ion-icon
{color: #fff;position: relative;font-size: 6em;z-index: 1;--ionicon-stroke-width: 24px;
}
.card .icon::before
{content: '';position: absolute;top: 0;left: -50px;width: 50px;height: 50px;background: transparent;border-top-right-radius: 50px;box-shadow: 15px -15px 0 15px #3c2846;
}
.card .icon::after
{content: '';position: absolute;top: 0;right: -50px;width: 50px;height: 50px;background: transparent;border-top-left-radius: 50px;box-shadow: -15px -15px 0 15px #3c2846;
}
.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;
}

写在最后

以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

PS：我在视频号上新开了一个【每日听书】的读书学习栏目，我会分享一些我精选的图书内容，然后通过人工智能主播的形式，把图书内容阅读给你听，下面是我们的听书视频内容，希望对你用。

学习更多技能

请点击下方公众号

【每日一练】15—CSS实现好看的卡片效果相关推荐

HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
【每日一练】100—一个渐变色计数器列表的实现
文 | 杨小爱写在前面今天我们迎来了[每日一练]栏目的第100个练习,在这几个月的持续练习中,我不知道,你学到了什么?是持续学习的习惯,还是前端基础知识? 但是,不管怎么样,只要持续的去做去学习自 ...
【每日一练】39—七夕节背景轮播图效果的实现
作者 | 杨小爱写在前面今天是七夕节,在这里,我先祝大家七夕节快乐,有情人终成眷属.我们节也要过,学习也要继续,因此,今天我们来实现一个漂亮的七夕幻灯轮播图效果,这个效果我个人觉得非常实用,如果你 ...
QT每日一练day1：第一个程序
参考博文:Qt常见类.窗口类继承关系树图 QT每日一练(1):第一个程序最终效果(GIF动图): step1: step2: step3: step4: step5: step6: step7: s ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
【每日一练】30—用 HTML + CSS 实现仿WhatsApp 的聊天界面效果
上周到湖南长沙待了一周,在行走的过程中,发现目前最重要就是你的码一定要是绿码,如果是黄码,哪里都去不了,为啥说这个事情呢,因为我自己有2台手机,一台安卓小米,一台苹果,发现我到了长沙以后,核酸还是72 ...
【每日一练】134—一个好玩有趣的CSS 动画效果
今天这个练习是一个用纯CSS实现的动画效果,非常有趣,大家可以看一下它的最终效果: HTML代码: <!doctype html> <html><head>< ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...

【每日一练】15—CSS实现好看的卡片效果

【每日一练】15—CSS实现好看的卡片效果相关推荐

最新文章

热门文章