Colorpeek:查看與分享 CSS 色碼的線上工具

Colorpeek 是一個查看與分享 CSS 色碼的線上工具,除了顯示 CSS 顏色還可以自動取出圖片的主要顏色。 一般在設計網頁時,一定常常會需要查看某項網頁元素的顏色,或是為某一個網頁元素選擇一個適當的顏色,如果是團隊開發的情況,在多個網頁開發者之間討論顏色時,也會碰到需要互相交流顏色選擇的看法,當然你可以直接將 hex triplet 貼上 Photoshop 這類的會提軟體,看看這個顏色的感覺,調整好顏色之後,再把這個 hex triplet 貼在 Email 寄給另外一位開發者,跟他說這個顏色不錯,但是這樣每次調整顏色時都要開啟 Photoshop 這樣的軟體,其實不太方便。 ...

December 6, 2013 · G. T. Wang

Google Chrome 的 DevTools 現在支援手機平台的網頁開發了

Google Chrome 的最新版加入了手機網頁應用程式開發功能,現在你可以直接使用 DevTools 進行手機網頁應用程式的開發與除錯了。 Google 最近釋出了 Windows、Mac、Linux 與 Android 平台的 Chrome 32 beta 版,並且針對 DevTools 加入了手機平台的網頁開發功能,現在手機的開發人員可以利用這個功能對手機版的網頁應用程式(web apps)進行開發與除錯的動作,當你在設計應用程式時,新的 DevTools 可以在開發環境中直接看到手機的畫面,以下是它的操作過程。 ...

December 4, 2013 · G. T. Wang

使用 ScrollUp jQuery Plugin 在網頁與部落格中加入回到頁首(Back To Top)按鈕

這裡介紹如何使用 scrollUp jQuery Plugin,在網頁與部落格中加入回到頁首(Back To Top)的按鈕。 有些網頁設計者會在一些內容比較長的網頁中加入回到頁首(Back To Top)的按鈕,這種按鈕在一開始載入網頁時並不會顯示,而在使用者往下捲動網頁內容時就會自動出現在畫面的角落,只要使用者用滑鼠點一下這個按鈕,就會自動將捲軸拉到最上方,是一個可以讓使用者更方便瀏覽網頁的小功能。 ...

December 2, 2013 · G. T. Wang

自定 Google Chrome 網頁開發人員工具(DevTools)佈景主題教學

這裡教大家如何自定 Google Chrome 瀏覽器的網頁開發人員工具(Chrome Developer Tools)佈景主題。 在 Google Chrome 瀏覽器中有提供了一個 DevTools 網頁開發人員工具,它可以讓網頁開發者非常方便的在上面開發網頁或除錯,而這個工具在預設的情況下是使用白底灰字的布景主題,如果你是需要長時間使用這個工具開發的人,這樣的配色可能會讓眼睛很吃力。 ...

November 27, 2013 · G. T. Wang

在 Google Chrome 中使用 console.table() 函數進行 JavaScript 程式除錯(Debug)

這裡介紹如何在 Google Chrome 瀏覽器中使用 console.table() 函數進行 JavaScript 程式的除錯(Debug)。 在 Web Developer Conference 2013 這個研討會中,Marcus Ross 提供大家各種在 Google Chrome 特有的 JavaScript 除錯(debug)方法,這裡我們介紹其中一種使用 console.table() 函數的方式。 ...

November 23, 2013 · G. T. Wang