鲨鱼网
教你用CSS3打造HTML5的Logo
创始人
2024-08-01 16:21:30
0次

本文将向大家介绍如何利用CSS3的新样式属性制作一个HTML5的Logo。我们先来看看最终的效果：

 

不要怀疑，上面的logo完全由HTML+CSS实现。我们将logo划分为盾形、数字5和辐射背景三大部分，下面将分别实现每个部分。

盾形

盾形在外形上是左右对称的，因此我们可先完成左半边，右半边可复制过来再修改一些参数。左半边准备用三个div实现，其中有两个div需要倾斜一定的角度来实现盾形的左边和底边，这里使用transform的skew来完成。代码如下（注意，这里只使用了webkit前缀的样式，仅在Chrome、Safari等Webkit内核浏览器支持）：

  1.   
 
    •  
    •  

    其中，CSS样式定义所有div都是绝对定位，dark_orange类指定了一个橘色背景：

    1. div{position:absolute}  
    2. .dark_orange{background:#e15016} 

    我们看一下效果：

     

    下面我们再复制一遍HTML，修改一些参数作为盾形的右侧：

    1.   
     
    •  
    •  

    效果如下：

     

    盾形的右侧里面有浅色的区域，我们将盾的右侧复制一份通过scale缩小一点，此外还需要调整一些样式属性：

    1.   
    2.   
    3.   
     
  •   
    •  
  •   
    •  
  •  

    light_orange对应浅一点儿的背景色：

    1. .light_orange{background:#ee6812} 

    盾形已经完成了：

     

    #p#

    数字5

    数字5由若干div组成，倾斜的效果依旧通过skew来控制：

    1.   
     
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

    • light_gray类和white类对应的样式：

    1. .light_gray{background:#ebebeb}  
    2. .white{background:#fff} 

    我们看到如下效果：

     

    为了最终实现数字5，我们需要在两个位置打两个“补丁”：

    1.   
    2.   
    3.  

    最终效果：

     

    #p#

    辐射背景

    辐射背景主要使用rotate来完成，这里我贴出完整的代码：

    1.   
    2.   
    3.   
    4.   
    5. HTML5 logo  
    6.   
    7.   
    8.   
    9.   
    10.      
    11.      
    12.      
    13.      
    14.      
    15.      
    16.      
    17.      
    18.      
    19.      
    20.      
    21.      
    22.      
    23.      
    24.      
    25.      
    26.      
    27.      
    28.      
    29.         
    30.         
    31.         
    32.         
    33.         
    34.         
    35.         
    36.         
    37.         
    38.            
    39.            
    40.            
    41.         
    42.         
    43.         
    44.         
    45.         
    46.         
    47.         
    48.         
    49.         
    50.         
    51.         
    52.         
    53.         
    54.      
    55.      
    56.   
    57.   
    58.   
    59.  

    HTML5的logo已经完成了！

     

     【小编碎语】5555555，小编通过这个方法做出来的标志，已经扭曲变形的另一个样子了，现在还在研究这事为什么，以后会相应补充上。

    【编辑推荐】

    1. ***HTML 5与Flash性能比较报告出炉:大跌你的眼球
    2. HTML 5来袭：Web前端开发面临十字路口
    3. 20佳惊艳超炫的HTML 5应用程序示例
    4. 九个令人惊叹的HTML 5和JavaScript实验
    5. 20个HTML 5和CSS3的免费网站模板与教程

     

    上一篇：剖析 Qt 中一些常用类中文说明

    下一篇：SEO探讨 网站优化与SEO的误区

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址，解救无法享受D... 在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...
    为啥国人偏爱 Mybatis，... 关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...