☆噗浪透明CSS - Part2

CSS樣式：
/*噗浪台灣標誌*/ #location { padding-right: 18px; padding-top: 6px; padding-bottom: 6px; background: url(http://i529.photobucket.com/albums/dd333/KururuSocho/misc/Taiwan_Light.png) right no-repeat; } /*背景*/ body, html { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcQSAPA_40NeMEXvnro8zztPEL9dRh-hxZKUpvPpOCb5rDcqMzr9ih478bvf6TXwUvGGQ0B7tynCgLQqQF6D7O50kyPF-iIjGBn9MlsSWNo0wQ9397sUTvxpb_msuSFsVFkJMLrw12lh8/) center top no-repeat; } /*四大格框*/ #plurk-dashboard { margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important; border: 0px !important; background: none !important; } /*四大格*/ div.dash-segment { filter: alpha(opacity=0) !important; -moz-opacity: 0.0 !important; opacity: 0.0 !important; } div.dash-segment:hover { background: white; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; filter: alpha(opacity=100) !important; -moz-opacity: 1.0 !important; opacity: 1.0 !important; } /*登入Bar*/ #top_login { filter: alpha(opacity=0) !important; -moz-opacity: 0.0 !important; opacity: 0.0 !important; } #top_login:hover { filter: alpha(opacity=100) !important; -moz-opacity: 1.0 !important; opacity: 1.0 !important; } /*個人檔案*/ #top_bar { filter: alpha(opacity=0) !important; -moz-opacity: 0.0 !important; opacity: 0.0 !important; } #top_bar:hover { filter: alpha(opacity=100) !important; -moz-opacity: 1.0 !important; opacity: 1.0 !important; } /*個人檔案.編輯.標題*/ .close { background: #2264D6 !important; } /*個人檔案.編輯.邊框*/ .content { border: transparent !important; } .iframe_holder { border: 1px solid #2264D6 !important; } .header { border: 1px solid #2264D6 !important; } /*標題*/ #page_title { color: white !important; } /*噗*/ .plurk_cnt { background: white !important; border-radius: 0px 10px 10px 10px; /*圓角設定*/ -moz-border-radius: 0px 10px 10px 10px; -khtml-border-radius: 0px 10px 10px 10px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; } /*噗.底端*/ .info_box { border-radius: 0px 0px 10px 10px; /*圓角設定*/ -moz-border-radius: 0px 0px 10px 10px; -khtml-border-radius: 0px 0px 10px 10px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; } /*噗.頭像*/ .p_img { border-bottom: none !important; /*去邊框*/ } .p_img img{ border-radius: 5px 0px 0px 5px; /*圓角設定*/ -moz-border-radius: 5px 0px 0px 5px; -khtml-border-radius: 5px 0px 0px 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; } .p_img:hover img{ border-radius: 5px 5px 0px 5px; /*圓角設定*/ -moz-border-radius: 5px 5px 0px 5px; -khtml-border-radius: 5px 5px 0px 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; position: relative; /*位置設定*/ right: 20px; bottom: 20px; width: 40px; height: 40px; } /*噗.個人資料*/ .info_menu { border-radius: 7px; /*圓角設定*/ -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; } /*噗.個人資料.舉報濫用*/ .block { border-radius: 7px; /*圓角設定*/ -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; } /*噗.說*/ .td_qual span span { border-radius: 7px; /*圓角設定*/ -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; } /*噗.影片*/ .video { border-top: 2px solid #DDD !important; /*border-left: 2px solid #DDD !important;*/ border-bottom: 2px solid #DDD !important; border-right: 2px solid #DDD !important; } /*噗.點點點*/ .dots { padding: 5px; } .dots div { color: #fff !important; background-color: transparent !important; border-color: transparent !important; } /*噗.回應數*/ .response_count { padding: 5px; border-radius: 5px; /*圓角設定*/ -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; position: relative; /*位置設定*/ top: 4px; left: 1px; } /*噗.消音*/ .manager a { border-style: dashed; /*框線設定*/ border-width: 1px; border-color: skyblue; border-radius: 5px; /*圓角設定*/ -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; } /*噗.訊息.時間*/ .response_time { border-radius: 0px 10px 10px 0px !important; /*圓角設定*/ -moz-border-radius: 0px 10px 10px 0px !important; -khtml-border-radius: 0px 10px 10px 0px !important; -webkit-border-top-left-radius: 0px !important; -webkit-border-top-right-radius: 10px !important; -webkit-border-bottom-right-radius: 10px !important; -webkit-border-bottom-left-radius: 0px !important; } /*噗.回應.說*/ .q_says { border-radius: 7px; /*圓角設定*/ -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; } /*噗.內容.分隔塊*/ .caption { background: #2264D6 !important; } /*河道*/ #timeline_holder { border-top: none !important; border-bottom: 1px solid #1C5987 !important; background: none !important; } /*河道.日分隔塊*/ .div_inner { width: 1px !important; background-color: transparent !important;*/ border-right: none !important; border-left: none !important; } /*河道.時光棒*/ #bottom_line { background: none !important; } /*河道.時間*/ .morning { background-color: transparent !important; border-bottom: none !important; } /*訊息.按鈕*/ .bottom_line_bg { background: transparent !important; font-weight: bold; } .off_tab { background: transparent !important; } /*底部.搜尋*/ #languge_selector { padding: 15px; } /*底部.框*/ #footer { margin-bottom: 0px !important; filter: alpha(opacity=0) !important; -moz-opacity: 0.0 !important; opacity: 0.0 !important; } #footer:hover { background: white; padding: 15px; border-radius: 15px; /*圓角設定*/ -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; filter: alpha(opacity=100) !important; -moz-opacity: 1.0 !important; opacity: 1.0 !important; }

背景圖片『plurk_background.jpg』請各位自行更換。

噗浪台灣圖示來源：這裡

後記：
這次改的比較不一樣，
河道上的噗沒有隱藏而是顯示的，
時間軸也保留了框線與文字，
這樣應該會比先前改的還要實用些，
比較容易讓人觀看。

本次應該還是僅支援Chrome、Firefox不支援IE，
站長對CSS僅略懂，還不足以對抗IE，
Karma字樣不曉得怎樣消掉...(汗"

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