Feed on
Posts
Comments

Tag Archive 'CSS'

測試 Web Responsive Design Tool

Posted in Browser, Chrome, CSS, Google, www on May 3rd, 2013

Web CSS Programer 在撰寫 Responsive CSS Style 時，手邊一定會有一堆 Device，來測試當畫面小於 480 px 或大於 768 px 時，呈現的版面是否有亂掉，公司也花費許多成本來測試，現在不需要這樣了，我們可以透過線上 Tool 或者是 Plugin 來測試 Responsive Web Page，首先來介紹 Viewport resizer，此工具用法很簡單，進入官網後，將官網 Javascript 連結加入到我的最愛或 bookmarks，之後打開您的測試網站，再點選該 bookmark，你會發現網站上面多了一條 tool bar，可以自訂或調整 view size，預設也給了平板手機等多種畫面調整，讓您測試 Media Queries 是否有錯誤。

Read Full Post »

開發 iPhone Mobile Web App 一些小技巧

Posted in Mobile on Jul 17th, 2012

開發 Mobile Web App 有好一陣子，底下來紀錄過去開發的一些經驗以及 iPhone 上面一些 meta 的設定小技巧，適用於 Mobile Web 開發，如果有任何錯誤，請大家可以留言給我，也或者有不錯的建議都可以一起討論。不過此篇文章會比較偏向 iOS iPhone Device 上面的開發技巧。那廢話不多說了，來看看設計 Mobile 需要注意哪些事項。 良好的設計模式 底下是 Web 程式設計師應該注意的事項 html 檔案必須宣告 DOCTYPE 型態以目前 HTML5 就必須寫成 <!DOCTYPE html> 完全區隔 HTML, CSS, 和 JavaScript 檔案，以便將來好維護或擴充 完整的 html 架構，不要少個單引號或雙引號，或是少寫 close tag

Read Full Post »

CSS Layout 好幫手 Twitter bootstrap CDN

Posted in CSS, Twitter Bootstrap on Jul 7th, 2012

我相信大家對於 Twitter Bootstrap 並不陌生，它解決了程式設計師 Layout CSS 版面很多問題，並且提供多種 js plugin 及 CSS 樣式讓整個網站看起來更專業了。這次發現 NetDNA 這間 CDN 公司推出了 Twitter Bootstrap CDN 服務，不管 twitter bootstrap 提供了哪些 CSS 和 javascript，CDN 都已經有檔案可以使用。 如果要載入整個 CSS 和 Javascript 可以直接 include底下兩個檔案 # CSS //current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css # JS //current.bootstrapcdn.com/bootstrap-v204/js/bootstrap.min.js

Read Full Post »

Windwos 下安裝 Web Developer tool LiveReload

Posted in CSS on Apr 16th, 2012

去年寫了一篇: LiveReload 網頁程式設計師必備工具，介紹如何在 FreeBSD 及 Linux 底下安裝 Livereload，相信過程也都不難，只是筆者目前有在 Windows 底下開發 Web，原本是透過 Linux 來使用 Livereload，但是我發現只有在 Chrome 才可以 Work，但是 FireFox 提供的 LiveReload :: Firefox 附加元件，安裝之後，發現瀏覽器根本沒有出現按鈕讓使用者連接伺服器，所以這方法作罷，查了官網資料才知道已經有提供 Windows 安裝檔架設 Server，及 Browser extension 來連接伺服器。

Read Full Post »

Sass language 和 Compass 教學投影片

Posted in Compass CSS Framework, CSS on Nov 11th, 2011

在 Speakerdeck 發現一篇不錯的 Sass 和 Compass 投影片教學 Sass & Compass: The future of stylesheets now.，此教學把 Sass Language 以及 Compass 基礎撰寫方式及進階用法都介紹完畢了，非常實用，推薦給剛入門的網頁設計師，這樣一來可以減少開發時間，二來可以解決討厭的跨瀏覽器問題。

Read Full Post »

Front End Engineer 前端設計師必備工具 Live.js

Posted in CSS, javascript on Nov 4th, 2011

在不久之前介紹一篇: LiveReload 網頁程式設計師必備工具，該篇適合用在寫後端+前端的開發者，對於剛開始摸網頁的初學者可能不是很容易就上手，加上在 Windows 或 Linux 上面需要一點安裝步驟。不久之前在 IRC 頻道 #codeigniter.tw 有網友熱心提供一套好用工具 Live.js，這一套幫助您開發前端設計的部份，也就是 Javascript Html 跟 CSS，一樣讓您不用在切換視窗 Alt+TAB，只要您任何時間修改了 HTML + CSS + Javascript，視窗就會自動重新 reload，底下整理該工具特性 只有支援 Html JavaScript CSS 三種格式 只有支援網站 Local 檔案，也就是必須是同網域 並不支援 File:// 協定，換句話說必須有 Web Server (Apache or Lighttpd or Nginx)

Read Full Post »

LiveReload 網頁程式設計師必備工具

Posted in CSS, FreeBSD on Oct 27th, 2011

如果讀者目前從事的工作跟 Web Develop 相關，相信每天在按 Ctrl + R 的次數至少在上百次吧，也許花在這上面的時間會真的很煩，有沒有想過如果每次修改 html php css s[ca]ss js 檔案後，網頁會自動幫忙 reload 呢，這樣就可以另外買個螢幕把網頁拉過去，修改好檔案，螢幕就會幫忙重新整理，大家省下這些時間就可以專心寫 Code 了啦，解決此問題非常容易，那就是裝上 livereload 這套 rubygem 程式，底下先看看 livereload 影片:

Read Full Post »

在 Windows 底下安裝 Compass CSS Authoring Framework

Posted in Compass CSS Framework on Oct 5th, 2011

Compass 是一套 base on Sass Language 的一套 CSS Framework，它提供了豐富的 CSS3 原件，讓您可以加速開發 CSS，也繼承 Sass Language 的開發方式，支援 variables, mixins, selector inheritance…等，今天就來介紹如何在 Windows 底下快速安裝開發環境。如果想更瞭解 Sass 可以參考之前的文章: 加速開發 CSS 工具: Sass。 安裝步驟 (Install Compass) 在安裝 Compass 之前，您必須要先安裝 Ruby 開發環境，在 Ubuntu 或 Debian 底下可以透過 apt 的方式安裝: $ sudo apt-get install ruby1.9.1-full 如果你想裝 ruby 1.8 可以透過底下: $ sudo apt-get install ruby-full

Read Full Post »

加速開發 CSS 工具: Sass

Posted in CSS on May 26th, 2011

從來沒想過在開發 Web 網站過程，CSS Style 還可以程式化，設定變數來控制 CSS，今天來介紹一套用 command line 來轉換 CSS 的 Web Framework Plugin: SASS (Sassy CSS)，可以參考 SASS 的 Change log 版本差異，目前最新版本 3.0 以後開始支援 CSS3 做開發，底下先來介紹如何安裝: 作者是在 Ubuntu 10.10 的環境下安裝，利用 apt 方式先將環境需要的軟體安裝好 # 安裝 Ruby 環境  $ sudo apt-get install ruby  $ sudo apt-get install rake  $ sudo apt-get install rubygems Ruby 的安裝只需要一行指令 gem install [...]

Read Full Post »

CSS 3 圓角 border-radius 介紹

Posted in CSS on Apr 3rd, 2011

目前各家瀏覽器分別開始支援 CSS3，現在 MS 瀏覽器系列只有 IE 9 開始支援 CSS3，所以大家還是趕快升級到 IE 9.0，或者是使用 Google Chrome，FireFox 4.0 吧，以前還沒有 CSS 3 的時候，圓角功能都是靠 jQuery Plugin: Corner，有了 CSS3 大家就不用這麼麻煩了，一行就可以搞定喔。 CSS Border Radius Generator 大家可以參考 CSS Border Radius Generator 這網站，只要輸入4個角所需要的圓角半徑，就會自動產生 CSS 3 的語法喔 /* support Safari, Chrome */ -webkit-border-radius: 5px; /* support firefox */ -moz-border-radius: 5px; border-radius: 5px; 也可以個別設定角度 右上圓角： border-topright-radius: 5px; -moz-border-topright-radius: [...]

Read Full Post »

Older Posts »