Maxwell Tech Note

IE8 對於CSS3的支援沒有很好， 有些時候寫的CSS是無法在IE8上執行 這時候可以安裝 selectivizr.js 就可以改善這個問題 這是selectivizr.js專頁上的說明 selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest 詳細說明請見 http://selectivizr.com/

<style> .container { height: 300px; text-align: center; font: 0/0 a; background-color:#999; } .container:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; } #caseImage { display: inline-block; vertical-align: middle; font: 16px/1 Arial sans-serif; width:100%; } </style> <div class="container" > <img src="image.jpg" id="caseImage" style=" margin:auto; " /> </div>

CSS3提供了一個裁切圖片的功能， 可以讓設計師在抓圖片的時候，只框取圖片的部分就好 這個用法叫做clip object.style.clip="rect (top, right, bottom, left)" 不過他裁切的方法跟一般習慣的top,left,height,width有點不一樣 我用下面的範例跟圖片作示範 #crop { position:absolute; clip:rect(25px,200px,175px,50px); } 上圖是原圖為裁切 裁切出來下方的圖

之前在用CSS透明度的功能， 都要用 background-color:#000;opacity: 0.6; 來呈現 可是這樣的呈現方式 結果會連上面的文字都變成半透明的。（如圖上方表示） 現在在CSS3上 提供新的方式可以用rgba的方式來設定顏色與透明度。如 background-color:rgba(0,0,0,0.6) 這樣的作法就會只有背景呈現半透明。 內部的文字還是不透明的狀況

Div要有 scrollbar的功能 只要在CSS上加上 overflow:auto 屬性即可

30 個免費 CSS 函式庫 感謝保哥在FB上的分享

CSS 選取器方法 這邊有個列表說明CSS的選取器用法 要好好學習CSSS selector一定要熟悉才行 Pattern Meaning Described in section * Matches any element. Universal selector E Matches any E element (i.e., an element of type E). Type selectors E F Matches any F element that is a descendant of an E element. Descendant selectors E > F Matches any F element that is a child of an element E. Child selectors E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes E:active E:hover E:focus Matches E during certain user actions. The dynamic pseudo-classes E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class E + F Matches any F element immediately preceded by a sibling element E. Adjacent selectors E...

CSS3 推出好一陣子了 這邊有個CSS3 的DEMO可以參考一下 做了很多sample可以參考 使用上很簡單 CSS3 DEMO

幫你在網頁上畫出基本水平基準線的 CSS 小工具，其用法非常簡單，你想在網頁上畫出一個高 24px 的格線，就只要載入以下 CSS，如果高度要改變，直接修改網址上的數字即可。 <link rel="stylesheet" href=" http://basehold.it/24 " >

css style如下 <style type="text/css"> .footer { position:fixed !important; /*for ie*/ top:expression(document.body.clientHeight + offsetParent.scrollTop-this.offsetHeight-5); /*for ff*/ bottom:15px; right:15px; } </style> <div style="height: 120px;" id="footer" class="r1">Message</div>