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

2012年10月13日 星期六

我要性感的! 半透明的誘惑 >> 在背景色


真的,我也很喜歡看性感的!

尤其是半透明的那種,癢癢的讓人說不出的「愉悅」。愉悅,這是「文化研究」專用術語啊,同學!。
  • 文化研究是「左派的」,非常「嚴肅」研究流行文化的學問!
我特別喜歡那種「半透明」的,隔上一層的,那種版面的性感。

【段落旋轉語法 ↘】

<div style="font-family: 微軟正黑體; font-size: 210%; font-weight: bold; -webkit-transform:rotate(12deg);">

或者加入互動的class

<style>
.rotate101101 {
-webkit-transform: rotate(0deg);
font-family: 微軟正黑體;
font-size: 210%;
font-weight: bold;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.rotate101101:hover {
-webkit-transform: rotate(6deg);
}
</style>



半透明背景色網頁視覺效果:

 
半透明的背景色!(+)
如果放在圖片上面,背景色就會很性感的
看透過去哦!
但「字」卻仍會清清楚楚,不會變透明的!
語法:
<div style="background-color: rgba(255,181,181,0.2); height: 200px; width: 300px; ">
<br />
<br />
半透明的背景色!<br />
如果放在圖片上面,背景色就會很性感的看透過去哦!<br />
但「字」卻仍會清清楚楚,不會變透明的!
</div>
語法說明:
  • 就用上這個:「background-color: rgba(255,181,181,0.2);」。255, 181, 181,是顏色的RGB碼(>),0.2 是指透明程度。0.0是完全透明,1.0就是不透明了。



背景色   v.s.  透明背景色 (mouseover)
<style>
/* 不透明背景色 */
.bg2016101101 {
background-color: lightgray;
}

/* 透明背景色 */
.bg2016101102 {
background-color: rgba(255,181,181,0.4);
}

</style>


實作影音範例,請按此




背景色的習作:


請做出DIV堆積木法版型。請按此看效果
再請做出不同透明度的背景色,來觀察文本所產生的意義呈現感受。

文字DIV黑色背景色,background-color: rgba(0, 0, 0, 1);
透明層級的變化:     0    0.3   0.5,      0.7,        1   。(←請按看效果




雨天的溫泉鄉

那是烏來,一個在半山中的小鄉。
冬天,飄雨是應景氛圍。
三三兩兩的,是人;
昏昏暗暗的,是路燈的心情。




做法構思:

  1. 先置入一張大圖。
  2. 在圖的下方做一文字框DIV。DIV內寫入標題及內文。
  3. 在標題的文字部分,又設置一個DIV將其包起來。這形成了文字DIV內有標題DIV的結構。
  4. 最後將文字框DIV上移。此即將CSS套入文字DIV內,亦即將class "divword20171108" 設置入文字DIV,即可。


寫作注意事項:

如果上方版面區域的媒材是「圖 片」, 當下方背景圖或背景色,使用 margin-top 的功能上移;當重疊時,那麼背景圖或背景色的功能會失效。

因為,「強勢」的圖片,會蓋住「背 景圖、背景色」。 所以在圖片後面的DIV區塊,如果要使用margin-top去蓋住圖像,則要使用重疊css語法,使 其疊在圖像之上,效果才會出來。例如:

<style>
position: relative;
z-index: 2;
</style>


這樣,圖像下方的DIV區塊的所有效果,就會出來。我要取消z-index功能


我想看文字DIV設定的 style 語法:

<style>

/*文字DIV的CSS*/
.divword20171108 {
box-sizing: border-box;
width: 520px;    /*你可以重新設置寬度,例如width: 560px; ,或是拿掉以預設值來做。*/
margin: auto;
padding: 1em 0em 1em 2em;
background-color: rgba(0, 0, 0, 1);    /*請重新設置參數使其文字DIV透明背景色出現,例如 background-color: rgba(0, 0, 0, 0.3); 。*/
color: white;
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.12em;
margin-top: 0em;    /*請重新設置參數使其文字DIV上移,例如 margin-top: -10em; 。*/
transition: 1s ;
position: relative;           /*以下這二個一定要加才會有文字DIV上升到最上層的效果*/
z-index: 2;
}

/*大標*/
.divword20171108 >div{
font-size: 1.45em;
}

</style>


影音教學:





沒有留言:

張貼留言