如何用CSS3打造HTML5的Logo

本篇内容介绍了“如何用CSS3打造HTML5的Logo”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册网站空间、营销软件、网站建设、巫山网站维护、网站推广。

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

如何用CSS3打造HTML5的Logo

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

盾形

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

XML/HTML Code复制内容到剪贴板

  1.   

  

  •   

  •   

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

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

    我们看一下效果:

    如何用CSS3打造HTML5的Logo

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

    XML/HTML Code复制内容到剪贴板

    1.   

      

  •   

  •   

  • 效果如下:

    如何用CSS3打造HTML5的Logo

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4.   

    5.   

    6.   

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

    .light_orange{background:#ee6812}

    盾形已经完成了:

    如何用CSS3打造HTML5的Logo

    数字5

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4.   

    5.   

    6.   

    7.   

    8.   

    9.   

    10.   

    light_gray类和white类对应的样式:

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

    我们看到如下效果:

    如何用CSS3打造HTML5的Logo

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    最终效果:

    如何用CSS3打造HTML5的Logo

    辐射背景

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

    XML/HTML Code复制内容到剪贴板

    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.   

    60.   

    61.   

    62.   

    63.   

    64.   

    65.   

    HTML5的logo已经完成了!

    如何用CSS3打造HTML5的Logo

    “如何用CSS3打造HTML5的Logo”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


    网页题目:如何用CSS3打造HTML5的Logo
    标题路径:http://hbruida.cn/article/ggssdo.html

    其他资讯