关注前端开发
关注用户体验

CSS3实例:纯CSS3写Google Chrome新LOGO

上上篇文章我们知道了Google的Chrome浏览器更换新的LOGO,个人感觉很不错,简洁大方,又能表达Chrome快速的含义,所以打算用CSS3写一个Chrome LOGO

Tips:喜欢研究的同学可以用浏览器的开发工具看下源码!!!

点此查看实例展示

如果你用的是Chrome,恭喜你,一切正常,本LOGO支持webkit内核浏览器,别的什么都是浮云,想支持的自己多写一点CSS3吧。

写这篇文章意在提醒大家用最新的技术最新的方法去实践最人性化的前端!!

赞(0)
未经允许不得转载:大前端 » CSS3实例:纯CSS3写Google Chrome新LOGO
分享到: 更多 (0)

评论 30

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #25

    An impressive share, I simply with all this onto a colleague who was simply performing a small analysis on this. And then he the truth is bought me breakfast because I ran across it for him.. smile. So allow me to reword that: Thnx for that treat! But yeah Thnkx for spending plenty of time to discuss this, I believe strongly about it and enjoy reading much more about this topic. If possible, as you grow expertise, would you mind updating your website with an increase of details? It is extremely ideal for me. Huge thumb up in this writing!

    Branden Schiller2周前 (03-11)回复
  2. #24

    2012

    匿名5年前 (2014-04-28)回复
  3. #23

    还是不会弄。

    老Z7年前 (2011-12-11)回复
  4. #22

    遨游的!

    遨游logo

    .a1{

    width: 240px;

    height: 240px;

    border-radius:120px;

    background:#b1e4ff;

    border:2px solid #789cb6;

    box-shadow: 5px 5px 7px #999;

    -moz-border-radius: 120px;

    }

    .a2{

    width: 230px;

    height: 230px;

    border-radius: 115px;

    position: relative;top:5px;left:5px;

    background:#3b99e3;

    -moz-border-radius: 115px;

    }

    .a3{

    width: 150px;

    height: 100px;

    background:#ffffff;

    position: relative;top:70px;left:42px;

    border-radius: 3px 20px 3px 3px;

    -moz-border-radius: 3px 20px 3px 3px;

    }

    .a4{

    width: 35px;

    height: 45px;

    background:#ffffff;

    position: relative;top:30px;left:33px;

    border:25px solid #3b99e3;

    }

    菜鸟一个8年前 (2011-07-07)回复
  5. #21

    你这是我学习的基地了

    晨光8年前 (2011-07-05)回复
  6. #20

    好强悍的效果 😛

    奚少8年前 (2011-06-28)回复
  7. #19

    好给力额~~~

    moper8年前 (2011-06-22)回复
  8. #18

    支持下, :mrgreen:

    不错8年前 (2011-06-20)回复
  9. #17

    我表示不懂代码!既然来了,也占个位!

    蓝色离子8年前 (2011-06-17)回复
  10. #16

    很不错,可以这么说!

    菜鸟一个8年前 (2011-06-13)回复
  11. #15

    好像觉得不够圆呀

    xavier8年前 (2011-05-15)回复
    • 哈哈,也是,才发现,估计是浏览器解析的问题吧

      hear8年前 (2011-05-16)回复
  12. #14

    这也可以?

    xavier8年前 (2011-05-15)回复
  13. #13

    哇!!!!
    太牛啦 :mrgreen:

    jacky8年前 (2011-05-05)回复
  14. #12

    非常8错

    web前端寒风8年前 (2011-04-14)回复
  15. #11

    :mrgreen: 太帅了!!!好厉害。。。。

    zhailulu8年前 (2011-04-07)回复
  16. #10

    很强大的说。

    牧羊城8年前 (2011-04-05)回复
    • CSS3皮毛而已,更多精彩还是要好好学习CSS3的 :mrgreen:

      浩子8年前 (2011-04-11)回复
  17. #9

    CSS3真强大啊….. 🙄

    锋翼8年前 (2011-03-30)回复
    • :mrgreen: 这里只是简单的介绍了下基本的用法,强大之处很给力的

      浩子8年前 (2011-03-30)回复
  18. #8

    强大的CSS3。

    John8年前 (2011-03-27)回复
  19. #7

    好文章,让我对CSS3有了更深的了解。

    罗伊8年前 (2011-03-27)回复
  20. #6

    来了,浩子兄,最近太忙, 🙁 继续加油!

    神秘唯一8年前 (2011-03-26)回复
  21. #5

    非常喜欢这图标,是否有高清的chrome新图标大图?

    liveme8年前 (2011-03-24)回复
    • 高清大图木有,不过你可以PS个,也是很简单的!

      浩子8年前 (2011-03-25)回复
  22. #4

    支持一下……弄个详细的教程更好了!!

    azoe8年前 (2011-03-24)回复
  23. #3

    这个LOGO真的很不错,我喜欢,呵呵。

    宁波LED8年前 (2011-03-24)回复
  24. #2

    :mrgreen: 8错8错!

    MixSun8年前 (2011-03-24)回复
  25. #1

    啥都不说啦,先占座 :mrgreen:

    8错8年前 (2011-03-24)回复

themebetter 国内更好的WordPress主题服务商

立即前往