【前端動手玩創意】不無聊的HTML與CSS指南

不無聊的前端切版課：第0章── 前言

寫文緣由 現在想要自學前端的人非常多，有些人汲汲營營迷失在網路的資訊大海嘯裡面， 有些人想要犧牲金錢買來貴桑桑的課程，卻發現自己沒什麼成長。 這些都是很可惜的彎路，很多教學文章都太淺了，也沒有手作跟實際運用的結合。 這就是前端動手玩創意的來...

不無聊的前端切版課：第1章── 等待的轉圈圈效果

等待的轉圈圈效果 寫法解說 這個是使用到了CSS的效果，只要懂下面五個語法就可以完成囉！ 筆記觀念 border-radius: 50%; 可以弄出一個圓形 border-top boder是邊框，邊框可以指定上下左右 keyframes ...

不無聊的前端切版課：第2章── 五星評分的星星效果

五星評分的星星效果 筆記觀念 製作這個星星其實可以使用icon，也就是現有的圖示。 兩個icon網站介紹給你 font-awesome & ion-icon 常常看到網站上很多可愛的小圖示，該怎麼弄出來呢？ font-awesome跟ion...

不無聊的前端切版課：第3章── CSS-3D卡片翻轉效果

3D卡片翻轉效果

不無聊的前端切版課：第4章── 好看的hero section

超好看的穿透文字效果 神奇的一句css mix-blend-mode MDN的用法解說 我們的用法就是: html原始碼寫法 很簡單就只是兩個div。 一個放圖片，一個寫文字。 CSS原始碼寫法 就很基本，只要把圖片放在背景就可以了。 心得...

不無聊的前端切版課：第5章──創造一個Skill bar

技能條效果 原理解說 其實只要正確利用CSS的Unit(單位)，也就是%，就可以輕鬆達成囉！ 程式碼內容 html的部分 CSS的部分 心得後記 這個看似簡單的東西，最有趣的地方其實是可以使用d3.js來處理！ 使用了厲害的工具套件之後， ...

不無聊的前端切版課：第6章── 寫一個JS腳本實戰

前情提要 逛論壇或網站常常有惱人的蓋板廣告，要馬就是要你登入、註冊， 要馬就是搞一堆課程的販售廣告， 對重視使用者體驗的人來說，真的是一場噩夢！ 為了解決這個問題，我模擬了AdBlock的其中一個功能，刪除頁面上的元素！ 乾乾淨淨才是王道阿...

不無聊的前端切版課：第7章── canvas截圖的招式

前情提要 想在在JavaScript中，用HTML5的Canvas元素來剪取畫面並存成SVG或PNG。 程式寫法(一) 首先，需要在HTML中創建一個Canvas元素 在JavaScript中，使用canvas.getContext('2d...

不無聊的前端切版課：第8章── 讓你的PDF檔案更難被抓取

前情提要 如果說鎖頭是拿來防君子， 那麼 PDF，基本上就是拿來考驗人性的。 你辛苦整理的教材、簡報、筆記， 只要一變成 PDF，命運通常只有兩條路：

不無聊的前端切版課：第9章── 花式寫todo-list

前情提要 如果說蟑螂怕拖鞋，老鼠愛大米，任何事物都有相生相剋的道理，那麼前端最害怕什麼呢？ 恐怕就是todo-list。 這應該是前端的四大惡夢之一，並不是因為太難了，而是因為太簡單而且太無聊了， 不只無聊，還是每次教學都必須寫的一個磨難，...

不無聊的前端切版課：第10章──卡片製作，才不是！是卡片製作器！

前情提要 常常看到好看的卡片效果，今天我們就來寫一個hero section吧！ 但是……等一下什麼！你說你已經看到標題！ 沒錯！已經來到前端動手玩創意系列的第十篇，我們累積了那麼多，特別的第十篇才不要帶你寫「卡片製作」， 我們要來搞一個c...

不無聊的前端切版課：結語

不無聊的前端切版課：結語 如果你一路看到這裡，代表一件事： 你已經不是在「學怎麼寫 CSS」， 而是在慢慢理解——前端其實可以很有個性。 從一開始的轉圈圈、星星評分、Skill bar， 到 3D 卡片、hero section、canva...