2012年10月10日 星期三

[已完成!]運用CSS來「畫」出中華民國國旗|這樣算是慶祝國慶日嗎?






















(上面的不是圖片喔XDD不信按右鍵另存圖片試試www)
對了悲情IE sucks系列都開不起來喔哭哭,終於體會大家為何會說這句了XD
這才是圖片w
好吧我得承認我實在是太貪心了!!

明明從來沒玩過CSS,卻憑著僅有的印象記得,CSS可以用來畫哆啦A夢!!

於是就Google到了這篇。中華人民共和國的國旗繪法做為參考。

10/11更新後記:這兩天幾乎是把CSS從無到稍有基礎,在基本知識十分不足的情況下趕出這作品,Chrome的分頁還因此開了五六十個= =(6 G RAM我愛你啊),許多參考資料來源、學習方式,原始碼解析(按右鍵就知道惹XD)等等,將會開一篇新文章來解釋(終於有梗了)。這次作品大約花了七小時吧XDD,畢竟還要新增一大堆從來沒有過的知識。

然後我承認沒有從10/8日開始編寫是我的錯,這樣錯過的國慶日要怎辦啊!!(再過二十分鐘就明天惹OTZ)

總算有了成果好交代一下這七小時的光陰啊www

更新:已經將歷程寫成一篇教學文,請移駕參考

繼續閱讀後為黑歷史,可看可不看,只因本人堅持而不刪除=w=

這是圖片

畫出來差不多就是這種感覺吧,附上修改過的原始碼:
<html>
<div style="position: absolute; top: 0; left: 0; z-index: 2"><span style="font-size:250pt;color:red">■</span></div>
<div style="position: absolute; top: 0; left: 141; z-index: 1"><span style="font-size:250pt;color:red">■</span></div>
<div style="position: absolute; top: 30; left: 0; z-index: 2"><span style="font-size:250pt;color:red">■</span></div>
<div style="position: absolute; top: 30; left: 141; z-index: 1"><span style="font-size:250pt;color:red">■</span></div>
<div style="position: absolute; top: 172; left: 30;  z-index: 7"><span style="font-size:50pt;color:yellow">★</span></div>
<div style="position: absolute; top: 240; left: 95;  z-index: 7"><span style="font-size:12pt;color:yellow">★</span></div>
<div style="position: absolute; top: 207; left: 114;  z-index: 7"><span style="font-size:12pt;color:yellow">★</span></div>
<div style="position: absolute; top: 171; left: 107;  z-index: 7"><span style="font-size:12pt;color:yellow">★</span></div>
<div style="position: absolute; top: 150; left: 76; z-index: 7"><span style="font-size:12pt;color:yellow">★</span></div>
</html>
貼到Notepad++之類的編輯器比較好看。存成html後用瀏覽器開啟就行。對了記得要先編譯成UTF-8之後再貼上,因為有特殊符號。

然後別打我因為出現國旗真的沒有政治意涵啦只是參考它的代碼才可以依樣畫葫蘆啊(山寨中)

目前(10:53)進度到這裡:
這是圖片w
旋轉效果一直搞不定,繼續研究吧...暫時代碼就不釋出了。果然第一次玩大的就很容易碰到瓶頸啊=A=

同場加映:日本國旗。













2 則留言 :

  1. 不知道是手機的瀏覽器不支援,還是其它原因,只看的到圖片的那國旗是正常的,左邊的國旗,那個太陽加光芒看起來,像火箭@@??
    不過,真的值得讚許,(看到國旗,整個人就熱血起來!!)

    回覆刪除
    回覆
    1. 是android內建的瀏覽器嗎?明明是webkit啊XDDD

      倒數第二張國旗是失敗作就不用理它了w

      左攔小工具的寫法有些問題有空再改好了= =

      刪除