CSS Inner Border – 內框線

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

繼續閱讀 CSS Inner Border – 內框線

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

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

繼續閱讀 解決 HTML Anchor 內文被選單遮住的問題

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

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

繼續閱讀 SASS基本使用教學:變數、函式、繼承、巢狀撰寫

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

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

繼續閱讀 當CSS遇上變數、函式,就變成SASS啦~ SASS安裝教學

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

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

繼續閱讀 Zen Coding 幫助你快速開發網站的好東西,喜歡手寫網頁的人必備~

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

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

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

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

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

繼續閱讀 【CSS 3】純粹使用CSS就可以讓你的網站擁有圓角效果!

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

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

繼續閱讀 如何判斷瀏覽器是IE並套用相應的程式碼? (If IE技巧)

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

2009-09-06 000

關於W3C:

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

繼續閱讀 W3C驗證 – 了解你網站的CSS是否符合標準

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

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

最大寬度:

標籤名稱 img{

max-width:寬度值

}

最大高度:

標籤名稱 img{

max-height:高度值

}

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

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

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

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

應該是用JavaScript來達到吧