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

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

網頁

2011年8月21日星期日

☆噗浪透明CSS - Part2

沒有留言:

張貼留言

網頁

2011年8月21日 星期日

☆噗浪透明CSS - Part2

沒有留言:

張貼留言

2011年8月21日星期日