2011年7月28日 星期四

☆噗浪透明CSS - Part1




如果你愛台灣可以再加上這幾行(來源):


後記:
因為剛剛改了噗浪風格所以把它貼了出來,
這次是稍微有仔細看過後從頭到尾一行一行去改的,
不像以前都是先捉別人的再去用修改的方式,
雖然那樣省時間但是都不知道對方到底改了啥,
我改的方法是非常原始的,
幾乎沒有去動到其他的樣式元素,
僅僅是做alpha透明而已~

注意:
我只在Chrome上測試,
IE6並不支援...


相關連結:
噗浪透明CSS - Part2

7 則留言:

匿名 提到...

不好意思請問一下
關於河道上的噗的透明化,滑鼠上去之後就會變的不透明

那有沒有辦法,我點開河道上的噗之後,該噗的所有內容都會一起不透明??

因為我查到的透明化都需要把滑鼠一個一個放,滑鼠移開之後又變成透明了,有時候一個噗回的很長看起來好累,但又很喜歡整個介面看起來是透明化QAQ

不知道大大能幫幫忙嗎?

感謝

Hoi (QQBoxy) 提到...

這樣嗎?
body {
background: #FFF url(http://lh4.googleusercontent.com/-kauFFrBG6Vs/TjCkcKybSsI/AAAAAAAACv4/00aCedUpe_o/plurk_background.jpg) center top no-repeat;
filter: alpha(opacity=0) !important;
-moz-opacity: 0 !important;
opacity: 0 !important;
}
body:hover {
filter: alpha(opacity=100) !important;
-moz-opacity: 1.0 !important;
opacity: 1.0 !important;
}

匿名 提到...

啊先謝謝大大!

但不是背景圖ˋˋ

應該是這個控制的

/*噗*/
.plurk {
filter: alpha(opacity=10);
-moz-opacity:0.1;
opacity: 0.1;
}
.plurk:hover {
filter: alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}

比如說我發了一個噗,A和B都回了我的噗

現在是我的滑鼠移到我的噗,變成不透明的,但我要看A回的內容,我要把滑鼠移到A的部分,接著要看B回的內容,要把滑鼠挪到B

當我要看A的內容時後,我發的噗和B的噗都會變成透明的

有沒有辦法可以我點開我發的這個噗,這個噗內的所有內容都同時變成不透明的?

就可以一次看清楚我的噗、A的內容、B的內容?

抱歉字有點多,但我想不到簡略的形容方法XDD

Hoi (QQBoxy) 提到...

你直接把/*噗*/以下的內容都砍掉,
或是把內容取代為:

/*噗*/
.plurk {
filter: alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}

看看是不是你想要的0w0

匿名 提到...

但我還是希望他有本來是透明的,滑鼠移上去之後才變成不透明的(一個噗包含下面的回文同時變成不透明的)

謝謝你~~~~

Hoi (QQBoxy) 提到...

由於噗浪本身的設計就是噗文與回應是不同區塊,
只是將回應的位置對齊在噗文的下面,
所以我最多只能改成下面這樣,
把噗的內容換成以下,看看是不是妳想要的:
/*噗*/
.plurk_box {
filter: alpha(opacity=10);
-moz-opacity:0.1;
opacity: 0.1;
}
.plurk_box:hover {
filter: alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}
另外你也可以看看,
我另一篇新的風格你喜不喜歡:)
http://qqboxy.blogspot.com/2011/08/css-part2.html

匿名 提到...

感謝大大的耐心

我最後用了這樣子↓

.plurk {
filter: alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
.plurk:hover {
filter: alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}
.plurk_box {
filter: alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
.plurk_box:hover {
filter: alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}

BOX會變成不透明的就能看得很清楚了!
謝謝大大解決了我的問題~

新的樣式看起來很清爽!
配上上半部沒什麼圖案,而且是漂亮的天藍色,整個看起來很舒服~

這種的也很棒呢(滾動)