Hello Readers!
We web designer can give new look and feel to any content of the div, We have numerous style, effects and animation including keframes which will result to get a graceful ambience to the content, Here in this blog i used same effects which make it more fasinating and eye-catchy too...
Here in this blog i used attribute "data-bubble" for describing the badges of the blocks and making it animated when user visited the particular content of the div. Its make animation using this "@-webkit-keyframes bubbleover" keyframe name.
Source code:
<!DOCTYPE html>
<html>
<head>
<body>
<h1>Hop Over Notification Badge</h1>
<ul class="menu">
<li><a href="#" data-bubble="117">Messages</a></li>
<li><a href="#" data-bubble="4">New Posts</a></li>
<li><a href="#" data-bubble="19">Notifications</a></li>
<li><a class="gold" href="#" data-bubble="1">Hidden Coins</a></li>
</ul>
</body>
</html>
<style>
*, *:before, *:after {box-sizing:border-box}
html {
margin:0 auto;
padding:1em 2em;
font:normal 100%/1.5 'Helvetica Neue','Segoe UI', Arial, sans-serif;
color:#000;
background:#aee;
height:100%
}
h1 {
font-size:2em;
margin-bottom:1em;
}
.menu {
display:inline-block;
margin:0 -.5em 1.5em;
box-shadow:0.12em 0.12em 0 rgba(40,40,40,.2);
list-style-type:none;
padding:0;
margin:0;
font-size:1em;
margin-bottom:1.5em;
}
.menu li {
float:left;
border-left:0.063em solid #a6c6cd;
border-right:0.063em solid #6ca1ac;
}
.menu a {
display:block;
padding:0 1em;
line-height:2.5em;
position:relative;
font-weight:bold;
text-decoration:none;
color:#000;
background-color:#ede;
text-shadow:0 0.063em 0 #a6c6cd;
}
.menu a:hover, .menu a:active, .menu a:focus {
color:#eee;
text-shadow:0.063em 0.063em 0 #547177;
}
.menu a[data-bubble]:after {
content:attr(data-bubble);
position:absolute;
top:0;
right:0.5em;
height:1.5em;
line-height:1.5em;
padding:0 .46em;
text-align:center;
text-shadow:0 0.063em 0 rgba(0,0,0,.2);
background-color:red;
color:#364652;
box-shadow:0 0.063em 0.063em rgba(0,0,0,.2);
border-radius:4em;
z-index:-1;
-webkit-transform: translateZ(0);/*Prevents text flicker*/
will-change: transform;
}
a.gold[data-bubble]:after {
background-color:gold;
}
.menu a:hover[data-bubble]:after, .menu a:active[data-bubble]:after, .menu a:focus[data-bubble]:after {
-webkit-animation:ease bubbleover .4s;
animation:ease bubbleover .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
top:-1.25em; /* If pseudo animation not supported [see http://css-tricks.com/transitions-and-animations-on-css-generated-content/], simple hover fallback happens*/
z-index:1;
}
@-webkit-keyframes bubbleover {
0% {
-webkit-transform:translate(0, 1em);
z-index:-1
}
50% {
-webkit-transform:translate(0, -.5em);
z-index:-1
}
100% {
-webkit-transform:translate(0, 0);
z-index:1;
}
}
@keyframes bubbleover {
0% {
top:0;
transform:translate(0, 0);
z-index:-1;
}
50% {
transform:translate(0, -12px);
z-index:-1
}
100% {
transform:translate(0, 6px);
z-index:1;
}
}
</style>
Note:-Download this file for getting output.
0 Comment(s)