如何用CSS实现漂亮的个人资料卡效果
点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
我们可以仅使用CSS为我们的网站做一些很棒的设计。在本文中,我将向你展示如何制作具有出色悬停效果的个人资料卡。
在开始之前,我们先来看一下最终效果。
接着,让我们正式开始吧。
文件结构
在我们的项目文件夹中,我们需要一个HTML文件,一个CSS文件和一个用于存储配置文件图像的文件夹。
HTML
首先,我们必须建立基本的html结构。让我们将以下代码放入index.html文件中。
<!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"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/><link rel="stylesheet" href="style.css"><title>Awesome Profile Card</title>
</head>
<body><div class="card"><div class="card-header"><img src="img/profile-image-placeholder.jpg" alt="Profile Image" class="profile-img"></div><div class="card-body"><p class="name">Your Name</p><a href="#" class="mail">yourname@amail.com</a><p class="job">Developer | Designer</p></div><div class="social-links"><a href="#" class="fab fa-github social-icon"></a><a href="#" class="fab fa-twitter social-icon"></a><a href="#" class="fab fa-youtube social-icon"></a><a href="#" class="fab fa-linkedin social-icon"></a></div><div class="card-footer"><p class="count"><span>120k</span> Followers | <span>10k</span> Following</p></div></div>
</body>
</html>
我们需要将添加style.css到index.html。此外,我们还需要采用font-awesome链接社交图标。
接下来,我们需要为卡片添加CSS样式。从现在开始,我们将使用该style.css文件。
CSS
首先,我们将添加一些基本样式,这些样式将应用于所有地方。
* {margin: 0;padding: 0;box-sizing: border-box;text-decoration: none;transition: 0.3s;
}body {font-family: "Montserrat";background-color: #b8b6b6;color: #fdfdfd;
}
没有CSS,卡将如下所示。
如果我们想把它变成漂亮一点的卡片,现在,我们需要为卡片添加背景颜色,字体大小,位置等样式属性。
.card {max-width: 250px;margin: 150px auto 0;background-color: #42515a;box-shadow: 0 10px 90px #00000024;text-align: center;font-size: 20px;border-radius: 15px;
}.card .card-header {position: relative;height: 48px;
}
个人资料图片
然后,我们将样式添加到个人资料图像。还有一些简单的悬停效果。
.card .card-header .profile-img {width: 130px;height: 130px;border-radius: 1000px;position: absolute;left: 50%;transform: translate(-50%, -50%);border: 8px solid #c74385;box-shadow: 0 0 20px #00000033;
}.card .card-header .profile-img:hover {width: 180px;height: 180px;border: 8px solid #d885af;
}
现在,我们应该看到卡中的一些重大更改。它正在变成很酷的东西。
卡体设计
该card-body内容包含姓名,电子邮件和专业。我们将为每个样式添加不同的样式。当然还有一些悬停效果。
.card .card-body {padding: 10px 40px;
}.card .card-body .name {margin-top: 30px;font-size: 22px;font-weight: bold;color: #c74385;
}.card .card-body .name:hover {margin-top: 30px;font-size: 24px;color: #d885af;
}.card .card-body .mail {font-size: 14px;color: #c2bdbd;
}.card .card-body .mail:hover {font-size: 16px;color: #ffffff;
}.card .card-body .job {margin-top: 10px;font-size: 14px;
}
更改后,卡片样式如下图所示。
添加社交链接信息
现在,我们为卡片添加自定义社交链接。我们已经font-awesome在HTML中使用了图标。我们将使用CSS修改一下图标样式,让其变得更漂亮。
.card .social-links {display: flex;justify-content: center;align-items: center;margin-top: 30px;
}.card .social-links .social-icon {display: inline-flex;align-items: center;justify-content: center;height: 40px;width: 40px;background-color: #c74385;color: #ffffff;font-size: 20px;border-radius: 100%;text-decoration: none;margin: 0 13px 30px 0;
}.card .social-links .social-icon:last-child {margin-right: 0;
}.card .social-links .social-icon:hover {background-color: #d885af;height: 50px;width: 50px;text-decoration: none;
}
查看图标的外观。
到这里,我们的卡片样式就快完成了。
最后,我们将在脚注中添加一些简单的CSS,就基本实现我们想要的效果了。
添加页脚样式
我们将对card-footer进行一些小的更改。
.card .card-footer {background-color: #c74385;border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;padding: 20px 0 20px 0;
}
.card .card-footer .count {font-size: 14px;
}
修改完之后,我们得到了期望的卡片外观效果。
我们将通过一些媒体查询来完成我们的设计。
@media screen and (max-width: 575px) {.card {width: 96%;}.card .card-body {padding: 10px 20px;}
}
在网站上使用此卡时,我们将根据自己需要,更改媒体查询。也许我们需要像这样的多张卡片。然后,我们将在网格系统中使用它们。这些卡在大,中,小屏幕上的外观如何,我们需要根据最终需求,进行样式的调整修改即可。
结论
希望我今天分享的内容,对你有所帮助。有什么问题,可以在留言区跟我留言交流。谢谢阅读。
英文 | https://javascript.plainenglish.io/design-a-beautiful-profile-card-with-css-4407c558b733
翻译 | web前端开发公众号
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
如何用CSS实现漂亮的个人资料卡效果相关推荐
- html中加艺术字体,CSS实现漂亮的大标题文字效果
CSS实现漂亮的大标题文字效果 10月 22, 2013 评论 (6) Sponsor 现在CSS3和HTML5已经开始流行,很多网页视觉效果是可以使用CSS来完成的,今天向大家展示一下如何用CSS来 ...
- 如何用CSS实现2D与3D的转换效果(transform)
css的兼容性问题 W3C组织是对网络标准制定的一个非盈利组织.其成员包括一些大型互联网技术.供应商.团体用户.研究实验室.标准制定机构和政府部门.由于各大浏览器使用的标准不一样,导致了有些样式写了但 ...
- 如何用css画胡子-单标签实现胡子效果
我们最终要实现的效果如下: 你们相信吗?这么一个相对复杂的图形只需要一个div就能够实现.下面就跟我来学习如何实现. 1. 首先写出代码结构,只需要如下一行 <div class="m ...
- css怎么制作自己头像跳跃,如何用CSS制作闪烁的箭头
如何用CSS制作闪烁的箭头 阅读:9441 次 编辑日期:2016-03-21 目录: 概述: 随着移动端的普及,CSS3的动画效果用的越来越多,甚至很多时候PC端也在用,因为可以省去繁杂的JS, ...
- 如何用 CSS + HTML + JS 创建桌面应用
05月 31 Node 如何用 CSS + HTML + JS 创建桌面应用 | https://h.lishaoy.net/nwjsElectronjs.html || 最近研究了一下基于 Chro ...
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
- html如何将段落对齐,如何用CSS设置段落的垂直对齐(附代码)
在浏览网页时,经常看到一些段落他是垂直对齐的,今天这篇文章就和大家讲讲如何用CSS设置段落的垂直对齐,有需要的朋友可以参考一下,希望对你有所帮助. CSS中通过属性vertical-align来设置段 ...
- HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式 更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
最新文章
- 首次BCH无需信任原子交换已完成
- 从小白到精通python要多久-零基础如何学Python?小白学Python需要多久?
- JavaScript面向对象编程——Array类型
- Promise用法总结
- 修改oracle归档目录和大小
- leetcode 51. N 皇后 思考分析
- leetcode409. 最长回文串
- 英特尔 开源降噪库 api_Google的新操作系统,英特尔的开源VR耳机以及更多新闻
- 王道机试指南读后总结-6(动态规划等)
- 8.22最短路径讲解
- POJ 1190 生日蛋糕 DFS
- 把已经写好的Vue项目转成uni-app项目
- Coherence缓存学习
- “狗屁不通”文章生成器网页版代码
- Intel opreation mode
- WhatsApp拓客云控系统-SendWS群控管理后台功能介绍(三):WhatsApp多账号管理记录查询
- S32K144 CAN收发调试经验总结
- 【软考 系统架构设计师】计算机网络② 网络规划与设计
- Vue项目使用域名访问配置
- 转-CNN模型的压缩与加速算法综述