文章標籤 ‘Tutorials’

22

網頁設計師的必備武器 Compass.app

你是網頁設計師嗎,當你寫 css 時是否常常頭暈目眩、眼神渙散、注意力無法集中呢?是否常常因為重複的原始碼搞的心情浮躁、焦慮不安?還是會為了層層結構問題落的精神崩潰、夜夜失眠的下場?沒關係,今天就要為大家介紹一款全新的必殺配備 - Compass.app 應用程式。

Compass.app 是為設計師所設計的工具,在撰寫網頁風格程式碼時,可以用較強力的 Sass 語法(是種可延伸的 CSS),來更有效率地完成工作。利用 Compass 的延伸模組,就可以不必再自行撰寫 CSS 細節,不但使得快速原型試驗(Rapid Prototyping)能更直接切中要點,也更有趣了。” - by gugod

沒~~錯!就如以上所介紹,利用 Compass.app 你能更迅速的加入所有基礎建設、更快速的套用 css3 效果、更明確的釐清你的父子結構、更簡易的加進重複性設定,而且,以前常常遇到 ie 獨有的 haslayout 或是忘了關的浮動區塊(clearfix)也不再是問題,讓你輕輕鬆鬆一行搞定。另外再告訴你一個好消息,現在購買只需要 7 塊美金,趕快訂購,欲購從速,由於沒有存貨問題晚了還是買的到。

好吧,叫賣完畢,這麼好用的工具不買是你的損失。話說回來,雖然是自家公司開發的工具,但自己寫這篇介紹時也只用 Compass.app 實做了一個小案子,以下介紹如有錯誤還請多多包涵。

April 6th, 2011

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