文章分類 ‘Tutorials’

No

Compass @include float 的問題

Compass 中的 @include float 是為了解決 IE bug 而存在,所生出來的 css 是把區塊 display:inline 以及 float,這種做法一般來說不會有什麼問題,但如果要做 responsive design 的話,webkit 瀏覽器就很可能會遇到 float 的 問題,正常視窗縮小再放大時,原本 float 的元素會被擠到下方。

January 13th, 2012

Read More

No

Compass image-sprite + linear-gradient

Compass 威力強大,有時一個了解的概念實際要運用時常常會卡住不知該怎麼下手,下了手又可能因為少了括號之類的符號而爛掉..,好吧,承認後面這個原因是自己不會寫程式的不足所造成 XD,總之這邊提供 Compass image-sprite + linear-gradient 的寫法,以後忘了怎麼寫時自己還可以查詢一下。話說這是 hlb 提醒的寫法,Compass 網站也有類似技法,只是不包含 image-sprite。

January 13th, 2012

Read More

6

CSS Image Rollover 延伸應用

因為案子實際需求所延伸出來的應用技巧,而骨子裡用的就是 Image Rollover

實際情況是選單前需要有代表性 icon,icon 是包覆在 <a> 裡的 <img>,但選單本身因為登入者權限的不同,開放可點的選項也不同,而不能點選的選項 icon 必須是灰階的狀態。

換句話說,有 <a> 時影像是有色彩的,若只是單純的 <li>選單</li>,則影像必須是灰階無色彩的。

October 24th, 2009

Read More

2

CSS Image Rollover

簡單的一個小技巧。有時呈現照片或廠商 logo 時會希望有些變化,當滑鼠 hover link 時讓灰階換成原本的彩色圖檔,但因為某些緣故必須以 <img> 方式呈現,這時就可以靠這方式簡單做到想要的效果。

基本原理就是利用 overflow: hidden 以及 position 讓圖檔隱藏,當滑鼠移過時再秀出隱藏的部分。將圖檔上下合併成一張。

July 5th, 2009

Read More

No

簡單繪製自己的卡通風格大頭照

很初階的 photoshop 技巧,對圖層有些概念以及會使用筆型工具 (貝茲曲線) 就可以繪製了。首先找張自己高解析的照片,最好能高於 1024*768,這樣在繪製細部時會比較好掌握,不過這裡因尺寸問題會縮小示範。使用筆型工具按照輪廓描繪,描繪時可以先將圖層透明度歸零,這樣才不會遮住你俊俏美麗的臉龐。

April 22nd, 2009

Read More