數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2015年10月23日 星期五

超快速圖文互搭互動:CSS hover



超快速的圖文互搭互動技能:CSS hover


那是一家我常去的
供應德國風味的
餐廳。

油油的香腸,泛著天花板的黃色燈光,
彷若一種暫時的時空置換。

沈思,可以配飯!



影音教學:



<style>
.word2015102301 {
width: 520px;
height: 347px;

font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.6;
text-align: left;
padding: 0.5em;
letter-spacing: 0.1em;

border-bottom: 1px solid darkorange;
}

</style>


可以產生互動的CSS:

.word2015102301:hover {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px;

webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-o-transition: 1s all linear;
-ms-transition: 1s all linear;
transition: 1s all linear;

}

增強功能的CSS:

/* 字體顏色 */
color: white;

/* 邊框 */
border: 1px solid darkorange;

/* 圓角框 */
border-radius: 25px;

/* 旋轉 */
-webkit-transform: rotate(-2deg);








2015年10月17日 星期六

文字區塊加入半透明的底色:圖文互搭技巧


圖文互搭技巧
文字區塊加入半透明的底色













這是文字,但背景色是透明的。

一種流動的質感,是立基於形式之中。
綠色的花舞,抹起了一絲明亮的思緒!



圖文互搭寫作是網路文本的重要特色之一。半透明的背景色,可以為文字和圖像之間,牽動了一種更為互 依的交互感受。

在這裡,我們所思考的互動模態是:滑鼠移到圖中的文字區塊,文字區塊就變底色。這一互動計設之重點,加強文字區塊背景色,讓文字區塊「斷離」於圖像的連結,讓讀者專心於文字區塊,喚醒讀者對文字的注意力。


教學影音:



<style>

.bacimg1017 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 578px;
}

.word2015101701 {
font-family: Verdana, '微軟正黑體';
font-size: 1.26em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 1em;
color: white;
}

.transcolor {
background: rgba(255, 255, 240, 0.4);
}

</style>


補充互動style

.transcolor:hover {
background: rgba(255, 255, 240, 0.9);
color: gray;
}



顏色代碼網站:click here!!


我想看更多基本說明:click here!!



2019/04/新補充內容

另一種思考模式是:
如果我們把滑鼠一移到圖片,圖片中的字就馬上會變化,
這樣的互動模態,要如何來使用css語法呢?


請看範例:













這是文字,但背景色是透明的。

一種流動的質感,是立基於形式之中。
綠色的花舞,抹起了一絲明亮的思緒!



這一效果,我們是使用了如下的互動CSS語法:

.bacimg1017:hover >div {
background: rgba(255, 255, 240, 0.9);
color: gray;
}

請直接加入<style>xxx</style>裡面。