您当前的位置:首页 > 网站制作 > 前端设计

10分钟用Html+css写一个渐变背景的个人名片

个人名片在个人博客网站上的位置一般是在首页右上角,一点开网站就能看见,信息量并不多,但是对于访客说,可以直观快速的了解这个网站的站长信息。接下来咱们就花10分钟,用html标签+css写一个个人名片吧。

先看一下效果图:

10分钟用Html+css写一个渐变背景的个人名片

预览地址→:https://www.tjcblog.com/card.html

从上图可以看出,这张个人名片的布局比较简单,姓名可以用H标签,其他信息可以用li或者P标签。唯一有难点的就是背景颜色有粉色,有蓝色的渐变,可以用css背景background属性来实现。接下来就一步步拆解制作名片。

步骤分析:

第一步,先写一个div,定义其宽为800px,高为460px的长方形,10px的圆角,背景色为粉色,并且将它居中显示。

Html:

<div class="card_a">
  
</div>

css:

.card_a {
    width: 800px;
    height: 460px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -230px;
    margin-left: -400px;
    background: #efe6f1;
    overflow: hidden;
    border-radius: 10px;
}

如图:

10分钟用Html+css写一个渐变背景的个人名片

第二步,用伪元素实现颜色渐变

css3属性颜色渐变属性有两种类型

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

一、CSS3线性渐变语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

例如设置背景颜色从上到下(默认方向)的颜色为粉色过渡到蓝色,写法如下:

background: linear-gradient(#f8a8b9, #8be9f6);

如图:

10分钟用Html+css写一个渐变背景的个人名片

渐变方向默认是从上到下,那如果要改变方向呢,线性渐变可用top,left,right,bottom四个方向实现。例如:

 background: linear-gradient(to bottom right, #000 , #fff);

如图:

10分钟用Html+css写一个渐变背景的个人名片

也可以用角度来实现,例如:

background: linear-gradient(45deg, #f8a8b9, #8be9f6);/*逆时针旋转45度*/
background: linear-gradient(135deg, #f8a8b9, #8be9f6);/*同上图效果一样*/

10分钟用Html+css写一个渐变背景的个人名片

注意:角度是按逆时针方向来计算,比如0deg,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

名片左下角的渐变就是用线性渐变来实现的,所以可以用一个伪元素:before来定义,然后颜色从蓝色过渡到粉色.这里中间色我用了透明来过渡,代码如下:

.card_a:before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
    bottom: -53px;
    left: -87px;
}

如图:

10分钟用Html+css写一个渐变背景的个人名片

二、CSS3径向渐变语法:

background: radial-gradient(shape size at position, start-color, ..., last-color);

例如设置背景颜色从内到外(默认方向)的颜色为粉色过渡到黄色再过渡到蓝色,写法如下:

background: radial-gradient(#f7b7b7, #f3db70,#80c6f4);

如图:

10分钟用Html+css写一个渐变背景的个人名片

 

同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。

例如:

background: radial-gradient(circle,#f7b7b7, #f3db70,#80c6f4);

10分钟用Html+css写一个渐变背景的个人名片

名片右边的渐变就是用径向渐变来实现的,所以可以用一个伪元素:after来定义,然后颜色从蓝色过渡到粉色.中间色我用透明来过渡,可以消除边界线,代码如下:

.card_a:after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 100%;
    background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
    top: -123px;
    right: -352px;
}

如图:

10分钟用Html+css写一个渐变背景的个人名片

10分钟用Html+css写一个渐变背景的个人名片

第三步,完成文字部分

姓名用标签h2定义,字体大小为50px,文字间距用letter-spacing定义0.1em距离,span标签定义职位,可取消h2标签父类元素的字体大小以及粗细来重新定义。电话邮箱等基本信息,用li列表来实现。

Html:

<section>
    <h2>杨青青<span>前端设计师</span> </h2>
    <img src="wx.png" alt="">
    <ul>
      <li>电话 / 18649130945</li>
      <li>邮箱 / 476847113@qq.com</li>
      <li>地址 / 四川省·成都市</li>
      <li>网址 / www.qingqingblog.com</li>
    </ul>
  </section>

CSS:

.card_a section {
    width: 600px;
    position: absolute;
    left: 100px;
    top: 80px;
    z-index: 9;
}

.card_a section h2 {
    font-size: 50px;
    letter-spacing: .1em;
    margin-bottom: 66px;
}

.card_a section span {
    font-size: 28px;
    font-weight: normal;
    margin-left: 50px;
    letter-spacing: normal;
}

.card_a img {
    float: right;
    width: 140px
}

.card_a section ul {
    border-left: #222 3px solid;
    padding-left: 28px;
}

.card_a section ul li {
    list-style: none;
    line-height: 38px;
    font-size: 18px;
}

10分钟用Html+css写一个渐变背景的个人名片

最后完整的Html以及CSS代码为:

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>个人名片</title>
</head>
<body>
<div class="card_a">
  <section>
    <h2>杨青青<span>前端设计师</span> </h2>
    <img src="wx.png" alt="">
    <ul>
      <li>电话 / 18649130945</li>
      <li>邮箱 / 476847113@qq.com</li>
      <li>地址 / 四川省·成都市</li>
      <li>网址 / www.qingqingblog.com</li>
    </ul>
  </section>
</div>
<style>
 * {
    margin: 0;
    padding: 0
}

.card_a {
    width: 800px;
    height: 460px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -230px;
    margin-left: -400px;
    background: #efe6f1;
    overflow: hidden;
    border-radius: 10px;
}

.card_a:before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
    bottom: -53px;
    left: -87px;
}

.card_a:after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 100%;
    background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
    top: -123px;
    right: -352px;
}

.card_a section {
    width: 600px;
    position: absolute;
    left: 100px;
    top: 80px;
    z-index: 9;
}

.card_a section h2 {
    font-size: 50px;
    letter-spacing: .1em;
    margin-bottom: 66px;
}

.card_a section span {
    font-size: 28px;
    font-weight: normal;
    margin-left: 50px;
    letter-spacing: normal;
}

.card_a img {
    float: right;
    width: 140px
}

.card_a section ul {
    border-left: #222 3px solid;
    padding-left: 28px;
}

.card_a section ul li {
    list-style: none;
    line-height: 38px;
    font-size: 18px;
}

</style>
</body>
</html>

你觉得文章内容怎么样

阿里云代金券 100 云产品通用

有效期30天 首购用户

立即领取
阿里云代金券 100 云产品通用

有效期30天 复购+升级

立即领取