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

3 Like 0 留言 2934 瀏覽

鐵人賽影片教學 DAY 15

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 15 篇

技術金魚都能懂網頁設計入門 : Relative定位 (鐵人賽第十五天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧關於Fixed 設定Relative之後會有的特性有哪些設定Rela...

CSScoke ‧ 2018-10-30 ‧團隊阿莫斯の推坑教

6 Like 2 留言 4175 瀏覽

鐵人賽影片教學 DAY 14

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 14 篇

技術金魚都能懂網頁設計入門 : Fixed定位 (鐵人賽第十四天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧關於Fixed 設定Fixed之後會有的特性有哪些如何水平垂直置中...

CSScoke ‧ 2018-10-29 ‧團隊阿莫斯の推坑教

0 Like 0 留言 4717 瀏覽

鐵人賽 Modern Web DAY 14

CSS Secrets 導讀系列第 14 篇

技術 Secret 12: 截角效果 (CSS gradient)

裁切的截角不只是用來收集折價券省錢，也是印刷和網頁上常見的設計圖案。它的表現方式是以45度角裁去元素一個或以上的角落。尤其當近年扁平化設計(flat desig...

yowlonglee ‧ 2018-10-29

2 Like 0 留言 3849 瀏覽

鐵人賽自我挑戰組 DAY 14

前端之 " wow~原來是這樣啊 " 系列第 14 篇

技術 Day14 CSS3 動畫 Transitions實作練習(下）

續上上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！在上篇實作中完成了上方兩個動畫效果，本篇我們繼續實作下方兩個動畫效果吧！左下動畫...

Lai ‧ 2018-10-29 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 1361 瀏覽

鐵人賽 Modern Web DAY 13

CSS Secrets 導讀系列第 13 篇

技術 Secret 11: 鑽石形圖片

鑽石形的圖片是常見的一種視覺設計，但是用 CSS 不容易做到。事實上，一直到最近，它還是不可能實現的效果。以前網頁設計師要實現鑽石形圖片，必須從原始圖片下手，先...

yowlonglee ‧ 2018-10-28

7 Like 0 留言 4778 瀏覽

鐵人賽影片教學 DAY 13

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 13 篇

技術金魚都能懂網頁設計入門 : 排版的聖品 (鐵人賽第十三天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧關於Flex 預設子項目不換行預設子項目寬度自動縮減換行使用的屬性...

CSScoke ‧ 2018-10-28 ‧團隊阿莫斯の推坑教

2 Like 1 留言 4741 瀏覽

鐵人賽自我挑戰組 DAY 13

前端之 " wow~原來是這樣啊 " 系列第 13 篇

技術 Day13 CSS3 動畫 Transitions實作練習(上）

續上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中，...

Lai ‧ 2018-10-28 ‧團隊好想工作室第二屆鐵人賽

3 Like 0 留言 5801 瀏覽

鐵人賽 Modern Web DAY 13

前端「設計」聖光之路系列第 13 篇

技術文字大小、行高與空間上的關係

一般平面設計師再進入網頁環境時，會不清楚網頁設計所用的單位數值，造成設計稿與開發的畫面有嚴重的落差；且網頁設計本身有許多「慣用的數值」，建議一開始也能先使用大...

卡斯伯 ‧ 2018-10-27

3 Like 0 留言 7860 瀏覽

鐵人賽自我挑戰組 DAY 12

前端之 " wow~原來是這樣啊 " 系列第 12 篇

技術 Day12 講講 CSS3 動畫 - Transitions

在網頁中設定動畫效果，可以吸引使用者目光到特定區域，也可以與使用者間有更好的互動關係，以提升使用者經驗。在 CSS3 當中有兩個主要用來實現動畫的方式，分別爲...

Lai ‧ 2018-10-27 ‧團隊好想工作室第二屆鐵人賽

0 Like 2 留言 1992 瀏覽

鐵人賽 Modern Web DAY 12

CSS Secrets 導讀系列第 12 篇

技術 Secret 10: 平行四邊形

平行四邊形使用在網頁設計的時候，是為了讓頁面看起來更活潑更有動感。首先用skew()來製作一個平行四邊形的按鈕。 <a href="#&quo...

yowlonglee ‧ 2018-10-27

5 Like 0 留言 4953 瀏覽

鐵人賽影片教學 DAY 12

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 12 篇

技術金魚都能懂網頁設計入門 : CSS Reset (鐵人賽第十二天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 CSS Reset 的作用是甚麼? 為何需要使用 CSS Reset...

CSScoke ‧ 2018-10-27 ‧團隊阿莫斯の推坑教

1 Like 0 留言 4549 瀏覽

鐵人賽自我挑戰組 DAY 11

前端之 " wow~原來是這樣啊 " 系列第 11 篇

技術 Day 11 CSS position之想去哪就去哪

瞭解 position 設定，讓網頁元素想去哪裡就去哪裡在網頁排版設計中，並不是所有元素都會依照水平及垂直的一定流向排列，有時其中一個元素需偏向某一個方向，或...

Lai ‧ 2018-10-26 ‧團隊好想工作室第二屆鐵人賽

5 Like 0 留言 4064 瀏覽

鐵人賽影片教學 DAY 11

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 11 篇

技術金魚都能懂網頁設計入門 : 換個新盒子 (鐵人賽第十一天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧盒模型有哪兩種模式盒模型的兩種計算方式盒模型的設定方式追蹤 A...

CSScoke ‧ 2018-10-26 ‧團隊阿莫斯の推坑教

0 Like 0 留言 3027 瀏覽

鐵人賽 Modern Web DAY 10

CSS Secrets 導讀系列第 10 篇

技術 Secret 8: 不間斷的圖片邊界

有時我們想在邊界而不是背景裡放圖片或是圖案以美化border。而且圖案會填滿整個容器，隨著容器改變尺寸但是比例維持不變，如同backgroud-size: co...

yowlonglee ‧ 2018-10-25

1 Like 0 留言 7801 瀏覽

鐵人賽自我挑戰組 DAY 10

前端之 " wow~原來是這樣啊 " 系列第 10 篇

技術 Day10 讓圖片好好裝在盒子裡

在網頁中常常會需要各式各樣的圖片，如何讓它按照你的想像，好好呈現在網頁上呢？讓圖片呈現在網頁上，一般我們會想到使用 img 標籤。我們先試試看最單純的一張圖片...

Lai ‧ 2018-10-25 ‧團隊好想工作室第二屆鐵人賽

5 Like 1 留言 6203 瀏覽

鐵人賽影片教學 DAY 10

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 10 篇

技術金魚都能懂網頁設計入門 : 網頁兩大主角 (鐵人賽第十天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧兩大主角特性 inline 靠內容撐開，無法設定寬高 block 區塊...

CSScoke ‧ 2018-10-25 ‧團隊阿莫斯の推坑教

0 Like 0 留言 1633 瀏覽

鐵人賽 Modern Web DAY 9

CSS Secrets 導讀系列第 9 篇

技術 Secret 7:（偽）隨機背景圖案

在自然界完美重複的圖案根本是不存在，即使是同一品種的花，一定會有少許差異，沒有二朵花是完全一模一樣。再看一下前面我們做的練習，一模一樣的圖案有規律的重複，不管...

yowlonglee ‧ 2018-10-24

6 Like 0 留言 1738 瀏覽

鐵人賽自我挑戰組 DAY 12

學什麼就寫什麼，知道什麼就分享什麼系列第 12 篇

技術與工程師的協作之路-那些年，我們一起混淆的CSS（五）

繼「與工程師的協作之路-那些年，我們一起混淆的CSS（四）」答應大家要來寫個進階一點點的...今天就來實踐諾言！！！今天主要只講兩個：容易跟border搞混的...

Wen Chien ‧ 2018-10-26

4 Like 1 留言 1898 瀏覽

鐵人賽自我挑戰組 DAY 11

學什麼就寫什麼，知道什麼就分享什麼系列第 11 篇

技術與工程師的協作之路-那些年，我們一起混淆的CSS（四）

前言其實本來打算讓「混淆CSS篇」結束了。（共計三篇）但又想到一些蠻基礎可以補充的觀念～所以就繼續寫下去了！希望可以用更口語的方式讓大家理解和記得今天講的...

Wen Chien ‧ 2018-10-25

1 Like 1 留言 8114 瀏覽

鐵人賽自我挑戰組 DAY 9

前端之 " wow~原來是這樣啊 " 系列第 9 篇

技術 Day9 來試試看僞元素吧(before/after)

利用僞元素爲你的頁面在添加點東西吧初接觸僞元素時，覺得有點不直覺，但後續發現它真的滿好用的，很值得好好瞭解它。那麼~什麼是僞元素呢？其中的 " 僞...

Lai ‧ 2018-10-24 ‧團隊好想工作室第二屆鐵人賽

5 Like 0 留言 6246 瀏覽

鐵人賽影片教學 DAY 9

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 9 篇

技術金魚都能懂網頁設計入門 : Float浮動 (鐵人賽第九天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧浮動 float 的特性有靠左跟靠右就是沒有置中子層浮動時，父層會...

CSScoke ‧ 2018-10-24 ‧團隊阿莫斯の推坑教

0 Like 0 留言 2460 瀏覽

鐵人賽 Modern Web DAY 8

CSS Secrets 導讀系列第 8 篇

技術 Secret 6: 更多的背景圖案

世界上並非只有條紋還有許多種圖案像是網格、點點、棋盤等等。好消息是 CSS gradients 幾乎做得到！上一篇文章我們只使用了一個 linear-gra...

yowlonglee ‧ 2018-10-23

2 Like 0 留言 15953 瀏覽

鐵人賽自我挑戰組 DAY 8

前端之 " wow~原來是這樣啊 " 系列第 8 篇

技術 Day8 如何設定 CSS 陰影效果呢？

陰影在很多版型中都會出現，那麼它到底如何設定的呢？陰影可以讓畫面上的靜態元素看起來更立體，或是也能利用陰影增加與使用者之間的互動性。首先我們來看看它可以被設定...

Lai ‧ 2018-10-23 ‧團隊好想工作室第二屆鐵人賽

6 Like 0 留言 6960 瀏覽

鐵人賽影片教學 DAY 8

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 8 篇

技術金魚都能懂網頁設計入門 : 區塊尺寸計算 (鐵人賽第八天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧區塊的尺寸計算一個區塊的尺寸是如何被計算出來的? 這關係到你的版面是否...

CSScoke ‧ 2018-10-23 ‧團隊阿莫斯の推坑教

0 Like 0 留言 2940 瀏覽

鐵人賽 Modern Web DAY 7

CSS Secrets 導讀系列第 7 篇

技術 Secret 5: 條紋背景

條紋是種常見的 pattern. 網頁設計要製作條紋最簡單的方法是用圖片做背景，不過這樣一來修改時就需要麻煩設計師出手。有些人可能會用 SVG，但是這樣還是需要...

yowlonglee ‧ 2018-10-22

5 Like 0 留言 9491 瀏覽

鐵人賽影片教學 DAY 7

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 7 篇

技術金魚都能懂網頁設計入門 : 怎麼學CSS ? (鐵人賽第七天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧心智圖的使用先建立子主題再使用滑鼠拖拉來做分類使用 Enter鍵...

CSScoke ‧ 2018-10-22 ‧團隊阿莫斯の推坑教

0 Like 0 留言 3698 瀏覽

技術淺談BEM CSS

淺談BEM CSS-CSS設計模式與架構前言 BEM是Block Element Modifier的縮寫，BEM 是一種為了讓CSS Class 更好維護...

yolala ‧ 2019-10-29

5 Like 1 留言 21909 瀏覽

鐵人賽自我挑戰組 DAY 7

前端之 " wow~原來是這樣啊 " 系列第 7 篇

技術 Day7 利用純 HTML / CSS 來一個好吃的手作漢堡

考慮 RWD 網站中，一定要來一個美味的漢堡！第一次聽到前輩跟我說可以在手機面板時考慮把選單切成漢堡，我心裡真的只有那好吃香香的漢堡啊~就是這個啊~ 所以~...

Lai ‧ 2018-10-22 ‧團隊好想工作室第二屆鐵人賽

4 Like 0 留言 9857 瀏覽

鐵人賽影片教學 DAY 6

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 6 篇

技術金魚都能懂網頁設計入門 : CSS撰寫位置 (鐵人賽第六天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 CSS能寫在哪裡? HTML原始碼的style屬性內 style標籤內...

CSScoke ‧ 2018-10-21 ‧團隊阿莫斯の推坑教

0 Like 0 留言 2861 瀏覽

鐵人賽 Modern Web DAY 6

CSS Secrets 導讀系列第 6 篇

技術 Secret 4: 內部圓角

有時我們會需要讓邊界裡面是圓角，但是外面還是維持直角。最直覺的做法是用二個 <div> 一個做內框一個做外框，外框的背景顏色是邊界的顏色。 &l...

yowlonglee ‧ 2018-10-21

技術 金魚都能懂網頁設計入門 : Relative定位 (鐵人賽第十五天)

技術 金魚都能懂網頁設計入門 : Fixed定位 (鐵人賽第十四天)

技術 Secret 12: 截角效果 (CSS gradient)

技術 Day14 CSS3 動畫 Transitions實作練習(下）

技術 Secret 11: 鑽石形圖片

技術 金魚都能懂網頁設計入門 : 排版的聖品 (鐵人賽第十三天)

技術 Day13 CSS3 動畫 Transitions實作練習(上）

技術 文字大小、行高與空間上的關係