喜歡浪上的噗帶有透明感,或是希望隱藏版面資訊,讓底圖完整呈現的進階使用語法,看過來~

[原噗版]

shinning tail

shinning tail 

安裝網址: http://www.plurk.com/installDesign/5143441-97c5078c33

 

有噗友回應說,希望下方主控台的資訊可以隱藏起來,所以我修正了一段語法,更改後的樣貌如下:

shinning tail (主控台資訊隱藏版)

shinning tail (主控台資訊隱藏版)

安裝網址: http://www.plurk.com/installDesign/5143441-02ff1cf130

 

改過的語法是:

/*資料面板: 透明度變化*/
div#plurk-dashboard { 
filter:alpha(opacity=0) !important;   (先將主控台資訊隱藏起來,透明度設"0")
-moz-opacity:0!important;
opacity: 0!important;

zoom:1;
}
div#plurk-dashboard:hover {
filter:alpha(opacity=80) !important;  (滑鼠移過去,讓主控台資訊顯現出來,透明度設"80,0.8,0.8")
-moz-opacity:0.8!important;
opacity: 0.8!important;
zoom:1;
}

如果希望整個畫面像電腦桌布一樣,讓底圖完整呈現,則需要將浪上的噗也都隱藏起來,像這個噗版:

Maple

Maple

安裝網址: http://www.plurk.com/installDesign/5143441-d953fecefa

 

除了隱藏主控台的語法外,再加上下面這段:

/*隱藏與展開浪上的噗*/
#timeline_cnt {
filter:alpha(opacity=10);   (將浪上的噗隱藏起來,透明度設"10",讓它若隱若現)
-moz-opacity:0.1;
opacity:0.1;

zoom:1;
}
#timeline_cnt:hover{    
filter:alpha(opacity=100);   (滑鼠移過去,浪上的噗就會清楚顯現,設"100,1,1")
-moz-opacity:1;
opacity:1;

zoom:1;
}

 

那麼,希望浪上的噗本身,以及展開後,都能有透明感的呈現呢?加上一段語法就可以囉~

/*噗整體透明度*/
.plurk_cnt,                   
.plurk_box .caption,     
.plurk_box .list,            
.plurk_box .mini_form,  
.info_box,                     
td.td_cnt texture,          
textarea#input_small {
filter: alpha(opacity=90); opacity:0.9; -moz-opacity:0.9; zoom:1;  (通常設"90,0.9,0.9"或"80,0.8,0.8",太透明的話文字會看不清楚喔)
}

 

透明度的語法可以應用在很多地方,像是讓頁尾的語言和噗浪選單先藏起來,滑鼠移過去再顯現,或是將時間軸底線藏起來、主控台發噗鍵入文字區先隱藏起來滑鼠移過去再顯現等,都可以試試看喔~ 關於噗浪各個部份的語法可以參考  噗浪CSS基本 這篇

陸續我會將各個部份的語法解析和應用方式再發文跟大家分享 ^ _ ^

 

有任何問題,歡迎發私噗給我,或是在此部落格留言

我的噗浪:http://www.plurk.com/66660000

arrow
arrow
    全站熱搜

    M6 發表在 痞客邦 留言(90) 人氣()