剛剛收到一封 codyhouse 的線上課程通知，這一期他們推廣的是 CSS animation 應用，好奇點進去後發現有一堂課程是免費的，所以就打開來聽聽看啦 ～

▼ 有 play 可以選的 tooltip 就是這期的免費課程啦

教學影片

花了半小時聽完後覺得受益良多，雖然講者的口音有點重，但可以把影片字幕打開，也可以直接看程式碼，聽完之後也是對其他付費課程有所心動 XD，非常棒的行銷手法呢，先試聽一堂課喜歡再買 😀

因為他的 youtube 影片連結是公開的，所以我也放一份在我的 blog 裡面，以下是自己聽完做的一些筆記跟重點，很多語法我自己也已實作了，所以看到國外講師也是這樣寫覺得很開心 😊

總之我覺得不錯的語法都會重點摘錄出來給大家參考，希望對你們有所幫助 🌹

筆記與心得

∎ aria-hidden：HTML5 語意，用於屏幕閱讀器的，幫助殘障人士更好的訪問網站。(參考來源)

∎ 萬年水平垂直置中的另一種方法：

section {
  width: 100%;
  height: 100vh;
  display: table;
}
section .center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

∎ 文字如果要垂直置中，可以將 height 以及 line-height 設定成一樣的高度，但文字必須維持一行才有用。

∎ 如果不希望 hover 影響隱藏的元素，可以改用 visibility: hidden 將元素隱藏，這樣滑鼠移過之後也不會啟動 hover 效果

∎ visibility 可以用在 transition，但 display 不行

∎ 假設元素的寬度是 50px 可以善用 calc(50% - 25px) 將元素置中

∎ 利用偽元素製作三角形

border: 10px solid transparent;
border-top-color: #2e1c28;

偶爾聽聽外國人的線上課程也很棒，可以學到很多不一樣的寫法以及詮釋的方法，codyhouse 的範例跟教學品質都很棒，有興趣可以連回他們的網站看更多資料唷: https://codyhouse.co/

更多 CSS 相關文章

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS

在 Vue3 + Vite 專案下設定亮色與暗色主題

2022-11-18

在 Vue3 + Vite 專案下設定亮色與暗色主題

HTML/CSS

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

2022-11-17

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

HTML/CSS

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

2022-09-23

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

HTML/CSS

難解的 CSS 排版：認識對齊(下)

2019-09-05

難解的 CSS 排版：認識對齊(下)

HTML/CSS

難解的 CSS 排版：認識對齊(上)

2019-09-04

難解的 CSS 排版：認識對齊(上)

HTML/CSS