好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-使用纯洁的CSS实现HTML5的新logo

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

&nbs p;

一、号外号外

号外号外, HTML 官方 LOG o华丽丽滴诞生了。您可以起官方logo页面(点击这里)其观摩。

它是如此的闪耀,以至于我不得 不用 手挡住眼前的强光,它的朝气,它的魄力迎面袭来,让人窒息。

上图为截图,截图也是图。下图为其128卡哇伊袖珍版图片:

下图为256蓬勃朝气青少年版的:

下图为标准256*256 背景索引透明阳刚少年版:

HT ML 5出了此款logo,意义重大。我 觉得 这标志着HTML5已经 发展 到了一个新的台阶,其发展与进步一不可阻挡,透出了HTML5的野心与霸气。

此logo长得有点 360安全卫士 logo的味道:

难道暗含 防 御之一,抵御flash或是其他杂碎技 术 的侵袭。谁 知道 呢?反正与本文主题无关,愿者自答了。

二、使用纯粹的 CSS 实现此logo

你不得不佩服某些人,总是喜欢乐此不疲地尝试新技术,做些新玩意。比如说Eric,这回,就在HTML5 logo出来不久,其就用比周冬雨还有纯洁的CSS惟妙惟肖地刻画了HTML的新logo。

想看效果?您可以狠狠地点击这里:用CSS实现HTML5的新logo demo

就实现而言,使用了不少的CSS3的东东,主要用来实现旋转效果。然后,元素很疯狂地使用绝对元素定位。然后, 一点 一点,就成了。因为使用了CSS3,所以,在IE浏览器下,此logo严重毁容,见下图(截自IE7浏览器):

所以,您需要移步现代浏览器查看效果,如果要按照效果给各个浏览器排名的话 应该 是:Ch rom e ≈ Safari > FireFox > opera

此logo效果使用CSS3的内容大致就是这些:

 - webkit  -t ransform: skewX(-5 deg ); -moz-transform: skewX(-5deg); -o-transform: skewX(-5deg); -ms-transform: skewX(-5deg); transform: skewX(-5deg); -webk IT -transform-ori gin : 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; 

的说。其中 -ms- 前缀,我常戏称的“猫屎”前缀,是针对IE9浏览器的。毕竟 国外 浏览器比咋们要领先不少,我到现在还没有拉过IE9的小手呢!

本文就是个 简单 的展示,颇多的CSS代码量以及漫天飞雪的绝对定位使得此效果基本上在实际项目中没有什么应用的前景,所以,懒得多说,还是留点时间看日剧《ady 最后的犯罪画像》吧,大爱北川景子。所以,就这些。

参涉页面:
http://www.w3. org /html/logo/
CSS3 in HTML5? HTML5 in CSS3!
HTML5 and the New W3C-Endorsed Logo

(本篇完)

觉得可用,就经常来吧! 欢迎评论哦!  html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-使用纯洁的CSS实现HTML5的新logo 全部内容,希望文章能够帮你解决 html5教程-使用纯洁的CSS实现HTML5的新logo 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-使用纯洁的CSS实现HTML5的新logo的详细内容...

  阅读:55次