【好站報報】 RWD 版型參考網站

Media-Queries 首頁

各位支持飛肯的粉絲朋友們,大家好~不知道上週有沒有人來參加本班臉書打卡即可免費上課的「RWD 手機網頁入門體驗班」呢?

今天要來介紹大家一個很不錯的網站:「 Media Queries 」,這個網站主要是蒐集了非常多優秀的 RWD (” Responsive Web Design “,中文:響應式網頁設計) 的網頁版型範例… 繼續閱讀

in Good Design 好站報報

CSS Sprite 教學 – 條例式按鈕設計

CSS Sprite -ul-li-ok

大家好,在上一次飛肯教學文中,所提到的「CSS Sprite」語法技巧,不知道各位都練習過了嗎?
延續上次教學文的主題,今天我們再來做一個也很實用的「條例式按鈕設計」語法練習;在這篇教學文中,我們會先做一次一般版本的寫法,接著,我們就會教大家如何使用「CSS Sprite」,讓自己的網頁更為精簡、優化喔~ 繼續閱讀

in CSS 語法 - 網頁設計

CSS 教學 – CSS Sprite 網頁優化技巧入門

CSS-icon-Sprite

大家好,今天飛肯教學文要來教各位一個非常實用, CSS 語法網頁設計的重要技巧之一: 「CSS Sprite」。這個技巧不但可以幫我們減輕網頁主機端的圖檔數量、加快網頁的開啟速度,更進一步還可以讓網頁的 SEO 排名提高,所以大家一定要學會這一招,將它應用在排版時,就可以輕鬆達到網頁優化的效果喔! 繼續閱讀

in CSS 語法 - 網頁設計

【設計資源】扁平化陰影特效 icon – 免費自製下載網站

flatty-shadow.com

今天來介紹大家一個超讚的免費網站「 Flat Shadow Generator 」,不但網站本身的設計精簡優良,最主要是提供大家線上製作“扁平化陰影特效”的 icon 樣式,完成編輯之後,還可以選擇下載圖片或 code 來套用在網頁製作上…… 繼續閱讀

in Free Resource 好康報報, Good Design 好站報報

【 Photoshop 入門教學 】– 圓紙折角 icon 製作

fly-icon

雖然飛肯常常在臉書粉絲頁面上分享好康ㄟ網路資源給大家知道,不過,其實只要已經學會 Photoshop 的基本操作的話,我們可以試著自己動手畫出想要的 icon ,這樣就不必受限於別人畫好的圖案樣式啦!
今天這篇教學文,就來教會大家簡單做出一個圓形、有折角變化的貼紙感 icon 喔….. 繼續閱讀

in Photoshop 影像設計

【好站報報】日本 RWD 網站一把抓

Responsive Web Design JP

這次介紹的這個日本網站 “Responsive Web Design JP”,非常佛心地幫大家蒐集、整理出各種不同『 RWD ( Responsive Web Design ) – 響應式網頁』的版型設計,雖然僅限於日本的網站蒐集,但大量的網站範例參考,仍是研究 RWD 的同學們絕對不能錯過的研究資料喔… 繼續閱讀

in Good Design 好站報報