Vamos a construir un notificador de elementos “no atendidos” es decir, el badge (badge icon) que se muestra en muchas aplicaciones web sobre una enlace de una funcionalidad para denotar que hay nuevos elementos en su interior, esta funcionalidad es muy útil cuando necesitamos conocer cuantos elementos “nuevos” o “sin atender” tenemos, ejemplos de esta funcionalidad las encontramos en el correo electrónico en los links de acceso al Inbox, o en aplicaciones como el what’sApp donde nos notifican que han llegado x cantidad de mensajes. Vamos a construir esta funcionalidad para interfaces web utilizando sólo CSS.

 

El Estilo CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.notification-unread:hover {
background-color: #953b39;
text-decoration: none;
cursor: pointer;
}

.notification-unread {
padding: 1px 4px 0px;
font-size: 10px;
font-weight: bold;
white-space: nowrap;
color: #ffffff;
background-color: #b94a48;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
top: -10px;
}

 

El HTML

1
<a>Mensajes<span class="notification-unread">+99</span></a>

 

 

¡Pruebalo! ¡Pruebalo!

 

 

 Te Puede Interesar:

Aplica un efecto de cortina a tus imágenes con CSS

Construye un Image Slider solo con CSS

Aplaza la carga de tu Javascript

(Visited 186 times, 1 visits today)