# Effeckt.css demo
上面頁面都是利用 CSS3 的 Animations 與 Transitions 效果做出來的
GitHub
使用該 library 須載入 Modernizr 這個 library Modernizr 是用來判斷 browser 是否支援 HTML5 or CSS3 所用的 library, 並能把相同功能但在不同 browser 實作的 API 或 CSS3 property 一致化
主要是透過添加 class or data attribute 的方式, Modernizer 就在其中做了整合各 browser 的事情
## How does it work 動畫部分是利用 CSS3 的 Animations 與 Transitions 至於事件的觸發是利用 CSS3 Transition Events, 由於各個 browser 實作都不一樣, 所以這裡加載了一個 /js/demo/demo.js 的 js, 但在這 js 有個有趣的地方就是有用 ajax 去載入開發者名單, 所以就另開個 js 來載入
...
Category: Css
# CSS attribute ## 顏色與背景 color: background-color: background-images: background-repeat: no-repeat repeat-x repeat-y repeat background-position: center background-attachment: fixed scroll; background: url() left center no-repeat; ## 文字 text-align: left right center vertical-align: top bottom text-top text-bottom middle baseline super sub line-height: letter-spacing: (字距) word-spacing: (單字間距) text-indent: (首行縮排) font-family: font-size: font-weight: 100~900 font-style: italic oblique text-decoration: underline overline line-through none text-decoration: blink 文字閃爍(部分瀏覽器有用) text-decoration: line-through 刪除線 text-decoration: overline 文字頂部加線 text-decoration: underline 文字底部加線 text-decoration: none 沒有改變 ## 區塊 margin: padding: border-color: transparent border-width: border-style: solid double dotted dashed inset outset groove ridge width: height: vertical-align: middle ## 編排與顯示 float:left right clear:left right both position:relative absolute fixed top: left: right: bottom: z-index: display: block inline-block none inline visibility: hidden visible overflow: hidden scroll auto ## 條列項目 list-style: none disc square ## 其他 cursor: pointer crosshair wait help text move ## 虛擬樣式 :link 當文字或圖案是連結時 :hover 當滑鼠指標移到連結文字或圖案 :avctive 當滑鼠按下連結文字或圖案 :visited 當連結已經點過時 :focus focus :before { content: ""; } :after { content: ""; }
...
# Tip about CSS ## clearfix 為了清除浮動
.clearfix { *zoom: 1; } .clearfix:after { display: table; content: ""; line-height: 0; clear: both; } ## padding-right or bottom & margin-right or bottom 如遇 model box 問題盡可能在右或下做修正(因為 XY 是朝右下發展) 避免用到 top 盡量用 bottom
## scroll bar 在 windows 中，scroll bar 的寬是 16px
## a & img 在用 a 包覆 img 時會發現一個現象就是就算把 a 用 block 設定寬高設成跟 img 一樣還是會發現滑鼠在要從圖片下面移進圖片會發現進去前會有約 2px 的空白滑鼠就先變成有連結的狀態，經過詢問後發現是因為 img 的關係，img 本身會有一點高度在bottom，所以如果要去掉這高度有一些作法
...
# text ellipsis div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 240px; } ## Tip 上述為必要 element 必須為 block 如用在 span 等行內元素，需用 display: inline-block; 多行會變一行顯示
...