• 用Html+css写一个渐变背景的个人名片

    原文地址：10分钟用Html+css写一个渐变背景的个人名片_网页制作_青青个人博客

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

    先看一下效果图：

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

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

    步骤分析：

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

    Html：

     

    1. <div class="card_a">
    2.    
    3. div>

    css：

    1. .card_a {
    2.     width: 800px;
    3.     height: 460px;
    4.     position: absolute;
    5.     left: 50%;
    6.     top: 50%;
    7.     margin-top: -230px;
    8.     margin-left: -400px;
    9.     background: #efe6f1;
    10.     overflow: hidden;
    11.     border-radius: 10px;
    12. }

    如图：

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

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

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

    一、CSS3线性渐变语法：

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

     例如设置背景颜色从上到下（默认方向）的颜色为粉色过渡到蓝色，写法如下：

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

    如图：

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

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

     

    如图：

    也可以用角度来实现，例如：

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

     

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

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

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

     

    如图：

    二、CSS3径向渐变语法：

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

     例如设置背景颜色从内到外（默认方向）的颜色为粉色过渡到黄色再过渡到蓝色，写法如下：

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

    如图：

    同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。

    例如：

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

     

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

    1. .card_a:after {
    2.     content: "";
    3.     position: absolute;
    4.     width: 700px;
    5.     height: 700px;
    6.     border-radius: 100%;
    7.     background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
    8.     top: -123px;
    9.     right: -352px;
    10. }

     

    如图：

     

    第三步，完成文字部分

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

    Html：

    1. <section>
    2.     <h2>杨青青<span>前端设计师span> h2>
    3.     <img src="wx.png" alt="">
    4.     <ul>
    5.       <li>电话 / 18649130945li>
    6.       <li>邮箱 / 476847113@qq.comli>
    7.       <li>地址 / 四川省·成都市li>
    8.       <li>网址 / www.qingqingblog.comli>
    9.     ul>
    10.   section>

    CSS：

    1. .card_a section {
    2.     width: 600px;
    3.     position: absolute;
    4.     left: 100px;
    5.     top: 80px;
    6.     z-index: 9;
    7. }
    8.  
    9. .card_a section h2 {
    10.     font-size: 50px;
    11.     letter-spacing: .1em;
    12.     margin-bottom: 66px;
    13. }
    14.  
    15. .card_a section span {
    16.     font-size: 28px;
    17.     font-weight: normal;
    18.     margin-left: 50px;
    19.     letter-spacing: normal;
    20. }
    21.  
    22. .card_a img {
    23.     float: right;
    24.     width: 140px
    25. }
    26.  
    27. .card_a section ul {
    28.     border-left: #222 3px solid;
    29.     padding-left: 28px;
    30. }
    31.  
    32. .card_a section ul li {
    33.     list-style: none;
    34.     line-height: 38px;
    35.     font-size: 18px;
    36. }

     

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

    1. html>
    2. <html lang="zh">
    3. <head>
    4. <meta charset="utf-8">
    5. <title>个人名片title>
    6. head>
    7. <body>
    8. <div class="card_a">
    9.   <section>
    10.     <h2>杨青青<span>前端设计师span> h2>
    11.     <img src="wx.png" alt="">
    12.     <ul>
    13.       <li>电话 / 18649130945li>
    14.       <li>邮箱 / 476847113@qq.comli>
    15.       <li>地址 / 四川省·成都市li>
    16.       <li>网址 / www.qingqingblog.comli>
    17.     ul>
    18.   section>
    19. div>
    20. <style>
    21.  * {
    22.     margin: 0;
    23.     padding: 0
    24. }
    25.  
    26. .card_a {
    27.     width: 800px;
    28.     height: 460px;
    29.     position: absolute;
    30.     left: 50%;
    31.     top: 50%;
    32.     margin-top: -230px;
    33.     margin-left: -400px;
    34.     background: #efe6f1;
    35.     overflow: hidden;
    36.     border-radius: 10px;
    37. }
    38.  
    39. .card_a:before {
    40.     content: "";
    41.     position: absolute;
    42.     width: 400px;
    43.     height: 400px;
    44.     border-radius: 100%;
    45.     background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
    46.     bottom: -53px;
    47.     left: -87px;
    48. }
    49.  
    50. .card_a:after {
    51.     content: "";
    52.     position: absolute;
    53.     width: 700px;
    54.     height: 700px;
    55.     border-radius: 100%;
    56.     background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
    57.     top: -123px;
    58.     right: -352px;
    59. }
    60.  
    61. .card_a section {
    62.     width: 600px;
    63.     position: absolute;
    64.     left: 100px;
    65.     top: 80px;
    66.     z-index: 9;
    67. }
    68.  
    69. .card_a section h2 {
    70.     font-size: 50px;
    71.     letter-spacing: .1em;
    72.     margin-bottom: 66px;
    73. }
    74.  
    75. .card_a section span {
    76.     font-size: 28px;
    77.     font-weight: normal;
    78.     margin-left: 50px;
    79.     letter-spacing: normal;
    80. }
    81.  
    82. .card_a img {
    83.     float: right;
    84.     width: 140px
    85. }
    86.  
    87. .card_a section ul {
    88.     border-left: #222 3px solid;
    89.     padding-left: 28px;
    90. }
    91.  
    92. .card_a section ul li {
    93.     list-style: none;
    94.     line-height: 38px;
    95.     font-size: 18px;
    96. }
    97.  
    98. style>
    99. body>
    100. html>

     

  • 相关阅读:
    python 函数相关概念
    C#进阶高级语法之LINQ：深入分析LINQ的查询表达式、延迟执行与PLINQ高级特性
    什么是数字化？什么是数字化转型？为什么企业选择数字化转型？
    Swift-19-基础入门
    【华为云原生入门级认证】第 2 章 云原生基础设施之容器技术
    Linux使用Docker完整安装Superset3，同时解决please use superset_config.py to override it报错
    科研小白的成长之路——博一年度总结
    嵌入式分享合集22
    猿创征文｜Linux 常用命令大全
    三大牛人外文文献阅读方法分享
  • 原文地址：https://blog.csdn.net/JSPSEO/article/details/125847343