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

2016年12月23日 星期五

CSS: transform: 2D變形效果


CSS: transform: 2D變形效果
CSS的互動變化能力,愈來愈強。就技術面而言,要學的固來很多,但更重要的核心問在於:這 些技術要如何來使用,可以讓對文本的理解,表現出數位文本的對 話性意義給出特色。(mouseover)



教學影音  click!!


寫作物件的「旋轉」

CSS範例: transform: rotate();

<style>
div.trarota161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}

div.trarota161223:hover  {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
</style>







寫作物件的「縮放」

CSS範例: scale() /scaleX()/ scaleY();

<style>
div.trasca161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}

div.trasca161223:hover  {
-webkit-transform: scale(0.5, 2);
-moz-transform: scale(0.5, 2);
-0-transform: scale(0.5, 2);
-ms-transform: scale(0.5, 2);
transform: scale(0.5, 2);
}
</style>






寫作物件的「移動」

CSS範例: translate() /translateX()/ translateY();

<style>
.div16122301 {
border: 1px solid darkred;
}

div.tratral161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;

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

div.div16122301:hover >div.tratral161223  {
-webkit-transform: translate(200px, 20px);
-moz-transform: translate(200px, 20px);
-0-transform: translate(200px, 20px);
-ms-transform: translate(200px, 20px);
transform: translate(200px, 20px);
}
</style>






教 學影音  click!!



寫作物件的「傾斜」

CSS範例: skew()/ skewX()/ skewY();

<style>
.div16122302 {
border: 1px solid darkred;
}

div.traskew161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;

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

div.div16122302:hover >div.traskew161223  {
-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-0-transform: skewX(30deg);
-ms-transform: skewX(30deg);
transform: skewX(30deg);
}
</style>




說明:
指定x軸,x不動,效果:
y軸往x軸方向以逆時方向傾斜30度的形狀。
指定y軸,y不動,效果:
x軸往Y軸方向以順時方向傾斜30度的形狀。



寫作物件的transform的「原點轉移」

CSS範例: transform-origin: x% y%;

<style>
.div16122303 {
border: 1px solid darkred;
text-align: center;
}

div.div16122303 >img {
margin: 0px;
padding: 0px;
border: none;

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

div.div16122303:hover > img:nth-of-type(2)  {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
transform-origin: 0% 100%;
}
</style>


 

說明:
x軸:left / 0%, center /50%, right /100%;
Y軸: top /0%, center /50%,  bottom / 100%;






使用click的 方法


如果想要:click一下,物件可以移動,而不是使用hover功能。這 樣的互動模態之文本形式,可以使用jQuery程式來達成。
我們可以看到簡單的運用jQuery的toggleClass(),再配合使用css trnsition以及transform之語法,就可以創造補間形式的動態效果。
這一作用更直覺,更適合一般人的直覺寫作思考。



CSS:

<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}

.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
</style>


jQuery: click

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


$(this).toggleClass('clicsstt170101add01');


教學影音  click!!





2016年12月20日 星期二

動畫的使用與設計 CSS: @keyframes


動畫的使用與設計
CSS: @keyframes
教學影音  click!!





自動啟動的動畫效果

<style>

div.imagkey1220 {
color: gray;
-webkit-animation: myanim16122001 5s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122001 {
0%  {padding-left: 0px;}
50% {padding-left: 220px;}
100% {padding-left: 500px;}
}

img.keyrota {
-webkit-animation: myanim16122002 3s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122002 {
0%  {-webkit-transform: rotate(-0deg);}
30% {-webkit-transform: rotate(-15deg);}
50% {-webkit-transform: rotate(-45deg);}
80% {-webkit-transform: rotate(-90eg);}
100% {-webkit-transform: rotate(-60deg);}
}

</style>








滑鼠移入啟動移出停止的效果

<style>

div.imagkey1220b {
color: gray;
-webkit-animation: myanim16122001 5s infinite;
animation-timing-function: linear;
animation-play-state: paused;
}

@-webkit-keyframes myanim16122001 {
0%  {padding-left: 0px;}
50% {padding-left: 220px;}
100% {padding-left: 500px;}
}

div.imagkey1220b:hover {
animation-play-state: running;
}

img.keyrota {
-webkit-animation: myanim16122002 3s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122002 {
0%  {-webkit-transform: rotate(-0deg);}
30% {-webkit-transform: rotate(-15deg);}
50% {-webkit-transform: rotate(-45deg);}
80% {-webkit-transform: rotate(-90eg);}
100% {-webkit-transform: rotate(-60deg);}
}

</style>




教學影音  click!!



補充資料css:上面會自動移動的play icon


.teamov16122601 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}

.teamov16122601:hover {
-webkit-animation: myanim16122601 0.5s infinite;
animation-timing-function: linear;

}

@-webkit-keyframes myanim16122601 {
0%  {background-position: left center;}
100% {background-position: left 2px center;}
}



參考圖像 






2016年11月29日 星期二

精準控制互動物件:CSS選擇器:自身、父子、兄弟關係選擇



CSS:hover 各種表現形式及轉場動態

CSS:hover可以有互動效果,加上父子、兄弟關係的運用,最後再附上轉場效果,就有能讓你驚豐的視覺豐富感。更重要的是,這一方法可以讓使用者有著 強大的思考空間,來創作。

教學影音 click!!


CSS:hover  自身互動
互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004: 8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005: 9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007:617)。

css碼:

<style>
.hoverself1129 {
}

.hoverself1129:hover {
background: rgba(92, 173, 173, 0.6);
}
</style>


CSS:hover  父子關係
互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004: 8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005: 9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007: 617)。

css碼:

<style>
.hoverself112902 {
}

.hoverself112902:hover >span {
color: red;
font-weight: bold;
}
</style>


教學影音 click !


CSS:hover  兄弟關係
互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004: 8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005: 9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007: 617)。

<style>
.hoverbro1129 {
border-left: 2px solid transparent;
}

.hoverbro1129:hover +div {
border-left: 2px solid darkred;
padding-left: 2em;
}
</style>

補充說明:當中間有 <br>段行空白,請加+br

.hoverbro1129:hover +br +br +div {
color: red;
}


補充說明:想要有動態效 果,請加入下列css碼

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


創作範例:





CSS碼:

<style>
.tdimgup1129 >img {
position: relative;
top: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

.tdimgup1129:hover >img {
top: -15px;
}

</style>





2016年11月1日 星期二

bxSlider 快速使用:2016年版



可快速使用的content slider。
同時又可以依創作者的要求,快速地
來做出不同小大樣態的互動媒材。

教學影音


一、把下列程 式碼copy到<head>xxx</head>之間(課堂建議)或<body>之後:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
 
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script>
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>



範例一:就直接使用。


HTML碼:

<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>



範例二:用div來設置大小


HTML碼:


<div style="border: 1px solid red; width: 320px;">
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
</div>



 範例三:與表格的配合使用




夏日的台北

天空和
許多有顏色的物件,
染著了莫名情緒為衣。

HTML碼: 如例二先設置div,和表格同寬

<div style="width: 182px;">
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
</div>


 範例四:多張圖顯示


jQuery 以及 HTML碼

jquery碼

<script>
$(document).ready(function(){
  $('.slider2').bxSlider({
    slideWidth: 250,
    minSlides: 2,
    maxSlides: 2,
    slideMargin: 10
  });
});
</script>


HTML碼

<div class="slider2">
<div class="slide"><img src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"></div>
<div class="slide"><img src="https://c6.staticflickr.com/9/8637/28854719061_2c5ac0918e_b.jpg"></div>
<div class="slide"><img src="https://c6.staticflickr.com/9/8842/28233257493_8c9bdfd372_b.jpg"></div>
<div class="slide"><img src="https://c7.staticflickr.com/9/8685/28629384750_97ab277e1a_b.jpg"></div>
</div>




2016年10月23日 星期日

影像的翻轉:互動模態



影像的翻轉

透過影像翻轉這樣的互動模態,影像可以傳達更多意義。這種意義遠遠超過單一以及靜止的影像 呈現。
有想法的使用文本互動呈現,可以表達出傳統文本所無法帶出的意義呈現模式。這是網路互動文本為我們帶來的新挑戰,寫作上的新挑戰。



範例一:圖像與圖像的翻轉


HTML碼:

<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face"> <img id="f1-pic01"
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></div>
<div class="back face center">
<img id="f1-pic02"
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></div>
</div>
</div>





範例二:圖像與文字的翻轉

標題

內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文


HTML碼:

<div id="f2_container">
<div id="f2_card" class="shadow">
<div class="front face"> <img id="f2-pic01"
src="https://c7.staticflickr.com/9/8024/28901542670_ff22134ba2_b.jpg"></div>
<div class="back face center">
<p>標題</p>
<p>內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文</p>
</div>
</div>
</div>




範例所用的 CSS:

<style>
#f1_container {
position: relative;
width: 450px;
height: 300px;
z-index: 1;
}

img#f1-pic01 {
width: 450pxp;
height: 300px;
}

img#f1-pic02 {
width: 450pxp;
height: 300px;
}

#f1_container {
perspective: 1000;
}

#f1_container:hover #f1_card {                                                        
transform: rotateY(180deg);
}

#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.6s linear;
}

#f2_container {
position: relative;
width: 450px;
height: 300px;
z-index: 1;
}

img#f2-pic01 {
width: 450pxp;
height: 300px;
}

img#f2-pic02 {
width: 450pxp;
height: 300px;
}

#f2_container {
perspective: 1000;
}

#f2_container:hover #f2_card {
transform: rotateY(180deg);
}

#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;                                                        
transition: all 0.6s linear;
}

.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.face.back.center {
display: block;
transform: rotateY(180deg);
color: white;
background-color: #ADADAD;
}

.face.back.center >p:nth-of-type(1) {
width: 80%;
font-family: Verdana, '微軟正黑體';
font-size: 1.65em;
font-weight: bold;
line-height: 1.8;
letter-spacing: 0.07em;
margin-top: 2em;
margin-bottom: 0.5em;
margin-left: 40px;
border-bottom: 1px solid white;
}

.face.back.center >p:nth-of-type(2){
width: 80%;
font-family: Verdana, '微軟正黑體';
font-size: 1.23em;
font-weight: normal;
line-height: 1.2;
letter-spacing: 0.1em;
margin-left: 40px;
}
</style>

影音教學:





2016年7月4日 星期一

互動圖像變化:純CSS:大、小、左右、上下


互動圖像變化:純CSS
這是基本的數位互動寫作技法之一。

圖像的變化,常用的互動技能是image hover。 透過滑鼠指向後的圖像移動,所產生的圖像「資訊差」,來達到圖像空間敘事性意義的開展。
使用圖像來傳達意義,是數位文本的特色。圖像的意義要能在數位媒介中表現的更為豐富,使用互動來使圖像說故事,就是重要的新寫作思考特色。








上圖:由左向右移
中圖左:由小變大
中圖右:由大變小
下圖:由下向上移



image hover

圖像的變化,互動之後若要能產生更豐富的敘事意義,那麼圖像前後的變化之間,就一定要有可以被連結思考的相關性畫面。如此讀者才能從圖像的變化中,解讀出 意義的呈現。














影音教學:



寫作5步驟:
  1. 設定div的長、寬度。
  2. 設定div的css功能為「超出隱藏」,overflow: hidden;
  3. 插入圖像。
  4. 設定圖像的hover CSS,二單位一組(如下,請注意教學影音說明)。
  5. 清除圖像原先設定的長寬度。




CSS語法:

<style>

/* 跨出div隱藏*/
.divofhid {
overflow: hidden;
}

/* 變大*/
.divgrowimg {
width: 310px;
height: 233px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.divgrowimg:hover {
width: 620px;
height: 425px;
}

/* 變小*/
.divpicsmall {
width: 620px;
height: 425px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.divpicsmall:hover {
width: 310px;
height: 233px;
}

/* 左右*/
.divpicmovlr {
width: 700px;
height: 467px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.divpicmovlr:hover {
margin-left: -300px;
}

/* 上下*/
.divpicmovbt {
width: 560px;
height: 374px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.divpicmovbt:hover {
margin-top: -170px;
}

</style>




語法來源:https://designshack.net/?p=36895
更多圖像的動態效果,請查閱&搜尋 CSS transitions 。


2016年6月3日 星期五

多層次圖說,一個接著一個出場:jQuery





一、請先學會基本功:排隊.請編輯元素一個接著一個出場:easy jQuery
二、本單元著重在應用 1px 技法:讓空白版面消失。1px技法css:   style="width: 1px; height: 1px;"


click the picture


這是超甜的鳳梨!
黃澄澄的顏色保證,好吃!

原產地是台南關廟
團購超搶手。 電話:#0028888888

   ▼ 我削得超漂亮的 ▼






jQuery 程式碼(請放於body之後):

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">



互動驅動程式 (請放於body之後):

<script>
$(function() {
var flag = 'a0608';
$('#a010608').click(function() {

if(flag == 'a0608') {
$('#b010608').delay(0).show('slide', {direction: 'right'}, 800);
$('#b020608').delay(400).show('slide', {direction: 'left'}, 800);
$('#b030608').delay(1300).show('slide', {direction: 'up'}, 800);

flag = 'b0608';
}

else {
$('#b010608, #b020608, #b030608').hide();
flag = 'a0608';
}

});
});
</script>



CSS 文字語法:

<style>
/* 基本黑體內文(粗):置中*/
.ironcontentbo0601 {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* 基本黑體內文 (粗):靠右*/
.ironcontentbo060102 {
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* div消失 */
.displano {
display: none;
}
</style>



影音教學:





2016年5月22日 星期日

超快速好用的image hover:共24種:表格寫作


多變的圖文互動形式:共24種
在我的教學系 中,這是表格基本操作使用的範例。使用表格,並固定表格格子的大小,以此為基礎來創作圖文互動寫作呈現形式。這也是一般常說的 image-hover 的互動樣態。
這是純 CSS 語法的,簡單又快速。因應教學需求,有修改語法。請參考語法來源USING CSS3




範例:port-1 effect-1

範例:port-2 effect-2

Your Title中文標題

使用這種互動模式,來傳達圖文之間的互動意義。

Learn more

Your Title中文標題

使用這種互動模式,來傳達圖文之間的互動意義。


Your Title中文標題

使用這種互動模式,來傳達圖文之間的互動意義。

Learn more
範 例:
port-6 effect-3

Your Title中文標題

使用這種互動模式,來傳達圖文之間的互動意義。

Learn more
範例:port-4 effect-3

Your Title中文標題

使用這種互動模式,來傳達圖文之間的互動意義。

Learn more
範 例:
port-7 effect-1



範例變化樣 式:共 24 種

port-1 effect-1
port-1 effect-2
port-1 effect-3

port-2 effect-1
port-2 effect-2
port-2 effect-3

port-3 effect-1
port-3 effect-2
port-3 effect-3

port-4 effect-1
port-4 effect-2
port-4 effect-3

port-5 effect-1
port-5 effect-2
port-5 effect-3

port-6 effect-1
port-6 effect-2
port-6 effect-3

port-7 effect-1
port-7 effect-2
port-7 effect-3

port-8 effect-1
port-8 effect-2
port-8 effect-3




教學影音:


影音教學內容:
  1. 使用表格設定格子寬度之功能,基本功之一。
  2. 請調整HTML語法的內容參數。
  3. 可以刪掉<a xxx>Learn more</a>這一部分對外連結的內容。




HTML語 法:

<div class="port-1 effect-1 boxsize">
<div class="image-box"> <img style="width: 420px;"
src="照片網址"> </div>
<div class="text-desc">
<h3>Your Title中文標題</h3>
<p>使用這種互動模式,來傳達 圖文之間的互動意義。</p>
<a href="#" class="btn">Learn more</a> </div>




CSS語法:

<style>
div.boxsize {box-sizing: border-box;}
div.boxsize img {max-width: 100%; vertical-align: middle;}
div.boxsize h3{font-family: '微軟正黑體'; font-size: 1.14em; margin: 5px 0 10px;}
div.boxsize p{font-family: '新細明體'; letter-spacing: 0.1em; line-height: 1.6; font-size: 15px; margin-bottom: 15px;}
.btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s;}
.btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.text-desc{box-sizing: border-box; position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;}

/* effect-1 css */
.port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);}
.port-1 .text-desc{opacity: 0.9; top: -100%; transition: 0.5s; color: #000; padding: 45px 20px 20px;}
.port-1 img{transition: 0.5s;}
.port-1:hover img{transform: scale(1.2);}

.port-1.effect-1:hover .text-desc{top: 0;}

.port-1.effect-2 .text-desc{top: auto; bottom: -100%;}
.port-1.effect-2:hover .text-desc{bottom: 0;}

.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px;}
/* effect-1 css end */

/* effect-2 css */
.port-2{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 800px;}
.port-2 .text-desc{z-index: -1; transition: 0.6s;}
.port-2 .image-box{transition: 0.4s;}
.port-2:hover .image-box{transform: rotateX(80deg); transform-origin: center bottom 0; transition: 0.4s;}

.port-2.effect-1:hover .text-desc{opacity: 1;}

.port-2.effect-2 .text-desc{opacity: 1; top: -100%;}
.port-2.effect-2:hover .text-desc{top: 0;}

.port-2.effect-3 .text-desc{opacity: 1; top: auto; bottom: -100%;}
.port-2.effect-3:hover .text-desc{bottom: 0;}
/* effect-2 css end */

/* effect-3 css */
.port-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;}
.port-3 img{transition: 0.5s;}

.port-3.effect-1 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px; opacity: 1;}
.port-3.effect-1:hover .text-desc{transform: none;}
.port-3.effect-1:hover img{opacity: 0; transform: scale(1.2)}

.port-3.effect-2 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center bottom 0; top: auto; bottom: 0; padding: 45px 20px 20px;}
.port-3.effect-2:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-2:hover img{transform: translateY(-100%)}

.port-3.effect-3 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px;}
.port-3.effect-3:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-3:hover img{transform: translateY(100%)}
/* effect-3 css end */

/* effect-4 css */
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); z-index: 10;}

.port-4.effect-1 img{transition: 0.5s; transform: rotateY(360deg) scale(1, 1);}
.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-1:hover .text-desc{transform: rotateY(360deg) scale(1, 1); opacity: 1;}
.port-4.effect-1:hover img{transform: rotateY(0deg) scale(0, 0);}

.port-4.effect-2{z-index: 12;}
.port-4.effect-2 img{transition: 0.5s; transform: rotateX(360deg) scale(1, 1);}
.port-4.effect-2 .text-desc{transform: rotateX(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-2:hover .text-desc{transform: rotateX(360deg) scale(1, 1); opacity: 1;}
.port-4.effect-2:hover img{transform: rotateX(0deg) scale(0, 0);}

.port-4.effect-3 img{transition: 0.5s; transform: rotate(360deg) scale(1, 1);}
.port-4.effect-3 .text-desc{transform: rotate(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-3:hover .text-desc{transform: rotate(360deg) scale(1, 1); opacity: 1;}
.port-4.effect-3:hover img{transform: rotate(0deg) scale(0, 0);}
/* effect-4 css end */

/* effect-5 css */
.port-5{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible;}

.port-5.effect-1{z-index: 9;}
.port-5.effect-1 img{transition: 0.5s;}
.port-5.effect-1:hover img{transform: scale(0.5) translateX(-100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.port-5.effect-1 .text-desc{transform: translateX(100%); opacity: 0; padding: 40px 20px 20px 90px; transition: 0.5s;}
.port-5.effect-1:hover .text-desc{transform: translateX(0px); opacity: 1;}

.port-5.effect-2{z-index: 10;}
.port-5.effect-2 img{transition: 0.5s; transform: none);}
.port-5.effect-2:hover img{transform: scale(0.5) translateY(100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.port-5.effect-2 .text-desc{transform: translateY(-100%); opacity: 0; padding: 20px; transition: 0.5s;}
.port-5.effect-2:hover .text-desc{transform: translateY(0px); opacity: 1;}

.port-5.effect-3 img{transition: 0.5s;}
.port-5.effect-3:hover img{transform: scale(0.5) translateX(100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.port-5.effect-3 .text-desc{transform: translateX(-100%); opacity: 0; padding: 40px 90px 20px 20px; transition: 0.5s;}
.port-5.effect-3:hover .text-desc{transform: translateX(0px); opacity: 1;}
/* effect-5 css end */

/* effect-6 css */
.port-6{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible;}

.port-6.effect-1{z-index: 8;}
.port-6.effect-1 img{transition: 0.5s;}
.port-6.effect-1:hover img{transform: scale(0.3) translateY(110%); position: relative; z-index: 9;}
.port-6.effect-1 .text-desc{transform: translateY(-100%); opacity: 0; padding: 10px 20px; transition: 0.5s;}
.port-6.effect-1:hover .text-desc{transform: translateY(0px); opacity: 1;}

.port-6.effect-2{z-index: 7;}
.port-6.effect-2 img{transition: 0.6s; z-index: 1;}
.port-6.effect-2:hover img{transform: scale(0.3) translateX(110%); position: relative; z-index: 9;}
.port-6.effect-2 .text-desc{transform: translateX(-100%); opacity: 0; padding: 40px 120px 20px 20px; transition: 0.6s;}
.port-6.effect-2:hover .text-desc{transform: translateX(0px); opacity: 1;}

.port-6.effect-3 img{transition: 0.5s;}
.port-6.effect-3:hover img{transform: scale(0.3) translateY(-110%); position: relative; z-index: 9;}
.port-6.effect-3 .text-desc{transform: translateY(100%); opacity: 0; padding: 85px 20px 10px; transition: 0.5s;}
.port-6.effect-3:hover .text-desc{transform: translateY(0px); opacity: 1;}
/* effect-6 css end */

/* effect-7 css */
.port-7{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: hidden;}
.port-7 .text-desc{opacity: 0; transition: 0.5s; color: #000;}

.port-7.effect-1 img{transition: 0.5s; position: relative; width: 100%; left: 0;}
.port-7.effect-1:hover img{left: 50%;}
.port-7.effect-1 .text-desc{transform: perspective(600px) rotateY(90deg); transform-origin: left center 0; width: 50%; position: absolute; left: 0; top: 0; padding: 18px 10px;}
.port-7.effect-1:hover .text-desc{opacity: 1; transform: perspective(600px) rotateY(0deg); z-index: 99;}

.port-7.effect-2 img{transition: 0.5s; position: relative; width: 100%; top: 0;}
.port-7.effect-2:hover img{top: 50%;}
.port-7.effect-2 .text-desc{transform: perspective(600px) rotateX(90deg); transform-origin: top center 0; width: 100%; position: absolute; left: 0; top: 0; height: 50%; padding: 5px 10px;}
.port-7.effect-2:hover .text-desc{opacity: 1; transform: perspective(600px) rotateX(0deg); z-index: 99;}

.port-7.effect-3 img{transition: 0.5s; position: relative; width: 100%; right: 0;}
.port-7.effect-3:hover img{right: 50%;}
.port-7.effect-3 .text-desc{transform: perspective(600px) rotateY(-90deg); transform-origin: right center 0; width: 50%; position: absolute; left: auto; right: 0; top: 0; padding: 18px 10px;}
.port-7.effect-3:hover .text-desc{opacity: 1; transform: perspective(600px) rotateY(0deg); z-index: 99;}
/* effect-7 css end */

/* effect-8 css */
.port-8{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: hidden;}
.port-8 .text-desc{opacity: 0; transition: 0.5s; color: #000; padding: 45px 20px 20px;}

.port-8.effect-1 img{transition: 0.5s;}
.port-8.effect-1:hover img{transform: scale(1.1);}
.port-8.effect-1 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.port-8.effect-1:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 20%;}

.port-8.effect-2 img{transition: 0.5s;}
.port-8.effect-2:hover img{transform: scale(1.1);}
.port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.port-8.effect-2:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}

.port-8.effect-2 img{transition: 0.5s;}
.port-8.effect-2:hover img{transform: scale(1.1);}
.port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.port-8.effect-2:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}

.port-8.effect-3 img{transition: 0.5s;}
.port-8.effect-3:hover img{transform: scale(1.1);}
.port-8.effect-3 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden; background: none; padding: 40px 70px 20px;}
.port-8.effect-3 .text-desc:before, .port-8.effect-3 .text-desc:after{background-color: #fff; border-radius: 50% 50% 0 0; content: ""; height: 100%; left: 50%; position: absolute; top: 0; transform: rotate(-50deg); transform-origin: 0 100% 0; width: 50%; z-index: -1;}
.port-8.effect-3 .text-desc:after {left: 0; transform: rotate(50deg); transform-origin: 100% 100% 0;}
.port-8.effect-3:hover .text-desc{opacity: 1; transform: scale(1);}
/* effect-8 css end */


/*= Media Screen CSS
==================== */
@media only screen and (max-width: 1090px){
ul{width: 340px; margin: 0 auto;}
li{width: 100%; margin: 20px 0;}
.port-5.effect-1 {z-index: 19;}
}

@media only screen and (max-width: 360px){
ul{width: 300px;}
.port-1 .text-desc,
.port-1.effect-3:hover .text-desc,
.port-3.effect-1 .text-desc,
.port-3.effect-3 .text-desc,
.port-4.effect-1 .text-desc,
.port-4.effect-2 .text-desc,
.port-4.effect-3 .text-desc, .port-8 .text-desc{padding: 20px;}
.text-desc{padding: 7px;}
.port-5.effect-1 .text-desc{padding: 13px 20px 20px 90px;}
.port-5.effect-2 .text-desc{padding: 10px;}
.port-5.effect-3 .text-desc{padding: 16px 90px 20px 20px;}
.port-6.effect-1 .text-desc .btn,
.port-6.effect-2 .text-desc .btn,
.port-6.effect-3 .text-desc .btn,
.port-7.effect-1 .text-desc .btn,
.port-7.effect-2 .text-desc .btn,
.port-7.effect-3 .text-desc .btn,
.port-8.effect-3 .text-desc .btn{display: none;}
.port-6.effect-2 .text-desc{padding: 20px 120px 20px 20px;}
.port-6.effect-3 .text-desc{padding: 75px 20px 10px;}
.port-7.effect-1 .text-desc{padding: 12px 10px;}
.port-8.effect-3 .text-desc{padding: 28px 70px 20px;}
}
/*= Media Screen CSS End
======================== */
</style>




2016年4月17日 星期日

表格的圖文整合寫作:實例二


表格的圖文整合寫作:實例二
表格使用的優點在於,可以創造出某種版面結構上的秩序感。秩序感是平面構成重要的美 感原則。

「圖文整合寫作」是數位文本中必然要成為常見的「文本格式」之一。
例如表格的特性,使我們易於感受和學會圖文整合寫作過程中,要常注意的某種寫作原則。本例著重如下原理:(一)分割比例(二)媒材位移(空 間關係)。
分割,請注意同等分割以及黃金比例分割。
位移,本例,請特別注意「1px」的寫作技法,請看影音教學。







顏色
在日常生活中
線條
在不經意的那一眼波流轉
經常,顏色與線條,往往令我騅足再三。
感官終究是有某種秩序的一種結構體,
它會在符合那種結構中的態勢綻放出一種永恆的感受之美。






範例的 CSS 語法:

<style>

/* 表格內大標字 */
.bigtitle010417 {
font-family: Verdana, '微軟正黑體';
font-size: 2.1em;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.06em;
margin-bottom: 0.5em;
text-shadow: 1px 1px 2px silver;
}

/* 表格內大標後粗體摘要字*/
.ironcontentbo010417 {
font-family: Verdana, '微軟正黑體';
font-size: 1.29em;
font-weight: bold;
line-height: 1.8;
letter-spacing: 0.1em;
}

/* 圓角框語法*/
.imgbord {
border-radius: 25px;
}

/* 旋轉語法*/
.trans0417 {
-webkit-transform: rotate(-10deg);
}

</style>


教學影音: