「染上鮮血的教學」CSSx樣式圖(橫幅)做出彷模糊動態特效 @ 。異想空間，異於常人的幻想空間。

自製尚未發行/這風格意外好看耶，四月一日其實很帥的

--------------------------------------------------------------------

製作者 領取樂果

禁止事項 本站商標

--------------------------------------------------------

超時空連結

來發教學啦!

語法的部分不是我研發的，模糊的運用是我研發的

觀看教學前的注意事項(下圖阿曉代製)

材料說明:樣式圖1個、背景1個、漸變語法 & hover應用語法

那麼~就開始囉!

步驟1:打開PS(其他軟體也可以))做出一個樣式圖，尺寸自定(以我的為範例是250*597)

步驟2:製作背景，尺寸請依照您的解析度去做

PS.如果想要滿版的話(像我那樣)樣式圖跟背景的高度要一樣喔

步驟3:把步驟1做好的樣式圖複製貼上背景(一定要全部完整的複製喔)，然後去調整位置看你想放哪邊(以我的為範例是左邊)

先大約取好位置，再放到痞客邦去預覽沒問題之後就OK了

步驟4:修改背景以及橫幅的部分語法

大家都知道要讓背景固定不重複吧!(可看我的範例)

接著要讓橫幅也固定不重複喔!

一般常用的是這個"position:absolute;" 我們要改後面讓他變成"position:fixed;"

黑底白字那個跟背景使用的固定是一樣的喔! 至於不重複的話就加在圖網後面(詳細看範例的藍字)

至於固定的語法是來自這裡"點"

步驟5:使用漸變語法 & hover應用

此語法來自"極光"的教學，點雙引號的字可連結(關於語法的運用請看極光所寫的

以下是我做的語法(此語法含部落格標題圖片取代文字，詳細"點"我觀看)所以標籤的部分會不一樣喔!

範例可作為對照之範本，可套用預覽但勿直接使用喔!(有附上一些說明)

(以下是原本的語法)

#banner h1 a {
display:block;
position:fixed;
height:750px;
width:597px;
text-align:left;
padding:0;
background:url(http://i.imgur.com/XnquAzi.png) no-repeat;
top:50px;left:75px; font: 0px "Arial";
}(說明:top的位置要一樣但left的位置不能一樣要稍微往旁邊移)

(以下是漸變語法 & hover應用)

#banner h1 a {
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
width:250px;(說明:寬度要跟樣式圖一樣喔，不然會怪怪的)
float:right;
display:inline;
overflow:hidden;
background-color:#fff;
color:#9db3bc;
margin:-50px 0 0 13px;
}
#banner h1 a:hover {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
width:250px;(說明:寬度要跟樣式圖一樣喔，不然會怪怪的)
float:right;
display:inline;
overflow:hidden;
background-color:#fff;
color:#9db3bc;
margin:-50px 0 0 13px;
}