鐵人二號的設計手札

文章來源: http://blog.xuite.net/grassboy/Tech/46187663

 

What’s Compass CSS ?

大家或多或少都寫過CSS，不論是網頁開發者在套版，
或是在Xuite、Pi*net、無*小站修改自己的網誌樣式，
但在撰寫CSS的過程中，感覺是常態，但又讓人感到困擾的狀況通常是…

今天要定義一個div(id=xxx)裡面的超連結(a)的樣式，
通常就會寫一段css script

#xxx a {
/* 樣式設定 */
}

然後又覺得，滑鼠移上去後，又要有不同的樣式…
所以會再寫一段：

#xxx a:hover {
/* 樣式設定 */
}

好…等到要設定的樣式愈來愈多…
我們會寫愈來愈多

SelectorA SelectorB SelectC … {
/* 樣式設定 */
}

的區塊…但大部分的狀況是…

其實我們要描述的網頁元素是有結構性的，
但傳統CSS的寫法並無法把這層結構性描述出來…

用下面這張圖說明… (圖片來源)

當我們要定義C D E F的樣式
我們必需在CSS檔這樣寫

A B C { /*樣式設定*/}
A B D { /*樣式設定*/}
A B E { /*樣式設定*/}
A F { /*樣式設定*/}
/*(上面其實用了不少Copy and Paste XD)*/

為什麼不能像寫程式一樣…
有層次的將CSS檔寫成下面降子呢？

A {
B{
/*A B的樣式設定*/
C{ /*A B C的樣式設定*/}
D{ /*A B D的樣式設定*/}
E{ /*A B E的樣式設定*/}
}
F {
/*A F的樣式設定*/
}
}

沒錯…這就是Compass CSS試圖解決的問題！

**讓CSS更加的結構化！**

Compass CSS可以理解成一支CSS Compiler
當我們使用Compass CSS去撰寫CSS檔時，
我們可以用更結構化的方式去描述我們網站元素的樣式…
然後交給Compass去產生原始browser看得懂(相對較難維護)的CSS檔
傳統的CSS檔可能相同的事情我們要一直作，
但使用Compass，因為要寫的CSS Code變少了，且更加結構化，
所以除了加快撰寫CSS的速度，也而且可以降低手誤key錯的機率
至於麻煩鎖碎的事，就交給Compass去操煩吧XD

Compass的方便用法: function call!!

如果Compass只能讓開發CSS更加結構化…那我想他應該不致於拿麼紅…
compass CSS還可以透過一些特殊的指令例如 @import 、 @include
去將一些compass預先定義的css style，甚至是特殊的樣式設定
很簡單的讓開發者透過短短的指令就實作出來！

@import
類似CSS原生的 @import
但在Compass下，@import後面接的可以不只是要讀入的css檔案位置
從這次的Demo過程…給我的認知…
@import所作的似乎有「載入函式庫」的概念
(詳細概念還請指正^^~)
這次Demo有show了 @import "compass/reset"
降子就可以作到CSS Reset了~
然後還有 @import "compass"
似乎是把compass預先定義好的常用function載入？

@include
前面的 @import 把「函式庫」導入了…
那麼…@include就是「呼叫函式」的指令了！
為什麼會需要呼叫函式呢？
請回想…我們曾經為了一個還沒標準化的CSS圓角
寫了下列的樣式設定：
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
五個屬性宣告，其實就只是為了告訴(不同的)瀏覽器「我要一個5px的圓角」
這種麻煩的事為什麼要我們自己Copy/Paste Co出來呢？
在Compass的架構下… 只要@include border-radius(5px)就行了！
(注意，記得先@import "compass" or @import "compass/css3/border-radius" )
在這次的Demo中，@include到的funtion還滿多的~(整個就是火力展式啊！)
例如：不用考慮IE6可能會有的bug的 @include float-left/float-right
可以直接指定超連結在 normal/hover/active/visted/focus 等不同狀態下顏色設定的 @include link-colors(…)
和圓角設定一樣麻煩的陰影設定 @include box-shadow( );

個人覺得function call應該是compass最強大的地方…
而且據說user也能夠自行定義function來使用~
感覺就能作更多方便的事情XD

Compass的其他噱頭

Compass還有其他和程式設計很接近的機制

例如「變數」的機制…
我們可以在compass的css檔下定義變數，命名方式有點類似PHP，用$開頭
然後在後面的css宣告中，就可以使用該變數
在CSS宣告過程中用變數，老實說我還沒想過…
但仔細想想，以網站顏色風格這個Case而言
同樣的顏色，其實很常出現在不同元素下的顏色設定
把重複的地方用變數去取代，也能讓程式更好維護~也很符合程式設計的原則XD

Error Report機制
這也是這次Demo很驚豔我的機制…
平常在寫程式的時候常常就會遇到Compile/Parse Error
既然compass本質上算是compiler…
那麼總有手誤寫錯程式造成compass看不懂的狀況吧？
在我們撰寫compass的過程中，如果有不符寫法規範的狀況…
compass會產生一個pop-up提示開發者compass css檔的哪一行有誤
我覺得更強的地方在於…如果我略過了這個pop-up
compass甚至會直接透過他產生的CSS，去印出錯誤訊息…
也就是如果我某個網頁有call到outputed CSS，
那個網頁就會直接把錯誤訊息print出來~想不注意到都很難XD

另外…compass也能透過修改Config檔，
決定輸出的CSS格式如何(帶不帶註解？是否最小化？)
也算是滿足在開發過程中許多不同的需求降子…

總結Compass

嗯嗯…還是回到一開始所講的…

compass的目的就是要讓撰寫/維護CSS的過程更方便

雖然Compass有很多優點…
不過一來我好像不是很常在寫「純CSS」
二來是compass如果是gui apps是要付7鎂下載的…
(command line版本是opensource，可以直接下載，但我習慣的開發環境是windows下的gVim…囧a)
所以目前我寫CSS檔，暫時還是傳統的方法寫^^~
但這次的RGBA聚會，我多少有被compass強大的火力展示到~
等到以後被一大串的CSS檔撰寫過程弄煩了…
我想花個200元省開發時間也是相當划算的啦XD

來源: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

10 jQuery Custom Scrollbar Plugins

If you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design, than make sure you check this list of 10 jQuery custom scrollbar plugins. Hope you find the following information helpful.

1. jScrollPane – custom cross-browser scrollbars

Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled.

 

2. Plugin JQuery : Scrollbar

This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin.
The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizible space of a div for example. It is aimed to the people who don’t want a default scrollbar. Whell scroll management is also included in this but is not activated.

 

3. Tiny Scrollbar – A lightweight jQuery plugin

Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface. It can scroll vertical or horizontal, supports scrolling by wheel, thumb, or track and the mimified the size is 2,29 kb

 

4. jQuery Custom Content Scroller

A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.

 

5. jQuery Scrollbar replacements

These scrollbars are fully themable allowing their behaviour to be determined as well as their look. This script uses the ‘jquery.corner’ plugin for the lovely cross-browser rounded corners and ‘jquery.drag’ for more reliable drag event registering.

 

6. Scrollbar Paper

Scrollbar Paper does not replace browser’s default scrollbar.
Instead, it covers it with a custom scrollbar, like paper on a wall: that is why it is called Scrollbar Paper.
The benefit of this approach is that the way browser’s default scrollbar behaves is not modified: mouse wheel support, text selection and scrolling performance are the same as usual.

 

7. A custom scrollbar for a DIV

This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb. Here the rangeinput is used to control scrolling of a DIV. A little more coding and you can present your products like Apple does.

 

8. ShortScroll – A jQuery UI Google Wave style scroll bar

Jesse Baird has developed this custom scrollbar as a jQuery UI widget after seeing the scroll bar in Google Wave, which added functionality and style making much better than the browser default scroll bar..CSS3 background gradients to do all of the fancy background stuff so if you plan to support Internet Explorer and care about eye candy, plan on creating your own background images.

 

9. jQuery Scroll

A jQuery plugin which renders a custom, CSS styleable vertical scrollbar.

 

10. Vertical scrollbar using jQuery UI slider

The code assumes a single div with fixed height (#scroll-pane in my example) which contains an absolutely positioned div (#scroll-content) which contains the content for scrolling.

 

 

文章來源: http://www.m4go.com/55-jQuery-Form-Plugins-To-Download-And-Use/?page=4

LightForm

LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.

Advanced Form Validation

Form Validator with several features such as grouping required fields or conditional checking if it is valid or not. Also you can validate string, numeric, date or e-mail. And you can combine several validations. For example: required numeric input and minimum 5 chars long.

Auto Complete

Auto-complete takes input from the user, and tries to form a list of words that match the users input. The function attaches itself to the input field selected, and also creates the UL drop down from within so all you need is have the styles for it ready.

Basic Usage

No parameters are required, but the path to your ajax script should be correct, and you will need styles set for the UL drop down.

Masked Input Plugin

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user

Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Contactable

Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. If you have ever seen the feedback forms provided by kamypyle you will be familiar with the technique they use, however contactable makes this process even simpler by overlaying the content onto your page quickly and easily with a slide effect and inline validation.

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

JavaScript image combobox

Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element. I hope you’ll like this.

jQuery checkbox v.1.3.0 Beta 1

Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.

Radiobutton and Checkbox-Replacement

Datepicker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.

文章來源:  http://ka-yue.com/blog/uniform-jquery-form-style-plugin

Uniform 是個新的 jQuery 的表單美化插件，能夠美化 CSS 管不到的 form elements，例如 file upload、radio box、check box 。其實網上美化表單的 JavaScript 插件的多不勝數，但是這個是我見過最好的一個，為甚麼？

首先是下拉選單 (select element) 的實作方法。其他表單美化插件一般都會將整個 select element 移走，換上一個用自制的 JavaScript 下拉選單 － 而且一般做得反應遲鈍、難看。我自己很討厭這種做法。

可是 Uniform 的實作方法就好得多：圖檔一如以往地被設定成背景圖片，不同的是，Uniform 將 select element 的透明白降至 0%，使它從人們的視覺上移走 － 而不是從 DOM 中移走。所以，原來的 select element 其實依舊存在，用戶點擊的時候其實是點中了原生那個 select element。

下面是其代碼：

<div id="uniform-">
  <span>Option 3</span>
  <select style="opacity: 0;">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

同樣原理還應用到其他 form element 上。Uniform 支援 File upload input、radio、checkbox、button，但居然沒有一般的 input text box，雖然要美化一般的 text box 對大家應該沒有難度吧。

下載：http://pixelmatrixdesign.com/uniform/

文章來源:http://briian.com/?p=7267

一般來說，我們只要將「favicon.ico」圖示放到網站根目錄，然後在網頁原始碼的<head>之間加入如下敘述：

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

就可以讓一般網頁瀏覽器正常顯示網站的網頁圖示，另外還有很多不同方式可以展示不同格式的網頁圖示，如果你還是習慣使用傳統的「favicon.ico」圖示的話，可以試試看本文所介紹的超簡單轉檔工具，只要把你的圖檔上傳到網站去，馬上幫你轉成網站用的favicon.ico圖示。

儘管這種方法沒法對圖示做任何修改或調整，不過對於不想花太多腦筋的人來說，的確是個很方便的小工具。

網站名稱：FavIcon Generator

網站網址：http://tools.dynamicdrive.com/favicon/

延伸閱讀： Favicon.ico Generator 網站小圖示製造機（支援動態圖示）

延伸閱讀： SimplyIcon 快速把照片、圖檔轉成ICON圖示（支援多檔批次處理）

使用方法：

第1步 開啟FavIcon Generator網站，按「瀏覽...」按鈕選取你要轉成「favicon.ico」圖示的圖檔，再按一下「Create Icon」按鈕，即可開始轉檔。

第2步 轉檔完成後，可以在網頁下方看到「favicon.ico」圖示的預覽畫面，確定這是你要的圖後，再按一下「Download FavIcon」按鈕將檔案下載回來就可以囉。

文章來源:http://www.freegroup.org/2010/11/brushlovers-free-premium-photoshop-brushes/

BrushLovers 獨家收錄大量高解析度、獨特的Photoshop筆刷，並分享於網站內。使用者可以在這個網站裡預覽、搜尋數百萬個免費的筆刷素材，大部分的筆刷都是免費的，而且可用於個人或商業項目。如果你覺得 BrushLovers 不錯，付費購買套餐來獲得一定額度的點數，就下載付費的筆刷圖案。

BrushLovers 首頁已經列出最新、最熱門和最高評價的筆刷素材，點擊左上角的篩選項目來瀏覽適當的分類，除此之外，我會建議從右上角的下拉式選單選取「Free Brushes」（只顯示免費筆刷項目）

從上方的 All Brushes 選取筆刷分類也是可以的，BrushLovers 的瀏覽模式設計的還算不錯，瀏覽時不會讓你迷失方向或是不知道從哪裡下載。

找到喜歡的筆刷了嗎？點擊進入詳細資料頁面後，可以找到它的其它預覽圖以及相關說明，包括內容物、檔案大小、價格和分類等等，接著按下 DOWNLOAD 即可下載。

文章來源:http://www.minwt.com/?p=2516

工具名稱：abrViewer
工具版本：1.1
工具性質：免費
工具語言：英文
適用平台：Win
所需元件：Microsoft .NET Framework 1.1
官方網站：http://abrviewer.sourceforge.net/

---

Step1
下載完畢後，雙響abrViewer.NET.exe進入abrViewer工作面板後，點選【LoadBrushes】鈕選擇筆刷的存放路徑。

---

Step2
選擇完畢後，就會自動秀出該目錄下有那些筆刷樣式，接著再點選筆刷名稱，過一會右半邊就會出現該筆刷的縮圖。

---

Step3
若要將這些筆刷縮圖匯出，先點選左下方的筆刷名稱，再按滑鼠右鍵選擇【Export thumbnails】。

---

Step4
接著再選擇要匯出的路徑與目錄，按下確定後就會自動將筆刷縮圖，存放到指定的目錄中囉！

---

這個工具真的很方便，就不用每次要一一的載入，若你手邊也收集了很多筆刷時，可善用這一個筆刷預覽工具，讓你更容易管理筆刷，這邊可以載入無數筆刷目錄路徑，就可預覽更多的筆刷縮圖，若要清除筆刷清單時，只要對著筆刷清單按右錄選擇Clear就可清掉。

本文受密碼保護，須填寫您的密碼才能閱讀。

密碼：