QQBoxy - 酷酷方盒子: ☆噗浪透明CSS

2011年7月28日星期四

☆噗浪透明CSS - Part1

/*背景*/
body, html {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcQSAPA_40NeMEXvnro8zztPEL9dRh-hxZKUpvPpOCb5rDcqMzr9ih478bvf6TXwUvGGQ0B7tynCgLQqQF6D7O50kyPF-iIjGBn9MlsSWNo0wQ9397sUTvxpb_msuSFsVFkJMLrw12lh8/) center top no-repeat;
}
/*發噗框*/
#plurk_form {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#plurk_form:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*發噗框上的搜尋*/
#toggle_tab {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#toggle_tab:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*四大格框*/
#plurk-dashboard {
    margin-top: 0px; margin-bottom: 0px;
    padding:0px;
    border:0px ;
    background:none;
}
/*四大格*/
div.dash-segment {
    filter: alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity: 0 !important;
}
div.dash-segment:hover {
    background: white;
    filter: alpha(opacity=80) !important;
    -moz-opacity:0.8 !important;
    opacity: 0.8 !important;
}
/*底排連結*/
#footer {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#footer:hover {
    background: white !important;
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*訊息切換欄*/
#filter_tab {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#footer:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*河道主框*/
#timeline_holder {
    background: none;
    border-top:0px solid #000; 
    border-bottom:0px solid #000; 
    border-left:0;
    margin:0;
}
/*河道框*/
#timeline_cnt {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#timeline_cnt:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*河道時間列*/
#timeline_bg {
    filter: alpha(opacity=0);
    -moz-opacity:0.0;
    opacity: 0.0;
}
#timeline_bg:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*河道分隔線*/
#bottom_line {
    background:none;
    border:0;
}
/*河道動物*/
#dynamic_logo {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#dynamic_logo:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*河道垂直分隔線*/
.block_cnt day_start {
    filter: alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity: 0 !important;
}
/*頂排*/
#top_login {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#top_login:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*幾則新回應*/
#updater {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#updater:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*向右按鈕*/
.browse_button {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
.browse_button:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*個人檔案*/
#top_bar {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
#top_bar:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
/*噗*/
.plurk {
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
}
.plurk:hover {
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}

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

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

注意：
我只在Chrome上測試，
IE6並不支援...

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

7 則留言:

匿名提到...: 不好意思請問一下
關於河道上的噗的透明化，滑鼠上去之後就會變的不透明

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

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

不知道大大能幫幫忙嗎?

感謝; 2011年8月23日凌晨2:37
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;
}; 2011年8月23日上午11:59
匿名提到...: 啊先謝謝大大!

但不是背景圖ˋˋ

應該是這個控制的

/*噗*/
.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; 2011年8月23日下午4:09
QQBoxy 提到...: 你直接把/*噗*/以下的內容都砍掉，
或是把內容取代為：

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

看看是不是你想要的0w0; 2011年8月23日晚上10:53
匿名提到...: 但我還是希望他有本來是透明的，滑鼠移上去之後才變成不透明的(一個噗包含下面的回文同時變成不透明的)

謝謝你~~~~; 2011年8月23日晚上11:01
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; 2011年8月24日下午5:30
匿名提到...: 感謝大大的耐心

我最後用了這樣子↓

.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會變成不透明的就能看得很清楚了!
謝謝大大解決了我的問題~

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

這種的也很棒呢(滾動); 2011年8月26日下午4:02

張貼留言

網頁

2011年7月28日 星期四

☆噗浪透明CSS - Part1

7 則留言:

2011年7月28日星期四