fbpx

很想學CSS嗎?先讓哆啦A夢教你CSS在各瀏覽器下有什麼不同吧!

2010/05/26 WordPress

雖然不斷的改版佈景來融合自己所學習的東西,不過還是得不斷的吸收學習更多的技術,今天在逛網站赫然發現了一個很屌的CSS範例,居然是利用CSS3製作出一支哆啦A夢,而且不靠任何圖片就完成了,丫湯好奇的檢視原始檔,哇靠,真的是太強了,看來哆啦A夢也開始教起了CSS語法,不過由於是CSS3語法製成,在各大瀏覽器下的呈現效果都有所不同,不僅很有效果也很有笑果啦。

01

純CSS哆啦A夢:

在開始說明之前看到上面那張圖各位應該都很驚訝,怎麼有那麼多種哆啦A夢,是有人惡搞的嗎?出現了方形的、畸型的也有,眼尖的網友一定有發現,每一個都是用不同的瀏覽器所開啟的,不過大家可別誤以為這只是網友惡搞哆啦A夢的改造圖片,這可是『純CSS語法』所畫出來的哆啦A夢,沒錯,是真的,你沒有看過,這可是CSS高手基於CSS3技術所製作出來的哆啦A夢,你一定很好奇的想要馬上看看這個頁面,大家可以先用各種不同瀏覽器來開以下頁面看看,開啟後可以檢視原始檔,確實是沒用到半張圖片的純CSS製作哦:

CSS3哆啦A夢:https://steachs.com/wp-content/uploads/doria/

各瀏覽器的CSS哆啦A夢比較圖及分析:

首先我們先來看看表現最優異的Chrome(左)及Firefox(右),看起來似乎是不相上下,不過只要仔細看在嘴巴的部份感覺是Chrome的表現比較優異一些。

chrome

firefox

再來我們來看看評價也很不錯的Opera(左)及Safari(右),在Opera之下的顏色呈現與Chrome不同,陰影似乎也較弱一點,而在Safari下很可惜的,居然對CSS3的支援弱掉了,但陰影表現還不錯。

opera safari

最後我們就來看看本來就對CSS3不支援的IE(右)及KKMAN(左),雖然KKMAN是基於IE核心的瀏覽器,不過IE的核心又分為不少版本,從這邊我們就可以看的出來,在右邊的IE瀏覽器下,很可愛的圓形小叮噹變成了方型的變形金鋼了,而左邊的KKMAN下,小叮噹不僅變成變形金鋼,還加入了ET的世界,真的是太誇張了。

kkmanie8

結論:

以上可以得到一個最簡單的結論,目前市佔率最大的IE針對CSS3語法支援度不僅非常的差,感覺還有點悲哀,而繪圖玩家最愛用的MAC所開發的瀏覽器Safari也在這樣的測試下感覺有點失望,所以如果大家想要在瀏覽網頁時都能呈現最好的效果的話,建議還是使用Chrome、Firefox或是Opera。

說到這裡,愛用IE的人一定會覺得,沒關係,聽說IE9大大的支援新的技術,改良了核心引擎,網頁上也直接標明了支援『CSS3』,我們等就好,好吧~為了讓大家從IE的夢中醒來,丫湯只好再截了一張目前IE9的Demo版的呈現效果,把大家從IE中搖醒吧!!

ie9

沒錯,是有進步了,想要變成變形金鋼在改造後因為失敗,所以只有手臂變成方形,快換掉IE吧,別再害網頁設計的人頭痛腳痛的只為了讓IE也呈現正常…

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

19 個留言

  1. Avatar K表示:

    阿湯哥很笨唷~這是偏頗G粉做的惡意比較,IE跑不出來是因為webkit 專屬語法的關係。

    阿湯 說:

    嗯嗯~

  2. Avatar 執事貓表示:

    回頭又看到阿湯的這篇突然想到IE終於在10裡面的哆啦A夢是正常的了
    不過陰影部分還是要加強

    阿湯說:

    等 IE 20 再來看

  3. Avatar 小歐表示:

    個人是非常喜歡Chrome,因為速度快
    而且比較不會愛當機
    之前有過IE一直當機的悲慘經驗…

    只不過Chrome有一些缺點
    就是它的快取很麻煩,像我在網站上覆蓋圖片後要瀏覽時,常常要重新整理三四次才會更新圖片
    (雖然可以清除快取,可是我比較懶XD)

    阿湯說:

    呵呵,他的快取比較粘

  4. Avatar akw28888表示:

    這代碼 已經有人提出 這根本是假的
    因為他的CSS 仔細看 會發現 ……… chrome-……. 以下省略
    或者是……firefox-……. 這是在以前CSS3未規定出來對流覽器適用的語法 IE當然不支援= =

    阿湯說:

    呵~不過只能說IE開發速度太慢了

  5. Avatar Zhong表示:

    fireofox 4.0的嘴巴不正常喔XD

    阿湯說:

    firefox acid 3 97分…

  6. Avatar Devis表示:

    老大~ 可以分享怎么做的吗?xD
    很想学~^^(我之前一直Save不到图片的一些图片原来是CSS3的>”<)

    阿湯說:

    這不是我做的哦,如果你CSS功力夠強..你也可以

  7. Avatar 佳佳表示:

    哪裡有眼珠會動
    我看沒動呢!!

    css能做到這樣真強
    要很了解語法!!!!

    阿湯說:

    眼珠要動我記得好像是要用firefox還是chrome

  8. Avatar Mr.OPR表示:

    太可怕了…
    我突然發現…
    哆啦A夢的眼珠會動…!

    阿湯說:

    本來就會呀@@,這利用核心的特性做的

  9. Avatar 小崇表示:

    努力的幫客戶洗腦使用Chrome中= =……

    阿湯說:

    加油

  10. Avatar M.A.表示:

    你的Safari是什麼版本的…
    我的Safari顯示的效果跟Google Chrome一樣好!!!

    阿湯說:

    4.X版~

  11. Avatar jackey表示:

    剛好今天有看過這篇,沒看懂!不過看完阿湯哥的詳細解釋才知道,原來都是用css3寫出來的呀!

    阿湯說:

    是呀.超強的

  12. Avatar kalahan表示:

    偶來看看不同的小叮噹
    用的firefox !支持丫湯 繼續分享!

    阿湯說:

    改天做一支賤兔吧

  13. Avatar ansen表示:

    好像,据说,这个东西的源代码有问题,专门针对Chrome做了优化。

    阿湯說:

    但也不能這麼說,如果扣掉Chrome的部份,整體的效果依然是最好..

  14. Avatar Mr.OPR表示:

    “快換掉IE吧,別再害網頁設計的人頭痛腳痛的只為了讓IE也呈現正常…”
    這句話實在太經典了,能不能叫M$不要再繼續開發IE了…
    讓IE隨著時間消失吧…。
    那個網址裡看見”相当悲剧的IE家族”時我笑了…

    不過這也太神了吧,我從來不知道CSS有這麼強大,
    我竟然都看不懂。

    阿湯說:

    這個要真的很了解…

  15. Avatar 好手表示:

    雖然結果有點搞笑,不過這還真是一個「掛著CSS3標準的羊頭,賣著推廣Webkit核心」的黑心廣告阿XD

    阿湯說:

    還可以啦~

  16. Avatar jhangyu表示:

    瀏覽器之家的那篇文章根本不知所云,
    感覺一個門外漢拿CSS在說嘴,無言…

    阿湯說:

    加減是這樣啦@@

  17. 哈哈!KKMAN那個看起來超囧的啦!非但沒有圓角,連線條都跑掉了
    不忍心看到小叮噹變成大金剛就要趕快換瀏覽器哦!!(誤)

    阿湯說:

    = =

  18. Avatar 碳碳表示:

    現在只等以後教學圖片是不是就只用CSS來達成就好(想太多啦!)xDD

    阿湯說:

    那一篇大概要做5天

  19. Avatar 艾西表示:

    提醒一下站長,這個似乎還有點值得討論的地方
    不過意念很棒
    http://pcedu.pconline.com.cn/softnews/yejie/1005/2131117.html

    阿湯說:

    嗯嗯,這個我有看過

發表留言 »

姓名(*)
信箱(*)