技術 JS Conf Animation with concept 心得

JS Conf Youtube錄影 Animation purpose making context clear (突顯內容) displaying hier...

技術 CSS MediaQuery小記

media type all 所有裝置 (此為默認值，可省略不寫) screen 螢幕裝置 print 印刷裝置 speech 朗讀裝置 @medi...

技術 Something about front-end

達標好文 技術 Scss - 基礎功能介紹

SASS / SCSS 簡介 SASS 是 CSS 的預處理器，它能編譯出原生 CSS，且提供了更多程式面的東西來撰寫 CSS，讓其更簡潔、更好維護，而 SAS...

徵才 [誠徵] 網頁前端合作伙伴

誠徵網頁前端合作伙伴,希望能夠長期合作者為佳,至少網頁做一年以上吧,最好是常在切版,能夠做動畫之類的更好,然後可以介接API,希望是能夠前後端分離的,不過就算無...

技術 2019/3/28 問題小記

重要的一天，記錄一些筆記: HTML ::after 解釋在原本的元件後面增加內容。 []的運用 style{ .img img[alt]{ wi...

技術 CSS的Class和id到底誰比較大牌？(原始碼比對版)

相較於前一篇用文字記憶法，這篇則是用原始碼做為比較，詳細列出一眼辯英雄的矛盾大對決！從第5項實驗，我們成功證明了id確實強過class的效果！ 但是這時我突然靈...

IrisAndMimi ‧ 2018-11-13

技術 Secret 22: 斑馬條紋

幾年前當我們開始可以用:nth-child()/:nth-of-type()這類的CSS虛擬類別（pseudo-class）時，最常用來做「斑馬條紋的table...

yowlonglee ‧ 2018-11-12

技術 CSS的Class和id到底誰比較大牌？(邏輯記憶版)

就像我們偶爾遇到的雙胞胎同學～ 名字和樣子可能有所差距，但是到底誰先出生，誰才是哥哥或姊姊……大概只有接生的產醫才能清楚了。 現實生活或許可以不必追究長幼，但是...

IrisAndMimi ‧ 2018-11-12

技術 Secret 21: 用CSS換行

需要用CSS換行的時機通常是在使用definition lists的時候，但有時在其他的場合也會有同樣需求。會使用definition lists因為我們想做一...

yowlonglee ‧ 2018-11-11

技術 Amos除了這超過25種垂直置中外還有別的方式嗎?

老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧，其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式，只是有些概念頗...

CSScoke ‧ 2018-11-14

技術 蓋版廣告的垂直置中技巧跟支援

數位生態 蓋板廣告太常見到了，目前幾乎人手多機的情況下，我們每天幾乎都離不開上網這行為，上網除了上班用電腦以外，幾乎都是用行動裝置上網了，也就經常會看到蓋版廣告...

CSScoke ‧ 2018-11-13

技術 [Day27] 網頁教學開源社群 --- freeCodeCamp

想轉職當網頁工程師，你有聽過 freeCodeCamp 嗎？ 轉職寫網頁？ 每當朋友說想要轉職當工程師，我都會推薦直接去寫網頁，因為資源豐富啊！而且市場需求...

nienzu ‧ 2018-11-10

技術 Secret 19: 折角效果2

其他角度的折角 前面我們做了45度的折角，但現實的折角並不會剛好都45度，如果要模擬得更為真實，我們可以試試看其他的角度，比如說用-150deg做30度的折角。...

yowlonglee ‧ 2018-11-10

技術 Secret 20: 連接線

設計師很喜歡在排版中將文字分散對齊，如果你看設計類雜誌或書籍就會發現到處都是。但是在網頁上，分散對齊卻很少用到，甚至連設計師們也少使用，為什麼呢？即使在CSS...

yowlonglee ‧ 2018-11-09

技術 Secret 19: 折角效果

折角是一個很普遍的設計技巧 有許多有用的的CSS方法能實現這個效果，最早在2010年就有了，它的原理是用偽元素做二個三角形，一個跟背景色一樣，假裝是被折去的角，...

yowlonglee ‧ 2018-11-08

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

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

IrisAndMimi ‧ 2018-11-08

技術 Secret 18: 毛玻璃效果

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

yowlonglee ‧ 2018-11-07

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

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

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

技術 Secret 17: 改變色調

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

yowlonglee ‧ 2018-11-06

技術 Secret 16: 異常的陰影

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

yowlonglee ‧ 2018-11-05

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

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

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

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

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

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

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

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

yowlonglee ‧ 2018-11-02

技術 Day18 來一個 Google Pie Chart 吧

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

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

技術 Secret 13: 梯形標籤

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

yowlonglee ‧ 2018-11-01

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

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

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

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

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

yowlonglee ‧ 2018-10-31

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

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

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

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

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

CSScoke ‧ 2018-11-12