iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 25

[Day 25] 阿嬤都看得懂的 CSS 微互動元件

阿嬤都看得懂的 CSS 微互動元件

今天我們要來做動態繪本!
https://www.youtube.com/embed/xbzVGjzF1UM

什麼,一下就要這麼進階嗎?呃嗯,其實還好。仔細想想,其實這些動態繪本,都有個固定的模式,那就是讀者做某個動作以後就會觸發另個動作。例如,讀者拉動某個拉桿以後,某張卡片就會開始移動;讀者翻開某個卡片以後,就會看見某個原本隱藏的卡片。

這些互動,在網頁上會是像怎麼樣呢?可能會是滑過某個區塊元素的時候,某個區塊元素開始移動,或者點選某個區塊元素後,浮現出某個文字段落。簡單地說,這些互動分作 2 個部分:

  1. 使用者作了某個動作;
  2. 網頁發生改變。

讓我們先想想那些改變是怎麼發生的。當我們想要讓某個區塊元素移動,我們會做的事情,是改變這個區塊元素的位置。當我們想要讓某個文字段落浮現,我們會做的事情,是先讓那個文字段落隱藏起來,然後再讓這個文字段落變成可見的。

更動位置比較簡單,例如我們可以調整

  1. margin 外距;
  2. 將 position 設為 relative 或 absolute 以後,可以使用 top/ right/ bottom/ left 來移動位置。

更動某個元素從可見變成不可見的方法有 3 種:

  1. 設定 visibility 屬性:常見的值有 visible 和 hidden 兩種,可以把元素顯示或隱藏。值得注意的是,無論顯示或隱藏,這個元素都還是佔據版面的喔!
  2. 設定 display 屬性:設定為 none 就整個元件消失,所以消失後也不占版面。其他值就看前面的介紹囉!
  3. 設定 opacity 屬性:這是元件的透明程度,值為 0 到 100 間,越小越透明。因此,只要把 opacity 設為 0,視覺效果就會像是隱藏起來了!

那麼,我們要怎麼知道使用者的滑鼠點到什麼元件呢?或者,用比較炫炮的方式說,我們要怎麼**「監聽」(listen)** 使用者滑鼠點擊的動作呢?還記得我們前幾天介紹的偽類選擇器嗎?我們同樣可以把滑鼠移上滑鼠點選的元素,當作某個偽類,並且改變這些元素的屬性。例如,

  • :hover 就是用來表示滑鼠移上的那類元素;而
  • :active 就是用來表示滑鼠點擊的那類元素;另外,
  • focus 就是用來表示滑鼠選中的那類元素。

因此,現在我們可以

  1. 使用偽類來得知使用者的一些動作,以及
  2. 在這個偽類中,使用其他樣式來做出改變。
    這個公式在 .css 檔案中看起來會像這樣:
類別:使用者動作{
	屬性: 值;
}

注意,如果是想正好選到那個類別半形冒號前面不能有空格,想想看為什麼呢?可以看看前兩天對於類別組合選擇器的討論。空格在類別組合的選擇器當中,是有意義的喔。

例如,在前幾天的貼紙簿練習中,我們可以把粉紅貼紙另外加上偽類:

.pink:hover{
  background-color: red;
}
.pink:focus{
  background-color: brown;
}

我們就會發現滑鼠移上去以後,粉紅貼紙變成紅色;不過,為什麼我們滑鼠怎麼點擊都沒有效果呢?這是因為區塊元素不像核取方塊、或按鈕,預設就可以被選中。想要讓元素能夠被選中,必須在那個元素的 HTML 標籤中,另外寫上 tabindex = "-1",看起來會像這樣:

<div class="banner pink" tabindex="-1">
  <p>粉紅貼紙</p>
</div>

這時候,我們就可以發現,粉紅貼紙被點擊時,變成咖啡色;點擊網頁其他地方時,就又變回粉紅色囉!

那麼,讓我們來玩個組合魔術。如果我想讓所有黃色貼紙,在滑鼠移上橘色貼紙以後就變成金色,該怎麼辦呢?

沒錯,上面這個使用者動作的對象元件,和產生樣式改變的元件,並不是同個元件。因此,我們沒辦法只寫

.yellow:hover{
  background-color: gold;
}

否則,只有當滑鼠移到黃色貼紙上時,黃色貼紙才會變成金色。當滑鼠移到橘色貼紙上時,黃色貼紙可是完全沒有反應喔!

因此,我們必須把滑鼠移上橘色貼紙這件事情寫出來,但是實際發生樣式改變的元件是黃色貼紙。這件事情乍看有點困難,不過,我們仔細觀察這兩個元件後會發現:橘色貼紙是黃色貼紙的父元素。因此,我們可以使用組合選擇器,只挑出滑鼠移上的橘色貼紙當中的黃色貼紙,並且讓這些貼紙進行樣式改變。實際上寫起來會像這樣:

.orange:hover .yellow{
  background-color: gold;
}

那麼,如果我們想要讓黃色貼紙在滑鼠移上時消失,應該怎麼辦呢?我們剛剛學過 2 種讓元件消失的方式。讓我們先來試試看 display:

.yellow:focus{
  display: none;
}

黃色貼紙確實在滑鼠移上後消失了,不過後面的貼紙就會跟著移動很煩,所以使用 display 就不是個太好的策略。這時候,我們就可以使用前面提到的 visibility 這個屬性:

.yellow:hover{
  visibility: hidden;
}

那麼,如果我們想要讓黃色貼紙在滑鼠選中後消失,應該怎麼辦呢?讓我們先把黃色貼紙都先加上 tabindex,然後使用前面提到的 visibility 這個屬性:

.yellow:hover{
  visibility: hidden;
}

我們會發現,儘管點擊黃色貼紙時,貼紙瞬間消失了,但是立刻又出現了!這是因為 display: none 與 visibility: hidden 的元素都無法被選中。因此,我們必須使用上面說到的第三種方法,也就是把 opacity 設為 0:

.yellow:focus{
  opacity: 0;
}

這樣就可以讓黃色貼紙在被點擊時消失囉!

底下是今天介紹的動態貼紙簿源碼,各位阿嬤可以自己 fork 回家玩玩喔!
https://codepen.io/LogosChen/pen/oNwJPBL

今天我們介紹了怎麼使用 CSS 寫出微互動元件,不過有些阿嬤可能會覺得這個做法很侷限:

  1. 只有使用者動作的目標對象就是改變樣式的元素,或者目標對象和改變樣式的元素間具備層級關係時,才能夠實現這個微互動;
  2. 監聽使用者動作的方法很侷限,只有少數的滑鼠動作。

例如,我們沒辦法在使用者輸入某些字詞的時候,網頁上就做出相應的改變;這當然會大幅侷限我們希望達成的效果。因此,只使用 HTML 和 CSS,在網頁設計上還是無法達成細緻的互動。所以,我們明天開始,就要引入重要的互動腳本,也就是我們的 JavaScript 囉!


想一想:如果我們是想讓黃色貼紙一開始隱藏,只有被點擊的時候才出現,又應該怎麼做呢?


上一篇
[Day 24] 阿嬤都看得懂的響應式網頁設計在幹嘛
下一篇
[Day 26] 阿嬤都看得懂的程式語言在幹嘛
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言