mr.01
css
樣板
html
在學期間初學網頁設計整理的語法/好用工具
不定期更新 看到好用/有趣的就放上來這邊
- CSS 樣式彙整-前端筆記
- CSS 幾何邊框產生器
- CSS 漸層
- CSS 動畫
- 3D 效果 CSS
- 自帶高亮程式碼字型
- 假圖假字圖片
- HTML 模板
- CSS模板
- 圖片填滿/圖片比例
- 字體單位設定
- overflow
- border-radius:
- Html iframe
- SVG Icons
- Icon to Font
- Button
- 大小寫轉換
- < dl > < dt > < dd >
- 垂直置中
- Input 美化
- flexbox
- 偽類
- -child
- 偽元素 Pseudo-elements
- Hover
- calc() 數值運算
- RWD-Tablet
- 客製化 web fonts icon
- 圖片輪播 Carousel
- 陰影 box-shadow
臨時放置區:
CSS 純手刻畫畫
https://www.youtube.com/@alvaromontoro/videos
開源 SVG
https://lucide.dev/
https://tools.wingzero.tw/article/sn/3081
Codepen 線上編輯器:
顏色選擇區 適合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 訂閱
主頁提供根據功能分類的風格化樣版
JS 區:
蒐集樣式/模板的網站 偏砸亂 廣告多
(疑怎麼樣樣式沒有生效)前置作業區:
css reset
css 優先順序
https://www.oxxostudio.tw/articles/201405/css-specificity.html
Pattern background
https://css-pattern.com
Shape/Border
簡單手動配置漸層
https://cssgradient.io
隨機生成好看的漸層(已失效)
https://coolors.co/gradient-maker/
特殊材質漸層
https://www.gradientmagic.com/
熱門色系 調色盤選擇器
https://coolors.co/palettes/popular
https://coolors.co/palettes/trending
漸層搭配各種下劃線
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/
轉場文字動畫 CSS
Create Animated Loading Text with CSS
https://codinhood.com/post/animated-loading-text-css/
純CSS股票跑馬燈:
推特按愛心動畫
https://leanrada.com/notes/css-sprite-sheets/
3D 文字效果 CSS
https://blog.logrocket.com/creating-3d-effects-in-css/
補上參數中文解釋(應該沒錯吧?):
<img src="https://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="https://fakeimg.pl/寬x高/顏色(HEX 色碼),亮度/黑字,255">
實際應用:
模板的部分,可自行搜尋相關 Vscode 擴充套件
<!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>
@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, vw, vh 該怎麼用?)
//文章清晰好懂,很多網頁開發的主題文章
忘記當初從哪邊看到的 @@
overflow: auto;
//自動捲軸
//如果要顯示超出內容,,可以加上 title Attribute
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
//只顯示三行
box-sizing:border-box;
border-radius: 左上 右上 右下 左下 ;
frameborder="0" ──不顯示邊框
frameborder="1" ──要顯示邊框
scrolling="no" ──代表不顯示
scrolling="auto" ──則代表根據網頁大小自動顯示。
編輯模式可查看原始程式碼
Flowbite Icons - Free and open-source SVG icons
IcoMoon──將icon轉成Font的平台
https://icomoon.io/app/#/select
1.基本按鈕樣式
2.完美的按鈕並不存ㄗ…
<input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式">
input{
border:0;
color:#fff;
background-color:#003C9D;
border-radius:10px;}
<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>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
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[type="text"]
{
padding:9px 35px;
border:3px black solid;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
詳細原理:圖解:CSS Flex 屬性一點也不難
justify-content 主軸對齊 主軸線預設左到右
圖片來源:
CSS3的flexbox版面配置-flex container(容器)可用的屬性
以:為開頭,方便精準控制
錨點偽類
hover 要在 link visted 之後
active 要在 hover之後
學習資源: Day 02 HTML/CSS 點擊超連結會經歷的偽類選取器(Pseudo-classes)
p>span :
<p> 中的第一個 <span>
其他變化一樣規則
程式語法註解說明引用來源:https://www.oxxostudio.tw/articles/201405/css-selector.html
e.g 滑鼠滑過(hover)改變顏色可用
.xxx:hover::before{
background-color:#7f7f7f;
}
詳細參數設定: CSS 偽元素 ( before 與 after )
圖床不見了 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
width: calc(50% + 8px); /* 寬度設為父元素寬度的50%加上8px */
水平置中:
.text {
position: absolute;
left: 40px; /* 左邊距設為40px */
width: calc(100% - 80px); /* 寬度為父元素寬度減80px */
}
如果元素包含 border
或 padding
,需調整 calc()
開始算數學
實習期間修改 bootstrap
模版發現到的東西
https://icomoon.io/app/#/select
學習資源:自己做web fonts icons
全裝置全包 icon 生成器
https://ossian.tw/全平台網站-icon-生成器/
https://realfavicongenerator.net/
免費 AI 生成 Icon (限次數)
https://www.icongeneratorai.com/
https://bootstrap5.hexschool.com/docs/5.0/components/carousel/
教學文章:
https://ithelp.ithome.com.tw/articles/10247358
基本款:
https://codepen.io/pumii/pen/yLJeZvg
好看的輪播圖片樣式:
https://codepen.io/fadzrinmadu/pen/RwryOVN
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 個項目
}
}
可當作 Border : box-shadow: 0 -10px #02523e inset;
來自卡斯伯的文章
https://www.casper.tw/css/2020/02/21/css-border/#
好看的陰影
https://codepen.io/sdthornton/pen/wBZdXq
陰影做動畫 酷炫的功能
https://ithelp.ithome.com.tw/articles/10220686
同個作者的用滑鼠點擊的互動模擬鍵盤:
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/