Now a days I go to
dribble and see the amazing designs created by users. From their I get amazing ideas and today I ll share my HTML5 and CSS3 coded Admin panel with you all.
This tutorial will consist with :-
Here's the final output of our template:
Menu bar code is simple,
li list with a drop down in it. We will be using
box-shadow to give the gradient effect.
[html]
<ul id="admin-bar">
<li title="Home">H</li>
<li title="Users">A</li>
<li title="Add New Post">D</li>
<li title="Settings">G</li>
<li title="Videos">V</li>
<li title="Stats" class="active">v</li>
<li title="More">d
<ul id="drop-down">
<li title="Media Gallery">m<span>Media Gallery</span></li>
<li title="Comments">b<span>Comments</span></li>
<li title="Plugins">C<span>Plugins</span></li>
</ul>
</li>
</ul>
[/html]
Like my
previous CSS3 tutorials here also I ll be using fonts instead of images to show the correct icons in menu.
[css]
#menu{
position:fixed;
top:0;
left:0;
width:100%;
background-color: #151515;
background-size: 6px 6px;
border-radius: 2px;
box-shadow: 0 25px 0 0 rgba(255, 255, 255, 0.15) inset;
height: 50px;
z-index: 1;
}
#admin-bar {
float: left;
margin: 0 auto;
padding: 0;
position: relative;
}
#admin-bar li {
color: #FFFFFF;
cursor: default;
display: inline;
float: left;
font-family: icons;
font-size: 25px;
list-style-type: none;
padding: 7px 10px 14px;
position: relative;
}
#admin-bar li:hover, .active{
text-shadow:0 0 5px #fff;
background:-moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626));
}
#admin-bar li ul {
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
transition: all 1s ease 0s;
background: -moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626)); /* Chrome,Safari4+ */
border-radius: 0 0 10px 10px;
display: block;
height: 0;
left: 0;
margin: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 50px;
width: 135px;
}
#admin-bar li:hover ul{
height:auto;
overflow:visible;
opacity:1;
}
#drop-down li {
display: block;
float: none;
background-image:url(divider.png);
background-repeat:no-repeat;
}
#drop-down li:hover{
background: -moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
}
#drop-down li:last-child {
border-radius: 0 0 10px 10px;
}
[/css]
To show the menu gradient I am using
box-shadow: 0 25px 0 0 rgba(255, 255, 255, 0.15) inset; and for drop down menu the logic is really simple. By default
overflow to be set as
hidden,
opacity as 0 and
height to 0 and on mouse hover we change these values as visible, 1, auto.
The icons are not images but fonts. And using
text-shadow they appear to glow on mouse hover.
Search BoxIts really simple if you have knowledge in CSS3 gradients. A textbox with black blackground color and CSS3 gradient effect to change the looks.
[html]
<input type="text" placeholder="Search" id="df">
[/html]
[css]
input[type="text"] {
background: -moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626)); /* Chrome,Safari4+ */
border: 1px solid #000000;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 rgba(0, 0, 0, 0.5) inset;
color: #FFFFFF;
float: left;
font-size: 11px;
height: 26px;
padding-left: 10px;
padding-right: 65px;
text-shadow: 0 0 3px #FFFFFF;
width: 130px;
margin-left: 50px;
margin-top: 10px;
}
input[type="text"]:hover, input[type="text"]:active{
background:#1B1B1B;
}
[/css]
Log out ButtonUsing the search box idea here also we will make use of CSS3 gradients.
[html]
<input type="submit" id="logout" value="Logout" />
[/html]
[css]
#logout {
background: -moz-linear-gradient(center top , #CD2525 0%, #B11B1C 50%, #940F10 50%, #861213 100%) repeat scroll 0 0 #CD2525;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CD2525), color-stop(50%,#B11B1C), color-stop(50%,#940F10), color-stop(100%,#861213)); /* Chrome,Safari4+ */
border-radius: 3px;
color: #FFFFFF;
float: right;
font-family: arial;
font-size: 14px;
margin: 12px;
padding: 5px 15px;
text-decoration: none;
border:0px;
}
#logout:active{
background:#861213;
}
[/css]
Animated GraphsThe logic to design the graph is really simple, make 6-7
div's with same height and width. The height should be longer and width to be thin so that it looks like a standing pole. Then with the help of simple
CSS3 gradients and CSS3 animations we have the make it animated so that it looks like animated bar graph.
[html]
<div id="graph">
<div class="progress">
<div style="height: 40%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Monday</p>
</div>
<div class="progress">
<div style="height: 70%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Tuesday</p>
</div>
<div class="progress">
<div style="height: 72%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Wednesday</p>
</div>
<div class="progress">
<div style="height: 80%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Thursday</p>
</div>
<div class="progress">
<div style="height: 75%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Friday</p>
</div>
<div class="progress">
<div style="height: 65%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Saturday</p>
</div>
<div class="progress">
<div style="height: 45%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Sunday</p>
</div>
</div>
[/html]
To show the tooltip we are using the same logic as drop down menu. Here the tooltip is the class
stats-info. On hover we are changing the opacity to give the fade in effect with the help of
css3 transition effectTo show the graph animation we will be using animation effect and the css3 gradient:
[css]
.bar {
animation: 2s linear 0s normal none infinite progress-bar-stripes;
background-image: -moz-linear-gradient(-134deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@keyframes "progress-bar-stripes" {
from {
background-position: 0 0;
}
to {
background-position: 40px 0;
}
}
[/css]
Tooltip hover effect
[css]
.stats-info {
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
background-image: -moz-linear-gradient(center top, #CD2525 0%, #B11B1C 50%, #940F10 50%, #861213 100%);
background-image: -webkit-linear-gradient(-90deg, #CD2525 0%, #B11B1C 50%, #940F10 50%, #861213 100%);
background-repeat:repeat;
background-color:#CD2525;
border-radius: 5px 5px 5px 5px;
bottom: -45px;
color: #FFFFFF;
left: -18px;
opacity: 0;
padding: 5px;
position: absolute;
font-size: 12px;
}
.bar:hover + .stats-info{
opacity:1;
}
.tooltip {
border-bottom: 10px solid #C02020;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
display: block;
height: 0;
left: 17px;
position: absolute;
top: -9px;
width: 0;
z-index: 1;
}
[/css]
Notification messagesIf you have gone through all the above parts then I am sure you can guess how the notification messages are coded.
By using CSS3 gradients and fonts we can make it.
[html]
<div id="messages">
<div class="error">Error</div>
<div class="notification">Notification</div>
<div class="success">Success</div>
</div>
[/html]
[css]
/* messages */
#messages{
float:left;
}
#messages div{
display:block;
margin:20px;
cursor: pointer;
}
/* Error */
.error {
background-image: -moz-linear-gradient(center top , #CB1634 0%, #C41330 50%, #BC102C 50%, #B70D2A 100%);
background-image: -webkit-linear-gradient(-90deg , #CB1634 0%, #C41330 50%, #BC102C 50%, #B70D2A 100%);
background-color:#CB1634;
background-repeat:repeat;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block;
font-size: 18px;
padding: 5px 30px;
position: relative;
width: 200px;
}
.error:before {
content: "X";
font-family: icons;
left: 4px;
position: absolute;
font-size: 18px;
}
/* Notification */
.notification {
background-image: -moz-linear-gradient(center top , #e4b023 0%, #e0ab1b 50%, #dca512 50%, #d79f08 100%);
background-image: -webkit-linear-gradient(-90deg , #e4b023 0%, #e0ab1b 50%, #dca512 50%, #d79f08 100%);
background-color:#e4b023;
background-repeat:repeat;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block;
font-size: 18px;
padding: 5px 30px;
position: relative;
width: 200px;
}
.notification:before {
content: "l";
font-family: icons;
font-size: 28px;
left: 0;
position: absolute;
top: -1px;
}
/* Success */
.success {
background-image: -moz-linear-gradient(center top , #6da920 0%, #62991b 50%, #558614 50%, #4d7a10 100%);
background-image: -webkit-linear-gradient(-90deg , #6da920 0%, #62991b 50%, #558614 50%, #4d7a10 100%);
background-color:#6da920;
background-repeat:repeat;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block;
font-size: 18px;
padding: 5px 30px;
position: relative;
width: 200px;
}
.success:before {
content: "O";
font-family: icons;
left: 4px;
position: absolute;
}
[/css]
Dialog box[html]
<div id="dialogbox">
<div id="box-header">Are You Sure?<a id="close">X</a></div>
<div id="box-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p style="position: relative; left: 20%; margin: 12px 0pt;">
<a class="yes">Yes</a>
<a class="no">No</a>
</p>
</div>
</div>
[/html]
We are using the div structure to build the dialog box. Again with the help of CSS3 gradients, fonts and other effects we will be making it to look like a Dialog Box.
[css]
/* Modal box */
#dialogbox{
float:left;
width:344px;
padding:5px;
background:rgba(255, 255, 255, 0.2);
border-radius:10px;
}
#box-header {
background-image: -moz-linear-gradient(center top , #D2DEE3 0%, #C7D6DB 50%, #B8CBD1 50%, #BBCDD3 100%);
background-image: -webkit-linear-gradient(-90deg , #D2DEE3 0%, #C7D6DB 50%, #B8CBD1 50%, #BBCDD3 100%);
background-color:#D2DEE3;
background-repeat:repeat;
border-radius: 5px 5px 0 0;
color: #324044;
font-size: 17px;
padding: 15px;
position: relative;
display: block;
cursor: default;
}
#close {
color: #314248;
cursor: pointer;
font-family: icons;
font-size: 26px;
position: absolute;
right: 5px;
top: 10px;
}
/* */
#box-content{
text-align:center;
background:#fff;
color:#7c7c7c;
font-size:13px;
float:left;
padding: 10px 5px;
}
.yes{
background-image: -moz-linear-gradient(center top , #c1e087 0%, #c3e092 50%, #bbdd83 50%, #b7db7a 100%);
background-image: -webkit-linear-gradient(-90deg , #c1e087 0%, #c3e092 50%, #bbdd83 50%, #b7db7a 100%);
background-color:#c1e087;
background-repeat:repeat;
font-size:12px;
padding:10px 35px;
border:1px solid #81aa3c;
border-radius:5px;
margin:2px 5px;
float:left;
cursor:pointer;
}
.yes:hover{
box-shadow: 0 0 5px #a7bc84;
}
.no{
background-image: -moz-linear-gradient(center top , #f6b2b2 0%, #f7bfbf 50%, #f7c1c1 50%, #f5b1b1 100%);
background-image: -webkit-linear-gradient(-90deg , #f6b2b2 0%, #f7bfbf 50%, #f7c1c1 50%, #f5b1b1 100%);
background-repeat:repeat;
background-color:#f6b2b2;
font-size:12px;
padding:10px 35px;
border:1px solid #d38e8e;
color:#582121;
cursor:pointer;
border-radius:5px;
float:left;
margin:2px 5px;
}
.no:hover{
box-shadow: 0 0 5px #B98B8B;
}
[/css]
I hope that with the help of this tutorial you learned a lot, you can use this for free in any of your creative work(don't forget to give me a back-link :P). Tweet, FB Shares and other suggestions are always welcomed at WT.
