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

5 Like 2 留言 12781 瀏覽

鐵人賽開發技術 DAY 41

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

技術 Sass開發流程設計 - (11) Prepos 前端利器介紹

如果你希望可以立即寫Sass，不用去設定繁瑣的安裝流程，除了fire.app以外，你也可以選擇使用prepos，只要下載安裝完就可以直接玩Sass，這...

廖洧杰 ‧ 2013-10-26

0 Like 0 留言 3013 瀏覽

技術 CSS課程-2 - 講師:飛肯-姜智豪

CSS課程-2 - 講師:飛肯-姜智豪 1.ID的命名規則，全部大寫老師的意思是可以跟原生的選擇器作區隔 2.調整文字的部分，都是使用padding間距結構...

sheephead081 ‧ 2013-10-25

10 Like 1 留言 13368 瀏覽

鐵人賽開發技術 DAY 40

CSS沒有極限系列第 36 篇

技術 CSS - Flex的排版方式

css 範例：http://ashareaday.wcc.tw/#2013-10-25 flex是用來排版的CSS屬性，在本章就用所了解的flex來排版看看，並...

卡斯伯 ‧ 2013-10-25

7 Like 1 留言 6354 瀏覽

鐵人賽開發技術 DAY 40

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

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

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

廖洧杰 ‧ 2013-10-25

2 Like 0 留言 4360 瀏覽

技術 CSS課程 - 講師:飛肯-姜智豪

CSS課程 - 講師:飛肯-姜智豪第一堂課 1.所謂的CSS預設值 2.如何為標籤加上CSS 3.內部CSS與外部CSS 4.em與px的差別 em是百分比的...

sheephead081 ‧ 2013-10-24

8 Like 1 留言 19018 瀏覽

鐵人賽開發技術 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 留言 9235 瀏覽

鐵人賽開發技術 DAY 39

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

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

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

廖洧杰 ‧ 2013-10-24

7 Like 1 留言 5144 瀏覽

鐵人賽開發技術 DAY 38

CSS沒有極限系列第 34 篇

技術 CSS - 伸縮自如的Flex box (2)

從上一篇可以了解到，flex和過去的比較起來，是相當具有彈性的，不只能像百分比一樣，還可以與固定像素配合，有效提升排版的豐富性。今天要介紹它更多樣的屬性值。 c...

卡斯伯 ‧ 2013-10-23

6 Like 2 留言 8981 瀏覽

鐵人賽開發技術 DAY 38

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

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

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

廖洧杰 ‧ 2013-10-23

8 Like 2 留言 11294 瀏覽

鐵人賽開發技術 DAY 37

CSS沒有極限系列第 33 篇

達標好文技術 CSS - 伸縮自如的Flex box

Flexbox是css3的新的排版方式，過去排版主要是利用table、box、inline、float、position等等做排版，而這些都不是設計為了豐富的網...

卡斯伯 ‧ 2013-10-22

10 Like 3 留言 18369 瀏覽

鐵人賽開發技術 DAY 37

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

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

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

廖洧杰 ‧ 2013-10-22

9 Like 2 留言 18114 瀏覽

鐵人賽開發技術 DAY 36

CSS沒有極限系列第 32 篇

達標好文技術淺談CSS Grid system

相信許多設計師或是工程師都有用過bootstrap，他是一套Css framework，裡面提供相當大量的樣式讓使用者可以撰寫較少的CSS就可以獲得不錯的效果。...

卡斯伯 ‧ 2013-10-21

6 Like 2 留言 6278 瀏覽

鐵人賽開發技術 DAY 36

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

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

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

廖洧杰 ‧ 2013-10-21

8 Like 1 留言 57045 瀏覽

鐵人賽開發技術 DAY 35

CSS沒有極限系列第 31 篇

技術 CSS3 垂直文字書寫

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

卡斯伯 ‧ 2013-10-20

4 Like 0 留言 5675 瀏覽

鐵人賽開發技術 DAY 35

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

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

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

廖洧杰 ‧ 2013-10-20

5 Like 0 留言 3025 瀏覽

鐵人賽開發技術 DAY 34

CSS沒有極限系列第 30 篇

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

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

卡斯伯 ‧ 2013-10-19

5 Like 1 留言 5690 瀏覽

鐵人賽開發技術 DAY 34

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

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

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

廖洧杰 ‧ 2013-10-19

1 Like 0 留言 2981 瀏覽

鐵人賽開發技術 DAY 18

作個網站吧！系列第 18 篇

技術作個網站吧！Beauty CSS(7)-CSS動一動

CSS3的特殊效果也是不得不提的功能之一, 有了它可以減少些jQuery撰寫, 對我來說相當方便. 以下紀錄一些用法, 若有誤還請指正, 謝謝. CSS3的特殊...

tpodomoto ‧ 2013-10-18

8 Like 2 留言 8634 瀏覽

鐵人賽開發技術 DAY 33

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

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

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

廖洧杰 ‧ 2013-10-18

7 Like 1 留言 2604 瀏覽

鐵人賽開發技術 DAY 33

CSS沒有極限系列第 29 篇

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

範例請到：http://ashareaday.wcc.tw/#2013-10-18 和其他屬性一樣，animation有許多屬性可以設定，當然也可以用一個ani...

卡斯伯 ‧ 2013-10-18

7 Like 1 留言 3718 瀏覽

鐵人賽開發技術 DAY 17

作個網站吧！系列第 17 篇

技術作個網站吧！Beauty CSS(6)-CSS好方便

CSS最方便的地方之一在於圓角陰影等外觀上的設定，可以減少依賴圖片，達到讀取速度加快，重點是語法打一打就不用一直存圖縮圖啦xD以下紀錄一些外觀上面的設定。如有誤...

tpodomoto ‧ 2013-10-17

10 Like 2 留言 4740 瀏覽

鐵人賽開發技術 DAY 32

CSS沒有極限系列第 28 篇

技術 Animation 和 keyframe

範例網址：http://ashareaday.wcc.tw/#2013-10-17 CSS的Animation分為兩個部分，一個是決定動畫該如何跑的Keyfra...

卡斯伯 ‧ 2013-10-17

8 Like 2 留言 9497 瀏覽

鐵人賽開發技術 DAY 32

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

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

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

廖洧杰 ‧ 2013-10-17

6 Like 0 留言 2659 瀏覽

鐵人賽開發技術 DAY 16

作個網站吧！系列第 16 篇

技術作個網站吧！Beauty CSS(5)-選擇器part3

今天是CSS小孩系列！（小孩系列是我自己取的...）我在寫網頁時常常遇到的問題是，當我想在一區塊裡某些部份作不同設定的時候，往往要再增加一個選擇器，而且只有這...

tpodomoto ‧ 2013-10-16

8 Like 1 留言 7509 瀏覽

鐵人賽開發技術 DAY 31

CSS沒有極限系列第 27 篇

技術 CSS沒有極限 - 如何用sass寫animation

都寫了...就順便貼過來了範例連結:http://ashareaday.wcc.tw/#2013-10-16 Compass目前版本似乎沒有支援animati...

卡斯伯 ‧ 2013-10-16

4 Like 1 留言 14431 瀏覽

鐵人賽開發技術 DAY 31

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

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

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

廖洧杰 ‧ 2013-10-16

7 Like 0 留言 2837 瀏覽

鐵人賽開發技術 DAY 15

作個網站吧！系列第 15 篇

技術作個網站吧！Beauty CSS(4)-選擇器part2

選擇器學不好，要飯要到老（誤）我認為學好CSS選擇器對於網站效率有很大幫助，當然這點我也還在學習當中。今天繼續紀錄CSS的選擇器，文章若有謬誤還請不吝指正m(...

tpodomoto ‧ 2013-10-15

8 Like 4 留言 3555 瀏覽

鐵人賽開發技術 DAY 30

CSS沒有極限系列第 26 篇

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

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

卡斯伯 ‧ 2013-10-15

5 Like 2 留言 10092 瀏覽

鐵人賽開發技術 DAY 30

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

技術 30天掌握Sass語法 - (30)inline-image()與Livereload介紹

上篇文章好像太早發了，導致系統沒更新，所以第30天煩請以此文章為主關於Sass的基礎知識，其實在這30天都講得差不多了，如果有興趣想再深入了解的話，可以...

廖洧杰 ‧ 2013-10-15

1 Like 0 留言 2399 瀏覽

鐵人賽開發技術 DAY 14

作個網站吧！系列第 14 篇

技術作個網站吧！Beauty CSS(3)-選擇器part1

選擇器學不好，要飯要到老（誤）我認為學好CSS選擇器對於網站效率有很大幫助，當然這點我也還在學習當中。以下是紀錄CSS的選擇器，文章若有謬誤還請不吝指正m(_...

tpodomoto ‧ 2013-10-14