*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年5月2日 星期六

圖文的互動:hover:純CSS



圖配文的敘事性互動。

當滑鼠移到圖時,說明性的文字就跑出來。
這是常見的互動手法之一,這個範例是用純CSS的語法來達成。
可以注意的是:文、圖中間的透明度是可以 再被「作者」考量的特色之一。
不同的透明度,會影響 受眾對圖文之間的「交互性理解」。這樣的注意事項,是數位文本寫作時所特有的。
作者將這種互動寫作的思維面向,稱之為「互動文本寫作技法」。






這是秋天

風的影子,也會一絲絲的感受到。
陽光成為一種渴望的想像,配上可能的啤酒。



CSS語法, 請置於<body>之後:            

<style>

.word0502 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
}

.backimg {
background: url(https://lh4.googleusercontent.com/-GQrnWebGPFM/VSJTjv6ykdI/AAAAAAAAbHM/6BcmFsFmYJg/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}

.colortr {
color: transparent;
}

.colortr:hover {
color: white;
background: linear-gradient(0deg, rgba(60,60,60,0.75), rgba(60,60,60,0.75)), url(https://lh4.googleusercontent.com/-GQrnWebGPFM/VSJTjv6ykdI/AAAAAAAAbHM/6BcmFsFmYJg/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
</style>



影音教學:             


說明:
一、紅色字體處,是透明層的顏色。【我要看色碼表click
二、綠色字體處,是透明度。1 是完全不透明。


沒有留言:

張貼留言