2022-11-22
整合 TailwindCSS 與 Element Plus 的 CSS class 變數
HTML/CSS
2015.11.12
剛剛收到一封 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/