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

0 Like 0 留言 4243 瀏覽

鐵人賽自我挑戰組 DAY 24

如何架出github.io的個人網頁-html的30天自由式筆記系列第 24 篇

技術網頁的皮膚──CSS階層式樣式表

如果HTML是人，那CSS就決定了他的髮膚顏色，而JS則是這個人的行為。其中，HTML負責確定網頁中有哪些內容。CSS確定如何展現元素的外觀(比如：大小、粗...

IrisAndMimi ‧ 2018-11-08

3 Like 1 留言 12760 瀏覽

鐵人賽 Modern Web DAY 23

CSS Secrets 導讀系列第 23 篇

技術 Secret 18: 毛玻璃效果

毛玻璃效果是指用一層半透明的色片覆蓋複雜的背景，讓在毛玻璃前面的文字能容易閱讀。會這麼做是因為在背景裡有些有趣的地方，我們希望保留給使用者看得見，同時也要讓在前...

yowlonglee ‧ 2018-11-07

2 Like 0 留言 5282 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 Day23 學習 scss 時的那些大小事

分享與記錄個人使用 scss 時的那些 wow 點在前端學習進度上，目前走到了 Javascipt，幾週前開啓 scss 時，感到有點陌生啊~~ 人的記憶不可...

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

1 Like 0 留言 4774 瀏覽

鐵人賽 Modern Web DAY 22

CSS Secrets 導讀系列第 22 篇

技術 Secret 17: 改變色調

當你有一些形式各異的照片，卻要讓它們具有視覺上的一致性，一個常用且優雅的做法是先將照片灰階化，再加上同一種色調。在網頁設計上，會先在照片加上這種效果，然後在ho...

yowlonglee ‧ 2018-11-06

1 Like 0 留言 3761 瀏覽

鐵人賽 Modern Web DAY 21

CSS Secrets 導讀系列第 21 篇

技術 Secret 16: 異常的陰影

box-shadow在可使用border-radius的元素上，能產生很好的陰影效果。不過當用在偽元素或者其他透明的圖案上時就不管用了，因為box-shadow...

yowlonglee ‧ 2018-11-05

1 Like 0 留言 11758 瀏覽

鐵人賽自我挑戰組 DAY 21

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

技術 Day21 實作一個簡單的 Todolist (上)

第一個入門 JS 的實作學習目標身爲 JS 剛入門的新手，把做出第一個 Todolist 當作第一個實作學習目標。一開始還不確定能利用哪些語法做出 Todol...

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

4 Like 1 留言 18167 瀏覽

鐵人賽自我挑戰組 DAY 19

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

達標好文技術 Day19 JS Scroll 實作學習

在網頁互動中，經常可見滾動觸發事件，今天來試試看吧最近在一個專案中需要監聽網頁 Scroll 事件，用以觸發元素的移動。學習了JS Scroll 事件，今天來...

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

0 Like 0 留言 7250 瀏覽

鐵人賽 Modern Web DAY 18

CSS Secrets 導讀系列第 18 篇

技術 Secret 14: 簡單的圓餅圖 (CSS transforms)

圓餅圖，即使是只有二種顏色的簡單圖案，在CSS也不是容易做得到。常用的做法包括用繪圖軟體事先製作許多圖案給不同的值使用，或者用大型的JavaScript函式庫...

yowlonglee ‧ 2018-11-02

3 Like 0 留言 10199 瀏覽

鐵人賽自我挑戰組 DAY 18

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

技術 Day18 來一個 Google Pie Chart 吧

資訊呈現中，免不了以圖表作視覺化資訊呈現，那就不能錯過好用的 Google charts 了！ Google charts 提供了一系列圖表供開發者使用，例如...

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

0 Like 0 留言 6056 瀏覽

鐵人賽 Modern Web DAY 17

CSS Secrets 導讀系列第 17 篇

技術 Secret 13: 梯形標籤

梯形和平行四邊形的差別是，它只有二個邊是平行的，另外二個邊可以是任何角度。以前這個形狀是非常難用CSS做出來，雖然它是一種常見的形狀，尤其用在模仿標籤的樣子。如...

yowlonglee ‧ 2018-11-01

1 Like 0 留言 3734 瀏覽

鐵人賽自我挑戰組 DAY 17

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

技術 Day17 CSS 動畫 Animation 實作練習(下)

利用 Animation 製作美美的動畫吧上上篇我們介紹了 Animation 的相關設定，在上一篇也實作了字體模糊動畫效果，本篇來試試看經典的球球追隨運動吧...

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

1 Like 0 留言 3745 瀏覽

鐵人賽 Modern Web DAY 16

CSS Secrets 導讀系列第 16 篇

技術 Secret 12: 截角效果 (clip-path)

雖然border-image的做法很簡潔也很 DRY，仍然有它的限制，比如說我們還是需要有個純色的背景。還記得在鑽石形圖片中用過的clip-path嗎？CSS...

yowlonglee ‧ 2018-10-31

1 Like 0 留言 3534 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 Day16 CSS 動畫 Animation 實作練習(上）

利用 Animation 製作美美的動畫吧上一篇我們介紹了 Animation 的相關設定，Animation 有多個屬性供設定，比起 Transitions...

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

2 Like 0 留言 10213 瀏覽

鐵人賽 Modern Web DAY 28

連續30天的超實務網頁設計的垂直置中教學系列第 28 篇

技術左圖右文版面，文字垂直置中的方式?

支援度最高的垂直置中方式左圖右文版面的垂直置中應該是最常見到的一種需求了，這種需求的重點在於右側的文字需要垂置對齊於左邊的圖片，這種畫面基本上通常在樣版網站可...

CSScoke ‧ 2018-11-12

3 Like 0 留言 4740 瀏覽

鐵人賽 Modern Web DAY 27

連續30天的超實務網頁設計的垂直置中教學系列第 27 篇

技術 RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

RWD等比例目前RWD網頁應該是個再普通不過的需求了，這樣的需求在製作網頁時到底怎麼做到垂直置中的需求呢? 基本上我們當然先從等比例區塊這裡先處裡啦，等比例區...

CSScoke ‧ 2018-11-11

2 Like 0 留言 2899 瀏覽

鐵人賽 Modern Web DAY 26

連續30天的超實務網頁設計的垂直置中教學系列第 26 篇

技術 IE8以上的網頁我該如何做垂直置中?

講了這麼多垂直置中... 從一開始鐵人賽開賽以來，Amos寫了 25種這麼多的垂直置中技巧，但或許仍舊有人搞不懂這 25種垂直置中方式的使用時機，今天我們就來看...

CSScoke ‧ 2018-11-10

2 Like 0 留言 7955 瀏覽

鐵人賽自我挑戰組 DAY 15

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

技術 Day15 CSS 動畫 Animation - 基礎篇

利用 keyframes (影格)來設定更細節的動畫吧！之前講解過 Transitions 的動畫效果，也實作一些範例。這一篇文章我們來講講另一個動畫實現方式...

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

1 Like 0 留言 30861 瀏覽

鐵人賽 Modern Web DAY 24

連續30天的超實務網頁設計的垂直置中教學系列第 24 篇

技術使用 table 來做垂直置中區塊

簡言這個方式...沒甚麼好講的，就是一個很單純的用表格來做垂直置中，應該算是初初初初初級垂直置中技巧啦。原理說明去看這篇使用 Display: tabl...

CSScoke ‧ 2018-11-08

5 Like 0 留言 5827 瀏覽

鐵人賽影片教學 DAY 23

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

技術金魚都能懂網頁設計入門 : RWD選單(鐵人賽第二十三天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧媒體查詢設定方式選單控制方式 CSS選取器使用方式行動優先還是桌機...

CSScoke ‧ 2018-11-07 ‧團隊阿莫斯の推坑教

2 Like 0 留言 4611 瀏覽

鐵人賽影片教學 DAY 22

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

技術金魚都能懂網頁設計入門 : RWD排版試做(鐵人賽第二十二天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧從手機先設定還是桌機先設定如何設定HTML結構如何設定CSS 圖片...

CSScoke ‧ 2018-11-06 ‧團隊阿莫斯の推坑教

2 Like 0 留言 5306 瀏覽

鐵人賽影片教學 DAY 21

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

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

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧各種裝置的網頁寬度要怎麼設定製做RWD時會遇到的問題媒體查詢的設定...

CSScoke ‧ 2018-11-05 ‧團隊阿莫斯の推坑教

2 Like 0 留言 4222 瀏覽

鐵人賽影片教學 DAY 20

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

技術金魚都能懂網頁設計入門 : 媒體查詢 (鐵人賽第二十天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧撰寫方式條件設定方式有甚麼作用追蹤 Amos 收好康資訊 Li...

CSScoke ‧ 2018-11-04 ‧團隊阿莫斯の推坑教

2 Like 0 留言 3422 瀏覽

鐵人賽影片教學 DAY 19

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

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

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 animation 的用途 animation 值有哪些動畫跟關鍵影...

CSScoke ‧ 2018-11-03 ‧團隊阿莫斯の推坑教

2 Like 0 留言 3193 瀏覽

鐵人賽影片教學 DAY 18

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

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

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 transition 特性 transition 值有哪些設定方式...

CSScoke ‧ 2018-11-02 ‧團隊阿莫斯の推坑教

3 Like 0 留言 4497 瀏覽

鐵人賽影片教學 DAY 17

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

技術金魚都能懂網頁設計入門 : 排個稀飯版 (鐵人賽第十七天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 flex特性垂直置中的寫法圖片下方的微幅距離怎麼處理掉追蹤...

CSScoke ‧ 2018-11-01 ‧團隊阿莫斯の推坑教

3 Like 0 留言 3497 瀏覽

鐵人賽影片教學 DAY 16

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

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

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧絕對定位的特性有哪些我們在哪些情境可以利用到絕對定位的特性範例實...

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

1 Like 0 留言 4951 瀏覽

鐵人賽 Modern Web DAY 23

連續30天的超實務網頁設計的垂直置中教學系列第 23 篇

技術使用 Writing-mode 來做垂直置中區塊

簡言這個方式應該是比較少見到有人使用的了，這個想法是被老友 Paul 所激發的，writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上...

CSScoke ‧ 2018-11-07

1 Like 1 留言 4424 瀏覽

鐵人賽 Modern Web DAY 22

連續30天的超實務網頁設計的垂直置中教學系列第 22 篇

技術使用 Padding 來做垂直置中啦

簡言「什麼！這也算垂直置中技巧？連我阿嬤都知道這方式吧？！！」對的！這的確也算是一種垂直置中的方式，不可諱言的這方式真的是簡單過頭了，以至於有些開發者認為這...

CSScoke ‧ 2018-11-06

1 Like 0 留言 4186 瀏覽

鐵人賽 Modern Web DAY 21

連續30天的超實務網頁設計的垂直置中教學系列第 21 篇

技術使用相對定位 Relative + translateY 來做垂直置中

簡言這個技巧利用了 Top: 50% 的招式，讓你的物件上方能產生固定％數的距離，接著讓要置中的物件本身使用 tranlateY 的％數來達成垂直置中的需求，...

CSScoke ‧ 2018-11-05

1 Like 0 留言 3984 瀏覽

鐵人賽 Modern Web DAY 20

連續30天的超實務網頁設計的垂直置中教學系列第 20 篇

技術使用計算機 calc 來做到垂直置中效果

簡言 Calc 是計算機英文單字「calculator」的縮寫，這個由微軟提出的 CSS 方法，真的是網頁開發的一大福音啊！我們竟然可以在網頁中直接做計算！？這...

CSScoke ‧ 2018-11-04

技術 網頁的皮膚──CSS階層式樣式表

技術 Secret 18: 毛玻璃效果

技術 Day23 學習 scss 時的那些大小事

技術 Secret 17: 改變色調

技術 Secret 16: 異常的陰影

技術 Day21 實作一個簡單的 Todolist (上)

達標好文 技術 Day19 JS Scroll 實作學習

技術 Secret 14: 簡單的圓餅圖 (CSS transforms)

技術 Day18 來一個 Google Pie Chart 吧

技術 Secret 13: 梯形標籤

技術 Day17 CSS 動畫 Animation 實作練習(下)

技術 Secret 12: 截角效果 (clip-path)

技術 Day16 CSS 動畫 Animation 實作練習(上）

技術 左圖右文版面，文字垂直置中的方式?

技術 RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

技術 IE8以上的網頁我該如何做垂直置中?

技術 Day15 CSS 動畫 Animation - 基礎篇

技術 使用 table 來做垂直置中區塊

技術 金魚都能懂網頁設計入門 : RWD選單(鐵人賽第二十三天)

技術 金魚都能懂網頁設計入門 : RWD排版試做(鐵人賽第二十二天)

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

技術 金魚都能懂網頁設計入門 : 媒體查詢 (鐵人賽第二十天)

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

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

技術 金魚都能懂網頁設計入門 : 排個稀飯版 (鐵人賽第十七天)

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

技術 使用 Writing-mode 來做垂直置中區塊

技術 使用 Padding 來做垂直置中啦

技術 使用相對定位 Relative + translateY 來做垂直置中

技術 使用計算機 calc 來做到垂直置中效果

標記使用者