CSS
初探 CSS Grid 系統
原本還猶豫著要不要寫這篇，因為我只有在這個網站的首頁簡單使用而已，要當作筆記恐怕還需要更進一步認識，更別說要拿來當教學文ww，但是當初建立這個部落格也只是抱著好玩的心態，然後將一些學錫過程做個簡單紀錄，所以還是決定把一些用過的 CSS Grid 功能給記下來，所以路過大神可以直接略過XD 有點長跟離題的前言 現在進行網站前端開發還是 APP 介面設計，都會採用**“網格”**的方式下去設計，個人認為這樣的優點是架構清晰、同時版面(layout)風格也可以固定，最重要的是方便設計。任何需要操作介面，如果設計不恰當，很容易讓人失去耐心，反之，好的設計，可以使人更加關注網站內 …
[Note] CSS Grid Cheat …
Source： https://dev.to/simonpaix/css-grid-cheat-sheet-2ll8 Here only my learning note. If any problem, I will remove this….
CSS 的 filter 濾鏡
最近又學了新的CSS技巧，filter濾鏡效果，使用這個就可以直接改變圖片風格。 會用到filter主要是因為我想讓我的首頁輪播的背景圖片變淡，如果直接使用CSS就可以自動為每張圖片定義相同風格了。 有幾種filter可以用呢? 總共有10種filter可以使用 ● brightness 亮度 初始設定為 1 或是 100%。 數值加大就變亮；數值減少就變暗。 img { -webkit-filter: brightness(0.5); /* Safari */ filter: brightness(0.5); } ● contrast 對比 初始設定為 1 或是 100%。 數值加大，增加對 …
CSS： letter-spacing 控制字元間 …
.res{ background-color: #111; color: #ddd; padding: 20px; text-align: center; } 基本上，CSS可以達成大部分網頁視覺設計，最近又常常看一些網頁設計教學，發現很常使用這個指令，就來簡單記錄一下。 <style> .res{ background-color: #111; color: #ddd; padding: 20px; text-align: center; } </style> 效果 1 <p class="res" …
CSS + swiper.js： 3D …
最近看到YouTube的影片是製作一個3D Responsive Slider 2的效果，裡面直接使用swiper.js + CSS，呈現出來感覺很不錯就試試看了。 基本上用官方程式範例先做個記錄，以後或許會加到網站中XD <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta …
CSS： 匯入 CSS 樣式表
每次都會忘記要如何匯入，乾脆直接記下來XD 樣式表和首頁放一起href="styles.css" ├── style.css └── index.html ``` 樣式表放在資料夾中，要把路徑也加進去href="css/style.css"。 ├── css | └── style.css └── index.html ``` 順便也記一下其他加入CSS的方法。 直接添加在HTML Tag中 <h1 style="text-align: center;">Title</h1> 加 …