文章標籤 ‘CSS’

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

No

圖片取代文字

這是最近一再遇到的例子,文章本身單純只是想表達為何不該再用圖片取代一般文字內容。

很久很久以前,在自己還在用 <table> 切版時,為了美觀也非常喜歡用圖片取代應有的文字內容,在那個年代,不懂什麼是網頁標準、不懂什麼是使用者經驗、不懂 CSS,只知道為了美觀就應該不厭其煩的用圖片,因此,三分鐘可以做好的事要花三個小時甚至更長的時間處理,做自己的網站也就罷了,時間成本自己吸收,但做別人的東西時就開始知道痛在哪裡了,即使只有一個字的變動也是要大費周章的開啟 Photoshop 重切圖片。然後,開始一昧的怪罪中文字型:「為什麼那麼多鋸齒!為什麼只有兩種字型可以用!」,最後連為什麼要生在台灣非得用中文都出來了。在那個時期完全沒想過根本就是自己能力的不成熟,只想用圖片消滅一切的中文字。

July 28th, 2009

Read More

2

CSS Image Rollover

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

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

July 5th, 2009

Read More

6

PSD2HTML

國外盛行的服務 PSD to HTML 漸漸開始出現在台灣,自己也開始在接觸這塊,畢竟大多數情況下這技術對自己並不是問題,有這樣的市場就沒道理跟銀子過不去,但內心仍舊感到這種模式並不是一個好的發展空間,感覺存在很多淺在的問題。

正常情況下 Visual designer 最清楚自己設計的東西,在設計畫面同時往往已經明白考慮過在實際頁面上會是什麼狀態,HTML/CSS 該怎麼寫來達到心中想要的效果,滑鼠移過去又該是怎麼樣的一個變化,所有細節都在心中盤算過才會出 PSD。

June 6th, 2009

Read More

No

Registrano Blogger

記得第一次用 Blogger 設計 i-design blog 時花了近一個禮拜的時間,其中大多時間花在研究 Blogger 種種,另外當時對 CSS 仍有點小生疏,當然當時自己是不知道自己斤兩的。

這次做 Handlino 服務產品 Registrano 的 Blogger 著實輕鬆不少,一來對 Blogger 有一定認識且不用再研究 plugin,二來 對 CSS 感覺駕輕就熟,因此除了 theme design 與一些程式方面小問題之外,所有過程加起來大概只用了兩個工作天就完成,這樣的效率自己免不了竊竊欣喜了一下。

誠如 hlb 所說,Blogger 的 code 其實還真的挺髒的,html 標籤有一半以上毫無作用,不過猜想這應該是為了讓 designer 方便擴充、修改 theme 之用,只是對於用不到的人來說,在看原始碼時難免覺得不舒服就是。

May 4th, 2009

Read More