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

1 Like 0 留言 11530 瀏覽

鐵人賽自我挑戰組 DAY 21

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

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

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

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

4 Like 1 留言 17796 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

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

0 Like 0 留言 7030 瀏覽

鐵人賽 Modern Web DAY 18

CSS Secrets 導讀系列第 18 篇

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

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

yowlonglee ‧ 2018-11-02

3 Like 0 留言 9904 瀏覽

鐵人賽自我挑戰組 DAY 18

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

技術 Day18 來一個 Google Pie Chart 吧

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

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

0 Like 0 留言 5837 瀏覽

鐵人賽 Modern Web DAY 17

CSS Secrets 導讀系列第 17 篇

技術 Secret 13: 梯形標籤

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

yowlonglee ‧ 2018-11-01

1 Like 0 留言 3517 瀏覽

鐵人賽自我挑戰組 DAY 17

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

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

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

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

1 Like 0 留言 3523 瀏覽

鐵人賽 Modern Web DAY 16

CSS Secrets 導讀系列第 16 篇

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

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

yowlonglee ‧ 2018-10-31

1 Like 0 留言 3382 瀏覽

鐵人賽自我挑戰組 DAY 16

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

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

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

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

2 Like 0 留言 9999 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

CSScoke ‧ 2018-11-12

3 Like 0 留言 4527 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

CSScoke ‧ 2018-11-11

2 Like 0 留言 2703 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

CSScoke ‧ 2018-11-10

2 Like 0 留言 7609 瀏覽

鐵人賽自我挑戰組 DAY 15

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

技術 Day15 CSS 動畫 Animation - 基礎篇

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

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

1 Like 0 留言 30472 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

CSScoke ‧ 2018-11-08

5 Like 0 留言 5665 瀏覽

鐵人賽影片教學 DAY 23

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

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

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

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

2 Like 0 留言 4475 瀏覽

鐵人賽影片教學 DAY 22

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

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

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

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

2 Like 0 留言 5140 瀏覽

鐵人賽影片教學 DAY 21

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

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

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

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

2 Like 0 留言 4097 瀏覽

鐵人賽影片教學 DAY 20

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

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

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

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

2 Like 0 留言 3247 瀏覽

鐵人賽影片教學 DAY 19

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

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

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

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

2 Like 0 留言 3039 瀏覽

鐵人賽影片教學 DAY 18

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

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

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

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

3 Like 0 留言 4324 瀏覽

鐵人賽影片教學 DAY 17

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

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

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

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

3 Like 0 留言 3347 瀏覽

鐵人賽影片教學 DAY 16

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

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

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

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

1 Like 0 留言 4742 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

CSScoke ‧ 2018-11-07

1 Like 1 留言 4225 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

CSScoke ‧ 2018-11-06

1 Like 0 留言 3967 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

CSScoke ‧ 2018-11-05

1 Like 0 留言 3766 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

CSScoke ‧ 2018-11-04

2 Like 0 留言 12138 瀏覽

鐵人賽 Modern Web DAY 19

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

技術使用 Display: table-cell 做網頁垂直置中

簡言這一招我想有點年紀的開者應該都有看過了，當然像我這麼嫩的開發者當然是第一次看到啦（這是什麼幹話），這一招的原理在於使用 CSS display 屬性將di...

CSScoke ‧ 2018-11-03

1 Like 0 留言 3694 瀏覽

鐵人賽 Modern Web DAY 18

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

技術使用 Grid + margin 來達到垂直置中目的

簡言繼續用 Grid 來置中，由於 Grid 物件對空間解讀的特殊性，我們只要在父層物件設定 display: grid，接著在需要垂直置中的物件上設定 ma...

CSScoke ‧ 2018-11-02

2 Like 0 留言 2899 瀏覽

鐵人賽 Modern Web DAY 17

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

技術使用 Grid + place-content 製作垂直置中區塊

簡言 place-content 這個 CSS Grid 的屬性不知道有多少人用過，此屬性是 align-content 與 justify-content 的...

CSScoke ‧ 2018-11-01

2 Like 0 留言 5815 瀏覽

鐵人賽 Modern Web DAY 16

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

技術使用 Grid + place-items 來做垂直置中效果

簡言 place-items 這屬性不知道有多少人用過，我們可利用這個屬性來快速設定 X 跟 Y 軸的對齊，達到垂直置中的效果。原理說明 place-item...

CSScoke ‧ 2018-10-31

1 Like 0 留言 2889 瀏覽

鐵人賽 Modern Web DAY 15

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

技術使用 Grid + align-self 達到垂直置中效果

簡言 align-self 應該大家都不陌生，基本上就是對 grid Y軸的個別對齊方式，只要對單一子層物件設定 align-self: center 就能達成...

CSScoke ‧ 2018-10-30

技術 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 來做到垂直置中效果

技術 使用 Display: table-cell 做網頁垂直置中

技術 使用 Grid + margin 來達到垂直置中目的

技術 使用 Grid + place-content 製作垂直置中區塊

技術 使用 Grid + place-items 來做垂直置中效果

技術 使用 Grid + align-self 達到垂直置中效果

標記使用者