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

8 Like 2 留言 9674 瀏覽

鐵人賽開發技術 DAY 32

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

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

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

廖洧杰 ‧ 2013-10-17

6 Like 0 留言 2720 瀏覽

鐵人賽開發技術 DAY 16

作個網站吧！系列第 16 篇

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

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

tpodomoto ‧ 2013-10-16

8 Like 1 留言 7612 瀏覽

鐵人賽開發技術 DAY 31

CSS沒有極限系列第 27 篇

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

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

卡斯伯 ‧ 2013-10-16

4 Like 1 留言 14532 瀏覽

鐵人賽開發技術 DAY 31

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

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

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

廖洧杰 ‧ 2013-10-16

7 Like 0 留言 2907 瀏覽

鐵人賽開發技術 DAY 15

作個網站吧！系列第 15 篇

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

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

tpodomoto ‧ 2013-10-15

8 Like 4 留言 3665 瀏覽

鐵人賽開發技術 DAY 30

CSS沒有極限系列第 26 篇

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

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

卡斯伯 ‧ 2013-10-15

5 Like 2 留言 10186 瀏覽

鐵人賽開發技術 DAY 30

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

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

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

廖洧杰 ‧ 2013-10-15

1 Like 0 留言 2452 瀏覽

鐵人賽開發技術 DAY 14

作個網站吧！系列第 14 篇

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

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

tpodomoto ‧ 2013-10-14

2 Like 0 留言 5184 瀏覽

鐵人賽其他技術 DAY 29

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

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

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

逮丸逮丸 ‧ 2013-10-14

8 Like 0 留言 15725 瀏覽

鐵人賽開發技術 DAY 29

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

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

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

廖洧杰 ‧ 2013-10-14

11 Like 2 留言 4004 瀏覽

鐵人賽開發技術 DAY 29

CSS沒有極限系列第 25 篇

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

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

卡斯伯 ‧ 2013-10-14

0 Like 0 留言 2563 瀏覽

鐵人賽開發技術 DAY 13

作個網站吧！系列第 13 篇

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

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

tpodomoto ‧ 2013-10-13

2 Like 0 留言 5067 瀏覽

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

鐵人賽開發技術 DAY 28

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

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

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

廖洧杰 ‧ 2013-10-13

5 Like 2 留言 13887 瀏覽

鐵人賽其他技術 DAY 27

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

技術套用 Bootstrap 裡的導覽列

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

逮丸逮丸 ‧ 2013-10-12

4 Like 0 留言 4762 瀏覽

鐵人賽開發技術 DAY 27

CSS沒有極限系列第 23 篇

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

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

卡斯伯 ‧ 2013-10-12

6 Like 1 留言 11451 瀏覽

鐵人賽開發技術 DAY 27

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

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

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

廖洧杰 ‧ 2013-10-12

1 Like 0 留言 2562 瀏覽

鐵人賽開發技術 DAY 12

作個網站吧！系列第 12 篇

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

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

tpodomoto ‧ 2013-10-12

3 Like 1 留言 7592 瀏覽

鐵人賽其他技術 DAY 26

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

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

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

逮丸逮丸 ‧ 2013-10-11

9 Like 1 留言 9383 瀏覽

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

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

鐵人賽其他技術 DAY 25

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

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

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

逮丸逮丸 ‧ 2013-10-10

6 Like 0 留言 9974 瀏覽

鐵人賽開發技術 DAY 25

CSS沒有極限系列第 21 篇

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

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

卡斯伯 ‧ 2013-10-10

4 Like 2 留言 11213 瀏覽

鐵人賽開發技術 DAY 25

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

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

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

廖洧杰 ‧ 2013-10-10

2 Like 0 留言 5314 瀏覽

鐵人賽其他技術 DAY 24

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

技術使用 Bootstrap 佈局網頁

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

逮丸逮丸 ‧ 2013-10-09

7 Like 2 留言 5657 瀏覽

鐵人賽開發技術 DAY 24

CSS沒有極限系列第 20 篇

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

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

卡斯伯 ‧ 2013-10-09

6 Like 2 留言 6042 瀏覽

鐵人賽開發技術 DAY 24

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

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

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

廖洧杰 ‧ 2013-10-09

2 Like 1 留言 3917 瀏覽

鐵人賽其他技術 DAY 23

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

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

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

逮丸逮丸 ‧ 2013-10-08

5 Like 1 留言 3201 瀏覽

鐵人賽開發技術 DAY 23

CSS沒有極限系列第 19 篇

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

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

卡斯伯 ‧ 2013-10-08

1 Like 0 留言 15082 瀏覽

鐵人賽開發技術 DAY 23

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

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

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

廖洧杰 ‧ 2013-10-08

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

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