Jay Taylor's notes

back to listing index

iPhone Notification Badge CSS - JSFiddle

[web search]
Original source (jsfiddle.net)
Tags: design css ios-badge web-programming jsfiddle.net
Clipped on: 2014-01-16

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor

Frameworks & Extensions

Fiddle Options

Normalized CSS

Body tag

DTD

Framework <script> attribute

External Resources

Languages

Results

Ajax Requests

Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML.

Please read API documentation and follow examples.

Legal, Credits and Links

Created and maintained by Piotr and Oskar.

Hosted by DigitalOcean.

Special thanks to MooTools community.

License

All code belongs to the poster and no license is enforced.

JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.

Links

Please read the documentation.

For updates please follow our blog, tweets or become a fan.

JSFiddle Job Board: ?Keyboard shortcuts
HTML 
<div class="badge">1</div>
1
<div class="badge">1</div>
2
<div class="badge">2</div>
3
<div class="badge">3</div>
4
<div class="badge">44</div>
5
<div class="badge">55</div>
6
<div class="badge">666</div>
7
<div class="badge">777</div>
8
<div class="badge">8888</div>
9
<div class="badge">9999</div>
10
 
11
 
12
13
14
 
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
29
 
30
 
31
 
32
33
34
 
 
JavaScript 
 
1
 
 
 
CSS 
.badge {
1
.badge {
2
    background:             radial-gradient( 1px -11px, circle, white 8%, red 26px );
3
        background:    -moz-radial-gradient( 1px -11px, circle, white 8%, red 26px );
4
        background:     -ms-radial-gradient( 1px -11px, circle, white 8%, red 26px );
5
        background:      -o-radial-gradient( 1px -11px, circle, white 8%, red 26px );
6
        background: -webkit-radial-gradient( 1px -11px, circle, white 8%, red 26px );
7
    background-color: red;
8
    border: 2px solid white;
9
    border-radius: 12px;
10
    box-shadow: 1px 1px 1px black;
11
    color: white;
12
    font: bold 12px/9px Helvetica, Verdana, Tahoma;
13
    height: 12px;
14
    padding: 2px 3px 0 3px;
15
    text-align: center;
16
    min-width: 8px;
17
}
18
 
19
/* only needed for this sample */
20
.badge {
21
    float: left;
22
    left: 25px;
23
    margin-right: 10px;
24
    position: relative;
25
}
26
 
 
 
thinkingstiff.com
1
2
3
44
55
666
777
8888
9999
Result