iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

7 Like 1 留言 5970 瀏覽

鐵人賽開發技術 DAY 40

30天掌握Sass語法系列第 36 篇

技術 Sass開發流程設計 - (10)Susy 版型種類介紹

這一次我想聊的是關於susy所提供的grid種類，因為他不單單只能設計RWD版型而已，一些常見的網頁版型設定也都有支援提供，後面如果有時間的話也會設計一個...

廖洧杰 ‧ 2013-10-25

8 Like 1 留言 18704 瀏覽

鐵人賽開發技術 DAY 39

CSS沒有極限系列第 35 篇

技術 CSS - display: box 與 display: flex

CSS範例：[http://ashareaday.wcc.tw/#2013-10-24 ](http://ashareaday.wcc.tw/#2013-10-...

卡斯伯 ‧ 2013-10-24

9 Like 1 留言 8954 瀏覽

鐵人賽開發技術 DAY 39

30天掌握Sass語法系列第 35 篇

技術 Sass開發流程設計 - (9) Off-Canvas layout with Susy

這篇文章竟然花了我7個小時XDD 中間忘了存檔重打外，重新打一遍又發現到新的觀念，於是又越拖越晚...冏，不過終於開始講到我想分享的一些較深入的Sass設...

廖洧杰 ‧ 2013-10-24

6 Like 2 留言 8622 瀏覽

鐵人賽開發技術 DAY 38

30天掌握Sass語法系列第 34 篇

技術 Sass開發流程設計 - (8) susy grid教學(2)

本日susy重點： 1.利用omega並排元素內容 2.透過isolation來達成Responsive image gallery grid 在以往我們在設...

廖洧杰 ‧ 2013-10-23

3 Like 1 留言 2479 瀏覽

鐵人賽開發技術 DAY 22

作個網站吧！系列第 22 篇

技術作個網站吧！Quickly Sass(4)-CSS無痛轉移Sass

既然開始學Sass了，以前的檔案當然也要趁機會轉成Sass，練習兼整理，一舉兩得～既然開始學Sass了，以前的檔案當然也要趁機會轉成Sass，練習兼整理，一舉...

tpodomoto ‧ 2013-10-22

10 Like 3 留言 18083 瀏覽

鐵人賽開發技術 DAY 37

30天掌握Sass語法系列第 33 篇

達標好文技術 Sass開發流程設計 - (7) susy grid教學(1)

由於行動裝置的逐步普及， Responsive Web Design(RWD)也逐漸變為市場趨勢，所以這裡也來聊一下關於RWD的Sass格線系統，在以前Sa...

廖洧杰 ‧ 2013-10-22

6 Like 2 留言 5783 瀏覽

鐵人賽開發技術 DAY 36

30天掌握Sass語法系列第 32 篇

技術 Sass開發流程設計 - (6) 如何逐步整合自己的Sass資料夾

在開發數個網站後，網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程，今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料，範...

廖洧杰 ‧ 2013-10-21

8 Like 1 留言 53467 瀏覽

鐵人賽開發技術 DAY 35

CSS沒有極限系列第 31 篇

技術 CSS3 垂直文字書寫

html最早都是應用於拉丁文上，而拉丁文主要是水平由左到右的書寫方式，而到了其他的語系國家，文字也只能用水平由左到右的書寫方式；而漢字是屬於垂直書寫由右到左的書...

卡斯伯 ‧ 2013-10-20

4 Like 0 留言 5484 瀏覽

鐵人賽開發技術 DAY 35

30天掌握Sass語法系列第 31 篇

技術 Sass開發流程設計 - (5) Sass設計資源整理

除了閉門造車設計Sass網站設計流程外，我自己也時常會去搜尋其他網頁設計師的Sass資源，再去從對方的設計風格和理念找出優缺，衡量是否該改善我自己撰寫Sa...

廖洧杰 ‧ 2013-10-20

4 Like 1 留言 1956 瀏覽

鐵人賽開發技術 DAY 19

作個網站吧！系列第 19 篇

技術作個網站吧！Quickly Sass(1)-少動點兒手：Sass使用心得

雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月. 坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心...

tpodomoto ‧ 2013-10-19

5 Like 0 留言 2740 瀏覽

鐵人賽開發技術 DAY 34

CSS沒有極限系列第 30 篇

技術 Animation 的各項設定值(2)

[ animation-delay ]：檢索或設置對象動畫延遲的時間 [ animation-iteration-count ]：檢索或設置物件動畫的迴圈次數...

卡斯伯 ‧ 2013-10-19

5 Like 1 留言 5360 瀏覽

鐵人賽開發技術 DAY 34

30天掌握Sass語法系列第 30 篇

技術 Sass開發流程設計 - (4) 排版流程(下)

延續昨天的版面，已將所有的大框架建立好了，這裡先來提自己的排版流程習慣： 1.我習慣先把大框架設定用好後，再來微調各元素間的距離。 2.在排網頁時，我會先將...

廖洧杰 ‧ 2013-10-19

8 Like 2 留言 8262 瀏覽

鐵人賽開發技術 DAY 33

30天掌握Sass語法系列第 29 篇

技術 Sass開發流程設計 - (3) 網頁排版流程(上)

延續第二章，我們就開始排網頁了。由於一天時間有限，所以分上下兩集來播放與解說。你可以從影片內容可以發現到，一個網頁設計在排版時，在一邊進行前端設計時...

廖洧杰 ‧ 2013-10-18

8 Like 2 留言 9126 瀏覽

鐵人賽開發技術 DAY 32

30天掌握Sass語法系列第 28 篇

技術 Sass開發流程設計 - (2) Sass結構規劃、全域變數設定

切完所有圖片後，就可以開始規劃Sass檔案了，當你今天新建立一個Sass專案時，裡面預設會有print、ie、screen的Sass檔案，第一次撰寫Sa...

廖洧杰 ‧ 2013-10-17

4 Like 1 留言 14032 瀏覽

鐵人賽開發技術 DAY 31

30天掌握Sass語法系列第 27 篇

技術 Sass開發流程設計 - (1) 切圖、規劃Layout

關於Sass的基礎在前30天已經介紹得差不多了，但畢竟理論的東西要導入自己的實務開發流程始終會有陣痛期。所以之後的文章我會用Sass從無到有實際做一個版型出...

廖洧杰 ‧ 2013-10-16

8 Like 4 留言 3391 瀏覽

鐵人賽開發技術 DAY 30

CSS沒有極限系列第 26 篇

技術 CSS沒有極限 - 鐵人賽不是開始，也不是結束

在鐵人賽前一個月，我在進行一個計劃，就是挑戰100天發文，內容以前端為主，雖然每天都有新的文章，但我都不會特別去核對文章的內容。而鐵人賽開始後，將主題調整為CS...

卡斯伯 ‧ 2013-10-15

8 Like 0 留言 14866 瀏覽

鐵人賽開發技術 DAY 29

30天掌握Sass語法系列第 25 篇

技術 30天掌握Sass語法 - (29) @for+random()創造無限可能

for迴圈不論是在哪個程式語言上都非常的常見，這一次則是介紹Sass @for的運用方法。我們先來一個簡單的範例 @for $i from 1 thro...

廖洧杰 ‧ 2013-10-14

2 Like 0 留言 4547 瀏覽

鐵人賽開發技術 DAY 28

CSS沒有極限系列第 24 篇

技術 CSS沒有極限 - CSS only responsive navigation

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-13 (建議使用Chrome瀏覽器) 這篇要介紹的是noscript的C...

卡斯伯 ‧ 2013-10-13

3 Like 3 留言 14674 瀏覽

鐵人賽開發技術 DAY 28

30天掌握Sass語法系列第 24 篇

技術 30天掌握Sass語法 - (28)Compass圖片合併功能(CSS Sprite)

在早期網頁設計師要做CSS Sprite的時候，除了自己手做土法煉鋼以外，同時也會使用線上網站工具來解決這個問題，剛好翻到六年前我自己在photoshop...

廖洧杰 ‧ 2013-10-13

4 Like 0 留言 4245 瀏覽

鐵人賽開發技術 DAY 27

CSS沒有極限系列第 23 篇

技術 CSS沒有極限 - pure CSS 專輯列表效果

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-12 (建議使用Chrome瀏覽器) 鐵人賽快要結束了，今明兩天會介紹純...

卡斯伯 ‧ 2013-10-12

6 Like 1 留言 11096 瀏覽

鐵人賽開發技術 DAY 27

30天掌握Sass語法系列第 23 篇

技術 30天掌握Sass語法 - (27) 使用@if提升@Mixin靈活度，以CSS圖形化為例

在第20天的時候，我有分享關於@Mixin與Sass運算的運用手法，但在一些設計情境下，你會發現有些樣式如果只單純用Sass運算還是不太夠的，所以這一次...

廖洧杰 ‧ 2013-10-12

9 Like 1 留言 9052 瀏覽

鐵人賽開發技術 DAY 26

CSS沒有極限系列第 22 篇

技術 CSS沒有極限 - CSS transform-3D的透視(perspective)

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-11 (建議使用Chrome瀏覽器) 本篇介紹的transform 3D...

卡斯伯 ‧ 2013-10-11

6 Like 0 留言 8878 瀏覽

鐵人賽開發技術 DAY 25

CSS沒有極限系列第 21 篇

技術 CSS沒有極限 - CSS transform-origin 起始點

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-10 (建議使用Chrome瀏覽器) 本篇介紹transform的起始點...

卡斯伯 ‧ 2013-10-10

4 Like 2 留言 10691 瀏覽

鐵人賽開發技術 DAY 25

30天掌握Sass語法系列第 21 篇

技術 30天掌握Sass語法 - (25) 透過index()與nth()來設計網站版本樣式控制管理

在以往有些網站性質會因為節慶的關係，而會修改網頁樣式，在傳統比較常見的做法，一個網站會有兩隻CSS，第一個CSS是網站全域樣式，譬如Layout、mod...

廖洧杰 ‧ 2013-10-10

6 Like 2 留言 5789 瀏覽

鐵人賽開發技術 DAY 24

30天掌握Sass語法系列第 20 篇

技術 30天掌握Sass語法 - (24) 淺談Sass協作流程分享

該如何讓兩位以上的隊友發揮1+1=3以上的更大價值，一直以來都是公司團隊間時常需要討論的議題，又會因為每個隊友的能力不同，所以每間公司的團隊流程也會有所調...

廖洧杰 ‧ 2013-10-09

5 Like 1 留言 2762 瀏覽

鐵人賽開發技術 DAY 23

CSS沒有極限系列第 19 篇

技術 CSS沒有極限 - CSS transform 概觀

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-08 (建議使用Chrome瀏覽器) 接下來要介紹CSS transfo...

卡斯伯 ‧ 2013-10-08

3 Like 2 留言 8701 瀏覽

鐵人賽開發技術 DAY 22

30天掌握Sass語法系列第 18 篇

技術 30天掌握Sass語法 - (22)Sass顏色函數介紹

網頁設計師在設計網頁時，通常都會直接瀏覽繪圖軟體工具來觀看色盤，但如果是透過Sass顏色函數的話，就可以自動產生出所想要的顏色。同時也會介紹一個Sass...

廖洧杰 ‧ 2013-10-07

4 Like 0 留言 4819 瀏覽

鐵人賽開發技術 DAY 21

CSS沒有極限系列第 17 篇

技術 CSS沒有極限 - CSS3 Fliter 效果

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-06 (建議使用Chrome瀏覽器) 假日都來介紹些單篇的主題吧~，今天...

卡斯伯 ‧ 2013-10-06

5 Like 0 留言 10441 瀏覽

鐵人賽開發技術 DAY 20

CSS沒有極限系列第 16 篇

技術 CSS沒有極限 - Web-font & icons 3連發 - 自製web font icons

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-05 (建議使用Chrome瀏覽器) 接下來會連接3篇文章都介紹web-...

卡斯伯 ‧ 2013-10-05

5 Like 1 留言 16239 瀏覽

鐵人賽開發技術 DAY 18

30天掌握Sass語法系列第 14 篇

技術 30天掌握Sass語法 - (18)規劃你的Sass結構

在上回我們曾經提到過@import的用法，它的功用在於可以將CSS檔案進行切割，如果是單純要被匯入整合Sass檔，而並沒有要轉出成CSS檔案的話，那就在...

廖洧杰 ‧ 2013-10-03