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

10 Like 2 留言 14131 瀏覽

鐵人賽開發技術 DAY 42

CSS沒有極限系列第 38 篇

技術 CSS - 利用jQuery套用Class(超簡單!)

CSS是專門處理網頁的樣式，在互動的部分都會使用javascript，雖然本網站之前的許多互動範例是純CSS，但會有相容性上的問題，而要簡易方式去寫互動的元件，...

卡斯伯 ‧ 2013-10-27

8 Like 1 留言 4739 瀏覽

鐵人賽開發技術 DAY 41

CSS沒有極限系列第 37 篇

技術 CSS - Flex的對齊

今天參加了MOPCON，所以來介紹簡單一點的。承前篇，Flex是為了改善過去的CSS2排版模式所衍生出的新語法，本章則要介紹他的對齊方式。 CSS範例：http...

卡斯伯 ‧ 2013-10-26

10 Like 1 留言 12196 瀏覽

鐵人賽開發技術 DAY 40

CSS沒有極限系列第 36 篇

技術 CSS - Flex的排版方式

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

卡斯伯 ‧ 2013-10-25

8 Like 1 留言 18506 瀏覽

鐵人賽開發技術 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

7 Like 1 留言 4815 瀏覽

鐵人賽開發技術 DAY 38

CSS沒有極限系列第 34 篇

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

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

卡斯伯 ‧ 2013-10-23

8 Like 2 留言 10889 瀏覽

鐵人賽開發技術 DAY 37

CSS沒有極限系列第 33 篇

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

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

卡斯伯 ‧ 2013-10-22

9 Like 2 留言 17349 瀏覽

鐵人賽開發技術 DAY 36

CSS沒有極限系列第 32 篇

達標好文技術淺談CSS Grid system

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

卡斯伯 ‧ 2013-10-21

8 Like 1 留言 51271 瀏覽

鐵人賽開發技術 DAY 35

CSS沒有極限系列第 31 篇

技術 CSS3 垂直文字書寫

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

卡斯伯 ‧ 2013-10-20

5 Like 0 留言 2547 瀏覽

鐵人賽開發技術 DAY 34

CSS沒有極限系列第 30 篇

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

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

卡斯伯 ‧ 2013-10-19

7 Like 1 留言 2381 瀏覽

鐵人賽開發技術 DAY 33

CSS沒有極限系列第 29 篇

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

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

卡斯伯 ‧ 2013-10-18

10 Like 2 留言 4503 瀏覽

鐵人賽開發技術 DAY 32

CSS沒有極限系列第 28 篇

技術 Animation 和 keyframe

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

卡斯伯 ‧ 2013-10-17

8 Like 1 留言 7191 瀏覽

鐵人賽開發技術 DAY 31

CSS沒有極限系列第 27 篇

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

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

卡斯伯 ‧ 2013-10-16

8 Like 4 留言 3226 瀏覽

鐵人賽開發技術 DAY 30

CSS沒有極限系列第 26 篇

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

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

卡斯伯 ‧ 2013-10-15

11 Like 2 留言 3695 瀏覽

鐵人賽開發技術 DAY 29

CSS沒有極限系列第 25 篇

達標好文技術 CSS沒有極限 - CSS 的相關資料

今天沒有要介紹任何效果，是要介紹這些CSS資料是從何處獲得的~ 前端社群台灣的前端社群也是高手雲集的地方，如果想要知道最新的技術資訊，從社群進入是最快的方式...

卡斯伯 ‧ 2013-10-14

2 Like 0 留言 4400 瀏覽

鐵人賽開發技術 DAY 28

CSS沒有極限系列第 24 篇

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

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

卡斯伯 ‧ 2013-10-13

2 Like 1 留言 2354 瀏覽

技術 iio Engine 快速開發HTML5應用程式

<a href="">About iio Engine</a> iio is an Open Source Init...

freelab ‧ 2013-10-12

4 Like 0 留言 4078 瀏覽

鐵人賽開發技術 DAY 27

CSS沒有極限系列第 23 篇

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

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

卡斯伯 ‧ 2013-10-12

9 Like 1 留言 8906 瀏覽

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

鐵人賽開發技術 DAY 25

CSS沒有極限系列第 21 篇

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

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

卡斯伯 ‧ 2013-10-10

7 Like 2 留言 4732 瀏覽

鐵人賽開發技術 DAY 24

CSS沒有極限系列第 20 篇

達標好文技術 CSS沒有極限 - CSS transform 軸線的謊言

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-09 (建議使用Chrome瀏覽器) 從小上數學課，都會知道X軸是左右，...

卡斯伯 ‧ 2013-10-09

5 Like 1 留言 2598 瀏覽

鐵人賽開發技術 DAY 23

CSS沒有極限系列第 19 篇

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

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

卡斯伯 ‧ 2013-10-08

7 Like 1 留言 10572 瀏覽

鐵人賽開發技術 DAY 22

CSS沒有極限系列第 18 篇

技術 CSS沒有極限 - Checkbox的妙用

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-07 (建議使用Chrome瀏覽器) CSS3 新增了:checked的...

卡斯伯 ‧ 2013-10-07

4 Like 0 留言 4681 瀏覽

鐵人賽開發技術 DAY 21

CSS沒有極限系列第 17 篇

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

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

卡斯伯 ‧ 2013-10-06

5 Like 0 留言 10268 瀏覽

鐵人賽開發技術 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

3 Like 0 留言 4901 瀏覽

鐵人賽開發技術 DAY 19

CSS沒有極限系列第 15 篇

技術 CSS沒有極限 - Web-font & icons 3連發 - 第二發 Icons

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

卡斯伯 ‧ 2013-10-04

9 Like 2 留言 8659 瀏覽

鐵人賽開發技術 DAY 18

CSS沒有極限系列第 14 篇

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

接下來會連接3篇文章都介紹web-font，而第一篇是基本的web-font的置入，第二篇開始會是web-font icon，並且了解web-font icon...

卡斯伯 ‧ 2013-10-03

10 Like 1 留言 4741 瀏覽

鐵人賽開發技術 DAY 17

CSS沒有極限系列第 13 篇

技術 CSS沒有極限 - Transition 實作波動拳動圖

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-02 (建議使用Chrome瀏覽器) CSS3除了有更多的樣式外，其中一...

卡斯伯 ‧ 2013-10-02

6 Like 0 留言 8319 瀏覽

鐵人賽開發技術 DAY 17

ASP.NET Web技術小技巧分享系列第 14 篇

技術 [Javascript]knockout.js - 關於Html屬性的控制

在上一篇knockout.js初體驗有介紹用此框架來實作前端MVVM架構，延續這個主題，今天主要介紹控制常用Html屬性的幾個用法。 http://ithelp...

Kyle Shen ‧ 2013-10-02

7 Like 1 留言 2760 瀏覽

技術 CSS沒有極限 - 利用Sass繪製扁平化風格的long-shadow

網頁設計的趨勢從擬物轉換為扁平化，而扁平化顧名思義就是較扁、較平，去除了真實化實體，扁平化也延伸出許多的視覺風格，而long shadow就是其中一種，讓扁平的...

卡斯伯 ‧ 2013-10-01

8 Like 3 留言 2733 瀏覽

技術東之宿_開發日誌-1

太陽要面對的問題有兩個，第一個問題比較小，就是「他不會美工」。第二個問題比較大，那就是「他不會網頁程式開發...」。早在1987年美商Apple公司，所提出的...

SunAllen ‧ 2013-10-01