HTML/CSS

2015.11.12

codyhouse 的 tooltip 線上教學筆記與心得


剛剛收到一封 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/

歡迎給我點鼓勵,讓我知道你來過 :)

guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.