CSS3 - 頂部通知氣泡

-1

如何添加純CSS通知泡下面的例子CSS3 - 頂部通知氣泡

代號CSS

<style> 

.outer{ 
width:103px; 
height:113px; 
display:inline-block; 
padding:5px; 
margin:25px 14px 15px 14px; 
font-size: 14px; 
font-weight:bold; 
color:#8E9FA9; 
text-transform: uppercase; 
border:1px solid #cccece; 
text-align:center; 
background-color:#f8f8f8; 
letter-spacing: -0.06em; 
-webkit-text-shadow: #ffffff 1px 1px; 
moz-text-shadow: #ffffff 1px 1px; 
text-shadow: #ffffff 1px 1px; 
-webkit-border-radius:5px; 
-moz-border-radius:5px; 
border-radius:5px; 
-webkit-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03); 
-moz-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03); 
box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03); 

} 

.outer:hover { 
color:#7D878E !important; 
-webkit-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05); 
-moz-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05); 
box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05); 
} 

a.outer span { 
font-size: 14px; 
display:block; 
padding:86px 0 6px 0; 
background-repeat:no-repeat; 
background-color:#f1f2f3; 
background-position:50% 18px; 
} 

a.outer span:hover {background-position:50% -98px;} 

a.outer.add_user span {background-image:url(icon_big_user_add.png);} 

</style>

代碼HTML

<a href="#" class="outer add_user"> 

<span>Test</span> 

</a>

個結果

enter image description here

問題

如何在框就像這個例子中的頂部添加純CSS通知氣泡。

enter image description here

，你可能會看到有藍色球，顯示數字，如何根據上面的例子中適用該通知的球。〜謝謝

來源

2013-06-19 Reham Fahmy

下的一票！爲什麼..我說錯了什麼！我尋求幫助給我的幫助，而不是投票:( –

因爲SO是一個提出具體問題的地方，而不是有人爲你編寫代碼，你沒有表現出努力嘗試嘗試這一點，這就是爲什麼你已收到downvotes。 – BenM

你之前也問過它！看到這裏http://stackoverflow.com/questions/17199133/css3-box-with-notification-bubble/17199553#17199553 < - 它來自你！但爲什麼呢？ –

看到這個fiddle。

CSS：

.outer { 
    width:103px; 
    height:113px; 
    display:inline-block; 
    padding:5px; 
    margin:25px 14px 15px 14px; 
    font-size: 14px; 
    font-weight:bold; 
    color:#8E9FA9; 
    text-transform: uppercase; 
    border:1px solid #cccece; 
    text-align:center; 
    background-color:#f8f8f8; 
    letter-spacing: -0.06em; 
    -webkit-text-shadow: #ffffff 1px 1px; 
    moz-text-shadow: #ffffff 1px 1px; 
    text-shadow: #ffffff 1px 1px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    -webkit-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03); 
    -moz-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03); 
    box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03); 
} 
.outer:hover { 
    color:#7D878E !important; 
    -webkit-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05); 
    box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05); 
} 
a.outer span { 
    font-size: 14px; 
    display:block; 
    padding:80px 0 6px 0; 
} 

.num_notifs { 
    border-radius: 5px; 
    width: 50%; 
    margin-top: 2px; 
    background: #00b7ea; /* Old browsers */ 
    background: -moz-linear-gradient(top, #00b7ea 0%, #0052bf 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#0052bf)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #00b7ea 0%,#0052bf 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#0052bf',GradientType=0); /* IE6-9 */ 
    text-align: center; 
    color: white; 
    text-decoration: none; 
    font-weight: none; 
}

HTML：

<a href="#" class="outer add_user"> 

    <div class="num_notifs">4319</div> 
<span>Test</span> 

</a>

來源

2013-06-19 21:34:36

CSS3 - 頂部通知氣泡

回答

相關問題