CSS on Lin's Blog

CSS Inner Border - 內框線

Wed, 26 Apr 2017 09:54:28 +0000

這次在設計個人入口頁時因為想做出內框線（Inner Border）的效果，學到一種很聰明的寫法，提到 CSS Inner Border，直覺肯定是想到用 padding 或 margin 把盒子撐大，但其實這樣是行不通的，當你把盒子撐大時，框線也會跟著移動，無法做出內框線的樣式。

解決 HTML Anchor 內文被選單遮住的問題

Mon, 20 Feb 2017 23:28:39 +0000

HTML 的 Anchor 錨點功能十分方便，當網頁過長時可以透過 Anchor 讓訪客快速的移到指定段落，這樣的手法在許多技術文件、部落格都有出現，如果你看到類似 https://coder.tw/?p=123#section1 的網址就是應用 HTML Anchor 的特性，這樣的特性雖然方便卻也帶來一些問題，最常見因為網頁最上方有浮動選單，當訪客點擊 Anchor 連結進到網頁後，雖然瀏覽器有自動捲到指定章節，但卻有部分文字被選單遮住，我始終很煩惱這問題，今天恰好在閱讀 Facebook 技術文件時發現他們的解法蠻不錯的。

SASS基本使用教學：變數、函式、繼承、巢狀撰寫

Tue, 07 Feb 2012 23:14:55 +0000

在前一篇文章《當CSS遇上變數、函式，就變成SASS啦～ SASS安裝教學》有教到要如何安裝SASS，而在這篇文章中，則是要教大家如何使用SASS ，這篇文章會提到SASS裡面的四個特色：變數（Variables）、函式（Mixin）、繼承（extend）、巢狀撰寫（Nesting）

當CSS遇上變數、函式，就變成SASS啦～ SASS安裝教學

Tue, 07 Feb 2012 21:31:00 +0000

同時會寫程式跟CSS的人應該都會有一種想法，就是想要讓CSS裡面可以使用變數、函式這些寫程式才有的東西，因為很多CSS語法其實是重複的，如果可以有變數，有函式，那撰寫CSS的速度就會變快很多，一般來講這夢想是不可能實現的… 不過今天要跟大家介紹一個新的玩具，他叫做SASS，透過SASS，你可以讓CSS變得很不一樣～

Zen Coding 幫助你快速開發網站的好東西，喜歡手寫網頁的人必備～

Mon, 22 Aug 2011 21:40:44 +0000

我想應該很多人都跟我一樣，寫網頁時不喜歡用DW直接拉介面，而是喜歡開啟Notepad直接撰寫HTML吧～這種方法的好處是可以磨練自己XD 但是壞處卻是開發速度有點慢（其實習慣這種方式之後速度比DW還要快…XD）今天要跟大家介紹Zen Coding，他可以讓你的寫網頁速度加快N倍！你可以直接用CSS語句的方式寫網頁～

【CSS 3】透過transform: rotate做出圖片、網頁傾斜的效果

Sat, 23 Apr 2011 09:22:08 +0000

之前新聞曾報導，在手機版的Google網頁裡面搜尋「傾斜」的話，得到的網頁會往右邊斜，這其實並不是很難做出來的效果，只要使用一行CSS語法就可以達到了，因為他已經是CSS 3的標準之一囉～目前來講這個傾斜的CSS 3語法IE系列還不支援(包含IE 9)，另外就是說使用的時候不是一行就能，而是要分成很多行，因為每種瀏覽器對應的語法都不太相同，這點應該在日後會改善

【CSS 3】純粹使用CSS就可以讓你的網站擁有圓角效果！

Sat, 16 Apr 2011 11:32:53 +0000

在CSS 2的時代，我們如果要讓圖片、div標籤擁有圓角效果其實是蠻麻煩的，簡單點的用法是套用jQuery裡面別人幫你寫好的Function，如果喜歡自己搞的話，就必須要設計圓角圖，然後讓圓角圖去重疊，反正就是很複雜就對了，但是在CSS 3裡面，你不在需要用那麼麻煩的東西，直接在CSS語法裡面設定就可以了！

如何判斷瀏覽器是IE並套用相應的程式碼？ (If IE技巧)

Mon, 28 Feb 2011 13:54:10 +0000

如果你是一個網頁設計師，那當你在設計網頁時最討厭的一件事一定是：瀏覽器相容性，每一種瀏覽器對於CSS、JavaScript的支援都不一樣，往往你的CSS語法用Cgrome瀏覽器看的時候很正常，可是換成Firefox卻會有不同效果出現，而這種情況又以IE最常發生，因為IE對於CSS、JavaScript的支援度最差，別的瀏覽器可能是效果不同，IE卻有可能是沒有效果… 所以這篇文章就是要教大家如何去針對IE瀏覽器或非IE瀏覽器套用特定的程式碼、CSS語法

W3C驗證 - 了解你網站的CSS是否符合標準

Sun, 06 Sep 2009 13:36:56 +0000

關於W3C:

W3C是一個致力於網頁標準化的組織,W3C這個組織負責制定各種網業相關的東西,例如標準的CSS4以及XHTML都是由W3C制定的,為甚麼要制定這些呢?其實原因很簡單,不知道大家有沒有想過網頁是要在不同瀏覽器上顯示的,如果每間瀏覽器所要使用的語法都不同那網頁設計師啟不是很累?但是要讓所有的瀏覽器廠商都再一起至定一個標準又也些問題,我想最主要是因為大家都在競爭吧,就因為這樣而出現了W3C這個組織,由公正的第三方來制定,而各家瀏覽器廠商(如IE.Opera.Firefox)則必須要遵守這些基本的語法,當然如果各家瀏覽器要自己增加一些語法也不是不行,話說回來也不是所有瀏覽器都遵守W3C的規範,像IE這種大牌的就不遵守,所以很多網頁設計師都對IE又愛又恨(愛是因為很多人都用IE,恨是因為IE很不守規則) 講到這裡我想大家都對W3C這個組織有一定了解了吧,以下我要敎各位如何檢查網頁是否符合標準

[CSS]設定圖片最大寬度&高度

Fri, 15 May 2009 21:00:17 +0000

利用一個css的語法可以達到設定圖片最大寬度跟高度的效果

最大寬度:
標籤名稱 img{
max-width:寬度值
}
最大高度:
標籤名稱 img{
max-height:高度值
}

另外高度(寬度)值的那裡可以使用百分比來表示

這些語法可以幫助你讓網誌的圖片不要超出範圍

不過這個語法在IE6上面是無效的

我還在研究讓IE也有效果的方法

應該是用JavaScript來達到吧