Compass @include float 的問題

No

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

January 13th, 2012

Read More

Compass image-sprite + linear-gradient

No

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

January 13th, 2012

Read More

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

22

你是網頁設計師嗎,當你寫 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

字體尺寸是問題

1

昨夜 hlb 好心提醒我, 我的部落格已經半年多沒寫新文章了,自己想想也驚了一下,這兩天正準備要續租空間,但部落格卻遲遲無更新也太說不過去,所以趕緊先來寫這篇一直困擾我的不大不小問題。

使用者觀點

撇開學術單位、政府機關等特殊案例,網站使用的字體尺寸漸漸有在放大的趨勢,早幾年文章內容會用 11px 至 13px 的字體大小(不論語系),現在許多網站則開始把原本標題的 15px 拿來用在文章

June 25th, 2010

Read More

CSS Image Rollover 延伸應用

6

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

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

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

October 24th, 2009

Read More

i-design Day Light Theme

4

說要做 Switch Style 說了好幾個月,一來當做 Theme design 的練習,二來一直認為深色版面並不適合中文網站,不過拖了半年才把東西做出來,偷懶偷很兇。

還是有些技術方面的問題,然後 IE6 應該是爛的,不過瀏覽正常也就懶得處理了。

用的是最簡單的 styleswitcher.js,原本是希望能做到每隔一段時間自動換 theme,但是面對 wordpress 與 php 結合的問題,對於不會程式的我實在頭痛,所以乾脆整個簡化。

August 24th, 2009

Read More