Archive for CSS

[新書分享] 成為一流的前端工程師:打造專業的UX網站

NewImage

 

2014的下半年,因為換到一個App與系統開發的公司,性質有點類似 start-up company,因為全公司正職人員只有11個,所以要處理的工作內容蠻多元的,所以主要都忙著熟悉新的工作,一忙起來竟然快要半年沒有更新 Blog。

不過,下班之餘,今年也順利出版了一本新書:『成為一流的前端工程師:打造專業的UX網站』這裏有博客來的書本介紹連結:http://www.books.com.tw/products/0010656853

Read more

一張圖說明 Responsive Design 的精華

之前有寫 一篇文章 談 Responsive Design 的概念,中文似乎沒有統一,先稱為自適性設計吧

許多知名的網站框架都有導入這樣的概念 (例如:Twitter 所用的 Bootstrap)

可以大幅減少開發的時間

 

這次製作了一張圖,直接說明其意義:

 responsiveDesign

 

如果嫌圖片太小,這裡有原圖可以觀看

http://i.imgur.com/jWuS0.png

 

其中 pixel 所列的數字是大致參考值

確切數字還是必須根據裝置不同而定

 

如果有錯誤,歡迎指正!

[JavaScript] [CSS] LESS.js 介紹

image 

如果你希望加速你修改 CSS 的能力,或是你希望在聽到客戶的新需求後 ( 例如:希望能把所有的按鈕變成綠色的 ) ,能夠在 5 分鐘之內修改好給它,你就可以考慮用看看 LESS.js

純 CSS Developer 遇到需求修改會說:「請等我 30 分鐘,我馬上就改好了」
用 LESS 的 Developer 遇到需求修改會說:「等我10秒鐘,好了」

如果對這樣的目標有興趣的話,可以來看看以下的介紹:

Read more

[CSS][設計素材] CSS 動畫外掛

這個 plugin 提供了很多物件的動畫狀態
很不錯分享給大家

Animate.css - a bunch of plug-and-play CSS animations

Animate.css – a bunch of plug-and-play CSS animations.

[CSS] CSS Regions

網路上看到 CSS Region 的範例

可以在 這裡 下載

原文在這:http://galjot.si/css-regions
中文翻譯:http://www.qianduan.net/css-regions.html

簡單說就是透過 CSS 的設定,可隨螢幕解析度不同做出適當的反應,避免版面跑掉。不過目前支援性好像還不高,所以小心使用。