2011年9月22日 星期四

[Crazy CSS] Box/Text Shadow Magic

如果要說CSS3最偉大的地方,除了transition & animation就是陰影: box-shadow & text-shadow

CSS3 Box shadow和text-shadow優在可以一個element下N個shadow (次序/z-index同multiple background),而且會一定程度上反映element變形過的效果*,加上有方向性(outset/inset)、xy offset及可變大及設定羽化範圍幾乎是有無限可能-修邊柔化的好工具。缺點是會拖慢rendering及有時會很buggy^...不過有了這兩個傢伙本來瘋狂的CSS又再更瘋狂了...

* 如border-radius...但不受transparent border影響
^ buggy的是text-shadow,而且是chrome在xp上的某些字型部分字會消失,十分靈異。(Update: Chrome 14+已修正 [source])

[Box shadow實戰]
box-shadow因為有inset和可以銳利化成正方體(solid color, blur radius = 0)、變圓形,配上:before & :after惡搞潛能真的很多 (論惡搞其實css3 gradient才是皇者,不過這個下次再說了)

[Text shadow實戰]
只要配上webkit-stroke和text clip mask photoshop是可以靠邊站的 (汗)
webkit這Engine真是令人又愛又恨啊。

2011年9月20日 星期二

[Crazy JS] Terminal Tool in Browser

SFD和人聊起就寫一下: 到底今天的browser可以有多少native app有的東西?
於是從cross-compiling聊到模擬器和各種porting...

[模擬器]
JSLinux
地上最強32 bit PC emulator in browser, Linux OS: 由bios到gcc compiler一應俱存還有boot機,不過又是一close tab東西就沒了? [wikipedia說明]
(至於HTML5 VNC/SSH Tool應該是一打,不贅)
(BBS的話一個gaaan就夠了...)

visual 6502
IC的東東,不會玩但光是看就很威。

JSNES
vNES的JS port,令人懷念的紅白機也可以在browser玩了


以上都是對系統有所要求的 (畢竟行模擬器要2x~4x原裝硬體的系統需求),以下則是把native app重寫/重編譯至browser環境運行:

[terminal tool]
web vi
vi (not vim) in your browser....又一以canvas作為基礎的web IDE…自mozilla Bespin (已和Ace合併)以後大家都這樣作了? 邪道啊...

Lodis
Database也有: NOSQL Database, Redis, in browser (mongoDB印象中好像有...)

speak.js
將 eSpeakEmscripten由C++重新編譯至JS...而且是除IE以外的browser都支援! (天殺的IE不吃data-uri wav...)


不過除了把一堆program塞進browser tool另外一種是把各種terminal tool用JS重新打造 (js port...不過更精確是npm port):

[js port]
https://github.com/danlucraft/git.js
用JS寫的git...有browser git repo viewer,但需要rake踢起 (有支援npm的計劃但看似未實行 XD)


看來因為node.js和強大的browser JSEngine可以預見再瘋狂的porting陸續有來 (笑)