crafting a dynamic action bar with html and css
Immerse yourself in the magic of HTML and CSS to transform ordinary action bars into interactive elements. This guide unveils the secrets behind creating engaging and responsive action bars, providing a blend of functionality and stylish design.
Views: 1029
2017
<!doctype html>
lang="en"
charset="UTF-8"
Action Bar
rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"
class="container"
class="action-bar clearfix"
href="#" class="like"
class="glyphicon glyphicon-ok"
class="tooltip"Like
href="#" class="favourite"
class="glyphicon glyphicon-star"
class="tooltip"Favourite
href="#" class="comment"
class="glyphicon glyphicon-comment"
class="tooltip"Comment
href="#" class="share"
class="glyphicon glyphicon-share"
class="tooltip"Share
<!-- end container -->
body {
background: #fff;
font: 16px/1.5em "Open Sans", sans-serif;
}
a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
left: 50%;
margin: -62px 0 0 -100px; /* -(height / 2) & -(width / 2) */
position: absolute;
top: 50%;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
