Try   HackMD

CSS 樣式彙整-前端筆記

mr.01
css 樣板 html

在學期間初學網頁設計整理的語法/好用工具

不定期更新 看到好用/有趣的就放上來這邊

臨時放置區：

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

漸層搭配各種下劃線

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/

轉場文字動畫 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

3D 文字效果 CSS
https://blog.logrocket.com/creating-3d-effects-in-css/

自帶高亮程式碼字型

假圖假字圖片

假字、假圖產生器整理

https://fakeimg.pl/

補上參數中文解釋(應該沒錯吧?)：

<img src="https://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="https://fakeimg.pl/寬x高/顏色（HEX 色碼）,亮度/黑字,255">
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

實際應用：

模板的部分，可自行搜尋相關 Vscode 擴充套件

HTML 模板

<!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模板

@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 和 %

//作者有很多實用前端技術文章

CSS 長度單位：px, em, rem, vw, vh 該怎麼用？)

//文章清晰好懂，很多網頁開發的主題文章

overflow

忘記當初從哪邊看到的 @@

  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

Icon to Font

IcoMoon──將icon轉成Font的平台

https://icomoon.io/app/#/select

Button

1.基本按鈕樣式

2.完美的按鈕並不存ㄗ…

button（單純按鈕）、reset（清空表單）、submit（送出表單）

<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 > < dd >

<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 美化

(自行調整…)









 input[type="text"]
{
  padding:9px 35px; 
  border:3px black solid;
  cursor:pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

flexbox

詳細原理：圖解：CSS Flex 屬性一點也不難

justify-content 主軸對齊 主軸線預設左到右

圖片來源：
CSS3的flexbox版面配置－flex container(容器)可用的屬性

偽類

以:為開頭，方便精準控制

錨點偽類

hover 要在 link visted 之後
active 要在 hover之後

學習資源: Day 02 HTML/CSS 點擊超連結會經歷的偽類選取器(Pseudo-classes)

-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)改變顏色可用

 .xxx:hover::before{
 background-color:#7f7f7f;
 }

詳細參數設定： CSS 偽元素 ( before 與 after )

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

calc() 數值運算

width: calc(50% + 8px); /* 寬度設為父元素寬度的50%加上8px */

水平置中：

.text {
  position: absolute;
  left: 40px; /* 左邊距設為40px */
  width: calc(100% - 80px); /* 寬度為父元素寬度減80px */
}

如果元素包含 border 或 padding，需調整 calc()
開始算數學

RWD-Tablet

客製化 web fonts icon

實習期間修改 bootstrap 模版發現到的東西
https://icomoon.io/app/#/select
學習資源：自己做web fonts icons

全裝置全包 icon 生成器

https://ossian.tw/全平台網站-icon-生成器/

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

  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/#

好看的陰影

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/

Last changed by 
 
wa.__.wa
哈囉，歡迎追蹤我的 HackMD，不定期更新 https://wastu01.github.io?utm_source=Hackmd&utm_medium=social
0
5
11827

Read more

AutoGPT 安裝/學習/測試筆記 ( OpenAI ChatGPT GPT-4 )

取得 GPT-4 API ，實測 AutoGPT 效果

Nov 27, 2024
Tesseract 使用＆安裝＆訓練

人工智慧課堂專題應用，利用圖像文字辨識套件可辨識掃描的文件/圖片中的文字，並將簡單驗證碼去噪，灰度二值化，結合賴機器人進行影像辨識。

Nov 6, 2024
Python 學習資源整理

匯集一些學習 Python 過程中找到的教學網站

Nov 4, 2024
Pandas模組與資料型態 / Series / DataFrames 學習筆記

Pandas 資料格式操作學習，了解 Series Dataframe 物件，新增修改刪除資料

Oct 30, 2024
Read more from wa.__.wa
Published on HackMD