在網頁中制作中，如果你沒有用上響應式網頁設計，網頁在手機看上去使會顯得很小，因此手機瀏覽器便貼心地為我們提供了自動放大文字的功能，本來此功能是很實用的，可是有些時候如果頁面設計固定了寬度或高度，這個放大功能就有可能令網頁出現走位，例如文字覆蓋在圖片背景上面，這種情況下，我們便可能希望讓網頁停用放大功能。
以往我們可以使用 text-adjust-none 來禁止放大功能，你可能也試過這個方法但沒有成功，這是因為 Chrome 自版本 30 開始就停用了這個屬性，現在要令文字不被放大，你可以在你的 CSS 加入下面這句來達成：
為了讓元素能夠隨父元素的寬高去自動調整, 當我們設定一個元素的寬度或高度時, 很多時便會以比例%去做設定，可是很多時候除了直接設定的寬高外，我們還需要設定一些 padding 或 border 以令內容看起來更美觀，可是令人煩惱的是 padding 和 border 並不包括在寬高的計算內, 以致在 fluid 模式下很容易走位，有時我會用負值的 margin 去解決這問題，今天則介紹另一 CSS 的設定，可輕鬆解決這個問題，它就是 box-sizing
box-sizing 有兩個值, 分別是:
其實還有 padding-box 的, 可是這個值只有 firefox 才能支援, 相信也很少有人用, 總不能設計出一個網站只能供 firefox 正常瀏覽吧!
聰明的你應該一看就知道了, border-box 正是我們想要的東西, 將 box-sizing 設定成 border-box, 那麼不論你的 padding 和 border 是多少, 它都會被計算在寬高的總數中, 以你設定的寬高減去 padding 和 border, 便是內容的可容納寬高, 不用再擔心走位的問題了。
．．．．．．．．．．．
在制作網頁時, 我們很常會使用雜訊的效果去制作背景圖片, 而常用的方法都是直接弄一張圖片去做這個效果。可是當我們的網站有多個位置要使用到有雜訊的圖片, 而且需要不同的顏色及透明度, 那豈不要弄很多張不同的圖片? 以下便介紹大家一個方法, 只需使用一張透明的雜訊圖片, 便可制作無限個不同顏色不同透明度的雜訊背景
首先, 最基本的是建立一個不透明的雜訊背景, 這是很簡單的事, 一個背景顏色加一張雜訊圖片便可以了, 除IE6或以下的瀏覽器, 其他瀏覽器應該也沒有問題的了, CSS代碼如下
background: url(noise.png) #F00
這樣便建立了一個有雜訊的紅色背景, 如果你需要透明度, 可使用 rgba 去設定背景顏色:
background: url(noise.png) rgba(255,0,0,0.5)
這樣便將原來的紅色雜訊背景變成 50% 透明的背景了
可是IE8或以下的瀏覽器並不支援 rgba 的設定, 所以我們又要做一些手腳了:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#AAFF0000', endColorstr='#AAFF0000');
加了以上的 filter 代碼後, IE 便可看到透明的背景, 上面 FF0000 是顏色代碼, 而 AA 則是十六進制的透明度, FF 代表不透明, 00 代表全透明
可是你可能發現怎麼透明是透明了, 但雜訊好像不見了, 沒錯, 因為 rgba 和 filter 共存時, IE 便吃不了背景圖片了, 所以這時我們要使用 CSS Hack 去令他們互相配合, 整套代碼如下
background: url(noise.png) rgba(255,0,0,0.5); // for modern browser
background: url(noise.png) transparent \\\\9;// for IE8 or below
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#77FF0000', endColorstr='#77FF0000');
以下是一個例子:
隨著Web2.0的高速發展, ajax在網頁設計中變得舉足輕重。而在我們設計ajax時, 常常需要為載入間隔加入載入中的訊息, 以往我們多半會用gif圖示或直接幾個文字交代載入中的訊息, 而現在, 你可有一個新的選擇。
利用 CSS3 的 animation 和 transform, 你可以很簡單地使用純 CSS 產生一個 loading 的圖示, 當然這只是一堆元素組合而成的一個動畫, 並不是一張真正的圖片, 但比起使用gif圖示就多了幾分時尚, 效能也比使用圖示為高, 而且方便易用, 隨時可依喜好更改顏色形狀:
我們在寫網頁時, 不時會用到三角形物件, 但 html 一般不能直接輸出三角形, 以下介紹大家一個網站, 可以利用純 CSS 方式產生三角形物件。