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

2 Like 0 留言 5060 瀏覽

鐵人賽其他技術 DAY 29

快寫HTML靜態網頁系列第 26 篇

技術 Shower.js 與其他的HTML簡報工具

在前一篇簡介了很易用的 HTML 簡報，如果希望在簡報裡是比較多的照片為底圖，可能就不大方便，後來才發現已有一堆的 HTML 簡報工具可利用。一堆的...

逮丸逮丸 ‧ 2013-10-14

8 Like 0 留言 15554 瀏覽

鐵人賽開發技術 DAY 29

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

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

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

廖洧杰 ‧ 2013-10-14

11 Like 2 留言 3929 瀏覽

鐵人賽開發技術 DAY 29

CSS沒有極限系列第 25 篇

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

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

卡斯伯 ‧ 2013-10-14

0 Like 0 留言 2514 瀏覽

鐵人賽開發技術 DAY 13

作個網站吧！系列第 13 篇

技術作個網站吧！Beauty CSS(2)-CSS Hack

今天紀錄一下修正不同瀏覽器間顯示問題的利器--CSS Hack。今天紀錄一下修正不同瀏覽器間顯示問題的利器--CSS Hack。如果要把全部CSS寫在同一檔...

tpodomoto ‧ 2013-10-13

2 Like 0 留言 4958 瀏覽

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

鐵人賽開發技術 DAY 28

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

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

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

廖洧杰 ‧ 2013-10-13

5 Like 2 留言 13676 瀏覽

鐵人賽其他技術 DAY 27

快寫HTML靜態網頁系列第 24 篇

技術套用 Bootstrap 裡的導覽列

常會用到的導覽列，透過 Bootstrap 可快速地套用。常在網頁上的每一頁常用的樣版裡，會有同樣的導覽列出現，最常用的是連結、搜尋或登入的表格以及按鍵...

逮丸逮丸 ‧ 2013-10-12

4 Like 0 留言 4643 瀏覽

鐵人賽開發技術 DAY 27

CSS沒有極限系列第 23 篇

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

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

卡斯伯 ‧ 2013-10-12

6 Like 1 留言 11313 瀏覽

鐵人賽開發技術 DAY 27

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

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

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

廖洧杰 ‧ 2013-10-12

1 Like 0 留言 2494 瀏覽

鐵人賽開發技術 DAY 12

作個網站吧！系列第 12 篇

技術作個網站吧！Beauty CSS(1)-愛美是人的天性

愛美是人的天性，版面漂漂亮亮不用說，原始碼當然也要整整齊齊，除了（程式）看著心情好比較不會找你麻煩（喂）以外，除錯也比較容易。愛美是人的天性，版面漂漂亮亮不用...

tpodomoto ‧ 2013-10-12

3 Like 1 留言 7465 瀏覽

鐵人賽其他技術 DAY 26

快寫HTML靜態網頁系列第 23 篇

技術為元件上色及小圖示的運用：Bootstrap

以前在HTML裡，按鍵通常只有在做表單送出時才會用到，但用 Bootstrap 的過程中，按鍵反而成為美化網頁的好方法。有關美工的設計或怎麼美化，自己的...

逮丸逮丸 ‧ 2013-10-11

9 Like 1 留言 9194 瀏覽

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

鐵人賽開發技術 DAY 26

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

技術 30天掌握Sass語法 - (26) 如何讓你的CSS動畫更具動態效果

.box height: 30px width: 30px transition: all 1s &:hover width:...

廖洧杰 ‧ 2013-10-11

6 Like 2 留言 9856 瀏覽

鐵人賽其他技術 DAY 25

快寫HTML靜態網頁系列第 22 篇

技術圖與文的佈局利用 Bootstrap 完成

圖和文排在一起，沒什麼設計經驗者，不是排得太單調，就是排得很亂， Bootstrap 把常會用到的樣式，設計成易於套用或變化。可能會有一堆的圖與文需要並...

逮丸逮丸 ‧ 2013-10-10

6 Like 0 留言 9784 瀏覽

鐵人賽開發技術 DAY 25

CSS沒有極限系列第 21 篇

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

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

卡斯伯 ‧ 2013-10-10

4 Like 2 留言 11074 瀏覽

鐵人賽開發技術 DAY 25

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

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

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

廖洧杰 ‧ 2013-10-10

2 Like 0 留言 5242 瀏覽

鐵人賽其他技術 DAY 24

快寫HTML靜態網頁系列第 21 篇

技術使用 Bootstrap 佈局網頁

Bootstrap 的 Grid system 是依循 960.gs 的方式來佈局。其中的 .row 是列的單位，而.col-{媒體形式}-{數字} 算是...

逮丸逮丸 ‧ 2013-10-09

7 Like 2 留言 5521 瀏覽

鐵人賽開發技術 DAY 24

CSS沒有極限系列第 20 篇

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

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

卡斯伯 ‧ 2013-10-09

6 Like 2 留言 5937 瀏覽

鐵人賽開發技術 DAY 24

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

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

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

廖洧杰 ‧ 2013-10-09

2 Like 1 留言 3848 瀏覽

鐵人賽其他技術 DAY 23

快寫HTML靜態網頁系列第 20 篇

技術選用 Bootstrap 框架協助加速前端開發

在眾多 CSS 框架裡， Bootstrap 在網頁程式開發的環境裡，可能是簡潔又易用的前端框架工具。此框架最早是以 Twitter Bootstrap 為...

逮丸逮丸 ‧ 2013-10-08

5 Like 1 留言 3102 瀏覽

鐵人賽開發技術 DAY 23

CSS沒有極限系列第 19 篇

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

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

卡斯伯 ‧ 2013-10-08

1 Like 0 留言 14974 瀏覽

鐵人賽開發技術 DAY 23

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

技術 30天掌握Sass語法 - (23) 介紹Sass與Compass的config.rb設定

今天如果你創立了一個Compass專案後，會發現資料夾內會有一個config.rb，它的用處主要是拿來設定一些有用的參數，透過這一次分享來進行一一的介紹。...

廖洧杰 ‧ 2013-10-08

2 Like 0 留言 3895 瀏覽

鐵人賽其他技術 DAY 22

快寫HTML靜態網頁系列第 19 篇

技術用 ez-css 輕量框架快速佈局

如果只需要大區塊的網頁佈局， EZ-CSS是既輕量，又提供一些常用的例子可立即使用。早期的網頁佈局常是用 table 的HTML元件來進行，而用 tab...

逮丸逮丸 ‧ 2013-10-07

7 Like 1 留言 11478 瀏覽

鐵人賽開發技術 DAY 22

CSS沒有極限系列第 18 篇

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

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

卡斯伯 ‧ 2013-10-07

3 Like 2 留言 9091 瀏覽

鐵人賽開發技術 DAY 22

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

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

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

廖洧杰 ‧ 2013-10-07

5 Like 1 留言 10598 瀏覽

鐵人賽其他技術 DAY 21

快寫HTML靜態網頁系列第 18 篇

技術利用 CSS 框架加速HTML的佈局及美化

前2/3的篇幅是介紹快寫HTML的語法、工具，以及能夠像動態網頁似地快速更新網頁的靜態網頁產生器。接下來介紹如何快速安排網頁元素的佈局及美化。一片空白的...

逮丸逮丸 ‧ 2013-10-06

4 Like 0 留言 5015 瀏覽

鐵人賽開發技術 DAY 21

CSS沒有極限系列第 17 篇

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

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

卡斯伯 ‧ 2013-10-06

3 Like 2 留言 9425 瀏覽

鐵人賽開發技術 DAY 21

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

技術 30天掌握Sass語法 - (21) Sass常見編譯錯誤介紹

一般網頁設計師在編譯Sass時，時常會遇到一些無法編譯成功的問題，通常要找很久資源才會知道該怎麼撰寫正確的Sass格式，所以這裡也提供一些除錯細節，讓大...

廖洧杰 ‧ 2013-10-06

5 Like 0 留言 10616 瀏覽

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

2 Like 0 留言 8089 瀏覽

鐵人賽開發技術 DAY 20

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

技術 30天掌握Sass語法 - (20) 利用@Mixin與Sass運算建立Grid System

雖然說如果你的網頁設計有符合960grid或其他grid system的話，做網頁就相對方便許多，但如果美術設計對grid system觀念不是很熟，或者...

廖洧杰 ‧ 2013-10-05