標籤：jquery
純CSS製作手指點擊動態 – pure css click animation
CSS 的 animation屬性可以鬆地製作手指點擊動態。
<PREVIEW>
<HTML>
|
1 2 3 4 |
<a class="button"> <div class="flash"></div> <img src="index_gobt.png" alt=""> </a> |
純CSS製作掃光效果 – pure css light sweep
CSS 的 animation屬性可以鬆地達到掃光(流光)效果。
<PREVIEW>
<HTML>
|
1 2 3 4 |
<a class="button"> <div class="flash"></div> <img src="index_gobt.png" alt=""> </a> |
css display:table left、right div不再長短腳 (pure CSS make float div same height)
在做float div的時候常常因為左右邊的內容不一樣多造成div不能一樣高，這篇提供一個解決方案，只要利用display屬性就可以達成左右一樣就的效果。
<preview>
繼續閱讀 “css display:table left、right div不再長短腳 (pure CSS make float div same height)"
jQuery go to top 按鈕 (go to top button)
CSS ol/ul li 建立章節目錄 (css ol/ul li decoration)
CSS ol/ul li 遞減 (css ol/ul li reversed)
最近在做網頁時突然需要遞減排序編號的功能，在html5的架構下<ol>可以直接加reversed屬性，但如果是用<ul>標籤的話，以下也提供一個解決方案。
css方法
|
1 2 3 4 5 6 7 8 9 10 11 |
ul { list-style-type: none; counter-reset: item 142; /*counter-reset: item(自定變數) 142(項目總數);*/ } ul > li { counter-increment: item -1; } ul > li:before { content: counter(item); } |
html5方法
|
1 2 3 4 5 |
<ol reversed> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> |
CSS 正方形 寬 等於 高 height equals width
CSS製作正方形只要使用:before選取器就可以了
html
|
1 2 3 |
<div class="box"> <div class="content">內容文字Content Text</div> </div> |
CSS3 calc()函式 寬width / 高height 不同單位( percent, px, em, vh, vw ) 加減乘除運算Math
calc()函式，可以做任何數字形態的屬性值運算
● 數字形態屬性值的屬性 CSS property values with number
寬width
高height
內距padding
外距margin
框border-width
placement top right bottom left
等等etc…
繼續閱讀 “CSS3 calc()函式 寬width / 高height 不同單位( percent, px, em, vh, vw ) 加減乘除運算Math"
自製網頁瀏覽器網址列上的icon圖示 – Website Favicon
要做一個個性化的網站，
瀏覽器網址列上的icon圖示當然是不能少
其實製作的方法很簡單
繼續閱讀 “自製網頁瀏覽器網址列上的icon圖示 – Website Favicon"
