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

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

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

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

技術 Secret 5: 條紋背景

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

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

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

技術 旅館預約服務練習紀錄-首頁練習

前言 這次找了 The F2E 前端修練時光屋 的稿件，找到了這份稿件(如果您有興趣，可以再找自己喜歡的設計稿來練功)。 其實原本滿逃避面對這件事情，因為對於...

技術 鐵人賽 Day27 人員卡片介紹：加上互動色彩

人員卡片介紹除了可以做一點動態的互動外，顏色上的互動特效也是非常棒的特效效果！這次想做的感覺如下圖： 這部分的 SCSS 如下： .card { wid...

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

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