# CSS 樣式彙整-前端筆記 > [name=mr.01] `css` `樣板` `html` 在學期間初學網頁設計整理的語法/好用工具 不定期更新 看到好用/有趣的就放上來這邊 > [TOC] 臨時放置區： CSS 純手刻畫畫 https://www.youtube.com/@alvaromontoro/videos 開源 SVG https://lucide.dev/ https://tools.wingzero.tw/article/sn/3081 Codepen 線上編輯器: >https://codepen.io/mrwang01/ 顏色選擇區 適合UI視覺設計師 https://randoma11y.com/ Bootstrap 視覺化排版 https://layoutit.com/build 純 CSS 圈圈叉叉遊戲 https://codepen.io/kalabasa/pen/oVMOZK --- 新手學習區： grayshine 的 CSS筆記 https://hackmd.io/@grayshine/ryVK07EUK 六角學院助教課堂筆記/新手學習指南 https://hackmd.io/@WangShuan/HkPptPtnu 六角學院免費開放部分課程： 使用 HTML、CSS 開發一個網站 https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ByjK1_z_d --- Html/CSS/Javascript 包山包海樣版區： FreeFrontend CSS Landscapes 每月會固定分享 CSS 技術文章 可以練習的教學影音，支援 RSS 訂閱 主頁提供根據功能分類的風格化樣版 >https://freefrontend.com/css-landscapes/ JS 區： > https://freefrontend.com/javascript-code-examples/ 蒐集樣式／模板的網站 偏砸亂 廣告多 > https://codemyui.com --- (疑怎麼樣樣式沒有生效)前置作業區： css reset >https://meyerweb.com/eric/tools/css/reset/ css 優先順序 >https://www.oxxostudio.tw/articles/201405/css-specificity.html # CSS 幾何邊框產生器 https://css-generators.com Pattern background https://css-pattern.com Shape/Border # CSS 漸層 簡單手動配置漸層 https://cssgradient.io 隨機生成好看的漸層(已失效) https://coolors.co/gradient-maker/ 特殊材質漸層 https://www.gradientmagic.com/ 熱門色系 調色盤選擇器 https://coolors.co/palettes/popular https://coolors.co/palettes/trending 漸層搭配各種下劃線 <iframe height="300" style="width: 100%;" scrolling="no" title="Cool CSS Underline Effects" src="https://codepen.io/TheCSSKing/embed/VwwRzgg?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/TheCSSKing/pen/VwwRzgg"> Cool CSS Underline Effects</a> by Jordan Marshall (<a href="https://codepen.io/TheCSSKing">@TheCSSKing</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> # CSS 動畫 AOS 動畫 | Animate On Scroll Library https://michalsnik.github.io/aos/ 動畫樣式設定生成器： https://animista.net/play/entrances/scale-in/scale-in-center CSS製作逐格動畫(中文精簡版教學) https://www.astralweb.com.tw/frame-by-frame-animation/ CSS 製作流暢(游泳)逐格動畫 Animating sprite images in CSS https://codinhood.com/micro/animate-octocat-sprite-css/ <!-- Github 那隻原來是貓咪章魚 @@ https://docfunc.com/posts/69/%E7%B0%A1%E5%96%AE%E9%96%8B%E7%AE%B1-github-%E7%9A%84%E5%90%89%E7%A5%A5%E7%89%A9octocat-figurine-post --> 轉場文字動畫 CSS Create Animated Loading Text with CSS https://codinhood.com/post/animated-loading-text-css/ 純CSS股票跑馬燈： <iframe height="300" style="width: 100%;" scrolling="no" title="Infinite Scroll Animation Effect Using Only CSS" src="https://codepen.io/optimisticweb/embed/oNOBwBq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/optimisticweb/pen/oNOBwBq"> Infinite Scroll Animation Effect Using Only CSS</a> by Optimistic Web (<a href="https://codepen.io/optimisticweb">@optimisticweb</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 推特按愛心動畫 https://leanrada.com/notes/css-sprite-sheets/ # 3D 效果 CSS 3D 文字效果 CSS https://blog.logrocket.com/creating-3d-effects-in-css/ # 自帶高亮程式碼字型 <iframe height="300" style="width: 100%;" scrolling="no" title="Syntax highlighting with a Colr Font" src="https://codepen.io/argyleink/embed/preview/GRbyNNv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/argyleink/pen/GRbyNNv"> Syntax highlighting with a Colr Font</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> # 假圖假字圖片 [假字、假圖產生器整理](https://hackmd.io/@chupai/SJOEPUpSE) https://fakeimg.pl/ 補上參數中文解釋(應該沒錯吧?)： ```htmlmixed <img src="https://fakeimg.pl/350x200/ff0000,128/000,255"> <img src="https://fakeimg.pl/寬x高/顏色（HEX 色碼）,亮度/黑字,255"> ``` <img src="https://fakeimg.pl/350x200/ff0000,128/000,255"> --- 實際應用： ![](https://i.imgur.com/rzOST1o.png) 模板的部分，可自行搜尋相關 Vscode 擴充套件 # HTML 模板 ```htmlmixed <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="index.css"> <!-- 創建 index.css --> </head> <body> <div class="style"> <h1>我是區塊元素</h1> </div> <script src="index.js"></script> <!-- 創建 index.js --> </body> </html> ``` # CSS模板 ```css @import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); * { font-family: "Noto Sans TC"; } body { background-color: red; } html, body { display: flex; justify-content: center; align-items: center; } ``` CSS 版面配置 ： https://zh-tw.learnlayout.com/toc 感謝 Will 保哥中文翻譯 # 圖片填滿/圖片比例 > bg-img >object-fit > display: block > calc > aspect-ratio 詳細請參考文章：https://hackmd.io/@lunzaizai/B1mRKlqvY # 字體單位設定 參考文章： [一次搞懂 CSS 字體單位：px、em、rem 和 %](https://www.oxxostudio.tw/articles/201809/css-font-size.html) //作者有很多實用前端技術文章 [CSS 長度單位：px, em, rem, vw, vh 該怎麼用？](https://noob.tw/css-units/)) //文章清晰好懂，很多網頁開發的主題文章 # overflow 忘記當初從哪邊看到的 @@ ```css overflow: auto; //自動捲軸 //如果要顯示超出內容，，可以加上 title Attribute text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //只顯示三行 box-sizing:border-box; ``` # border-radius: border-radius: 左上 右上 右下 左下 ; # Html iframe frameborder="0" ──不顯示邊框 frameborder="1" ──要顯示邊框 scrolling="no" ──代表不顯示 scrolling="auto" ──則代表根據網頁大小自動顯示。 # SVG Icons 編輯模式可查看原始程式碼 Flowbite Icons - Free and open-source SVG icons [https://www.svgrepo.com](https://flowbite.com/icons/) <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-type-css" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#6f32be" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M14 3v4a1 1 0 0 0 1 1h4" /> <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" /> <path d="M8 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0" /> <path d="M11 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" /> <path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-margin" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#6f32be" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M8 8h8v8h-8z" /> <path d="M4 4v.01" /> <path d="M8 4v.01" /> <path d="M12 4v.01" /> <path d="M16 4v.01" /> <path d="M20 4v.01" /> <path d="M4 20v.01" /> <path d="M8 20v.01" /> <path d="M12 20v.01" /> <path d="M16 20v.01" /> <path d="M20 20v.01" /> <path d="M20 16v.01" /> <path d="M20 12v.01" /> <path d="M20 8v.01" /> <path d="M4 16v.01" /> <path d="M4 12v.01" /> <path d="M4 8v.01" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-seo" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3" /> <path d="M14 16h-4v-8h4" /> <path d="M11 12h2" /> <path d="M17 8m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-world-www" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4" /> <path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4" /> <path d="M12.5 3a16.989 16.989 0 0 1 1.828 4" /> <path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4" /> <path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4" /> <path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4" /> <path d="M2 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4" /> </svg> # Icon to Font IcoMoon──將icon轉成Font的平台 https://icomoon.io/app/#/select # Button 1.基本按鈕樣式 <iframe height="265" style="width: 100%;" scrolling="no" title="CSS-Button樣式" src="https://codepen.io/mrwang01/embed/preview/jObLLvR?height=265&theme-id=light&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/mrwang01/pen/jObLLvR'>CSS-Button樣式</a> by mrwang01 (<a href='https://codepen.io/mrwang01'>@mrwang01</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> 2.完美的按鈕並不存ㄗ... <iframe height="300" style="width: 100%;" scrolling="no" title="CSS Tricks button style" src="https://codepen.io/noelpena/embed/dlovG?default-tab=css%2Cresult&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/noelpena/pen/dlovG"> CSS Tricks button style</a> by Noel Peña (<a href="https://codepen.io/noelpena">@noelpena</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### button（單純按鈕）、reset（清空表單）、submit（送出表單） ```htmlmixed <input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式"> input{ border:0; color:#fff; background-color:#003C9D; border-radius:10px;} ``` # 大小寫轉換 ```htmlmixed <p style="text-transform:uppercase;">Ework Design</p> <p style="text-transform:lowercase;">Ework Design</p> <p style="text-transform:capitalize;">ework design</p> ``` # < dl > < dt > < dd > ```htmlmixed <dl> 　<dt>項目標題一</dt> 　<dd>這裡是項目敘述一 ...</dd> 　<dt>項目標題二</dt> 　<dd>這裡是項目敘述二 ...</dd> </dl> ``` # 垂直置中 ```htmlembedded 1. display:flex; align-items:center;(垂直置中) justify-content:center;(水平置中) 2. display:table-cell; /*假表格*/ 3. transform:translateY(-50%); /*子元素加 position:relative*/ /*CSS3位移*/ 4. calc 動態計算(算數學) 課堂老師提起的 ``` 參考文章： https://www.oxxostudio.tw/articles/201408/css-vertical-align.html https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html # Input 美化 (自行調整...) ```htmlmixed= input[type="text"] { padding:9px 35px; border:3px black solid; cursor:pointer; -webkit-border-radius: 5px; border-radius: 5px; } ``` <!-- ![](https://i.imgur.com/5bN2kvp.png) --> # flexbox 詳細原理：[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/) > justify-content 主軸對齊 主軸線預設左到右 > 圖片來源： [CSS3的flexbox版面配置－flex container(容器)可用的屬性](https://www.webdesigns.com.tw/flexbox_flex-container.asp) <!-- display:flex --> <!-- ![](https://i.imgur.com/nyRA0A1.gif) ![](https://i.imgur.com/pSI9zAR.gif) ![](https://i.imgur.com/t2eHPzE.gif) ![](https://i.imgur.com/azBpjcn.gif) ![](https://i.imgur.com/QF51Nyx.gif) --> # 偽類 以:為開頭，方便精準控制 >## 錨點偽類 ![](https://i.imgur.com/HnN4DIU.gif) ```css hover 要在 link visted 之後 active 要在 hover之後 ``` 學習資源: [Day 02 HTML/CSS 點擊超連結會經歷的偽類選取器(Pseudo-classes)](https://ithelp.ithome.com.tw/articles/10265504) # -child * first-child：第一個子元素 * last-child：最後一個子元素 * nth-child(數字)：第幾個子元素 * nth-child(2n)：挑出偶數的元素(2的倍數) * nth-child(2n+1)：挑出奇數的元素 * nth-last-child(數字)：從後面數來第幾個子元素 * only-child：只有一個子元素 p>span : `<p> 中的第一個 <span>` 其他變化一樣規則 程式語法註解說明引用來源：https://www.oxxostudio.tw/articles/201405/css-selector.html # 偽元素 Pseudo-elements * ::before ::after 開頭 e.g 滑鼠滑過(hover)改變顏色可用 ```htmlembedded .xxx:hover::before{ background-color:#7f7f7f; } ``` 詳細參數設定： [CSS 偽元素 ( before 與 after )](https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html) # Hover ~~圖床不見了 imgur 上傳的 mp4~~ ~~https://i.imgur.com/CRfi2St.mp4~~ 按鈕 `hover` 樣式： 用 pug sass 製作的按鈕範例，來自系上學長製作的範例 https://codepen.io/mrwang01/pen/VRaWvM 偽元素+hover+animation 組合技: https://codepen.io/argyleink/pen/poEjvpd <iframe height="500" style="width: 100%;" scrolling="no" title="CSS mouse-out transition effect" src="https://codepen.io/argyleink/embed/poEjvpd?default-tab=&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/argyleink/pen/poEjvpd"> CSS mouse-out transition effect</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> # calc() 數值運算 ```css width: calc(50% + 8px); /* 寬度設為父元素寬度的50%加上8px */ ``` 水平置中： ```css .text { position: absolute; left: 40px; /* 左邊距設為40px */ width: calc(100% - 80px); /* 寬度為父元素寬度減80px */ } ``` 如果元素包含 `border` 或 `padding`，需調整 `calc()` 開始算數學 # RWD-Tablet * 後台電商購物清單 簡潔的表單設計 https://codepen.io/AllThingsSmitty/pen/MyqmdM * 多樣商品列表清單 https://codepen.io/pumii/pen/WNxvNGg # 客製化 web fonts icon 實習期間修改 `bootstrap` 模版發現到的東西 https://icomoon.io/app/#/select 學習資源：[自己做web fonts icons](https://wcc723.github.io/css/2013/10/05/web-fonts-2/) 全裝置全包 icon 生成器 https://ossian.tw/%e5%85%a8%e5%b9%b3%e5%8f%b0%e7%b6%b2%e7%ab%99-icon-%e7%94%9f%e6%88%90%e5%99%a8/ https://realfavicongenerator.net/ 免費 AI 生成 Icon (限次數) https://www.icongeneratorai.com/ # 圖片輪播 Carousel ## bootstrap 元件 https://bootstrap5.hexschool.com/docs/5.0/components/carousel/ ## jQuery - Owl Carousel 教學文章： https://ithelp.ithome.com.tw/articles/10247358 基本款： https://codepen.io/pumii/pen/yLJeZvg 好看的輪播圖片樣式： https://codepen.io/fadzrinmadu/pen/RwryOVN ```javascript loop: true, // 循環播放 margin: 10, // 外距 10px nav: true, // 顯示點點 responsive: { 0: { items: 1 // 螢幕大小為 0~600 顯示 1 個項目 }, 600: { items: 3 // 螢幕大小為 600~1000 顯示 3 個項目 }, 1000: { items: 5 // 螢幕大小為 1000 以上 顯示 5 個項目 } } ``` # 陰影 box-shadow 可當作 Border : `box-shadow: 0 -10px #02523e inset;` 來自卡斯伯的文章 https://www.casper.tw/css/2020/02/21/css-border/# 好看的陰影 <iframe height="900" style="width: 100%;" scrolling="no" title="Material Design Box Shadows" src="https://codepen.io/sdthornton/embed/wBZdXq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/sdthornton/pen/wBZdXq"> Material Design Box Shadows</a> by Samuel Thornton (<a href="https://codepen.io/sdthornton">@sdthornton</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> https://codepen.io/sdthornton/pen/wBZdXq 陰影做動畫 酷炫的功能 https://ithelp.ithome.com.tw/articles/10220686 <iframe height="300" style="width: 100%;" scrolling="no" title="demo-box-shadow" src="https://codepen.io/yachen/embed/gOYEMoM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yachen/pen/gOYEMoM"> demo-box-shadow</a> by yachen (<a href="https://codepen.io/yachen">@yachen</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 同個作者的用滑鼠點擊的互動模擬鍵盤： https://codepen.io/yachen/pen/PoYKVzb ---- 我的社群平台： My HackMD : https://hackmd.io/@DCT My Medium : https://medium.com/mr-wang My Blog :[ https://wastu01.github.io/](https://wastu01.github.io?utm_source=hackmd&utm_medium=social)