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

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!!