Skill Bar


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Skill Bar Animation</title>
<style type="text/css">
body {
background-color: gray;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
color:#fff;
}

* {margin: 0; padding: 0; outline: none;}


.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

.content{
width:278px;
margin:0;
position:relative;
float:left;
font-size:12px;
line-height:2em;
padding:30px 0 30px;
}
.col { width:280px; }

#skill {
list-style:none;
padding-top:30px;
}

#skill li {
margin-bottom:70px;
background:#000;
height:20px;
border-left:1px solid #111;
border-top:1px solid #111;
border-right:1px solid #333;
border-bottom:1px solid #333;
}

#skill li em {
position:relative;
top:-30px;
}

.expand {
height:20px;
background:#ffb400;
border: none;
position:absolute;
/*box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);*/
}

.html5 { width:70%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:90%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { width:50%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.photoshop { width:10%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }

@-moz-keyframes html5 { 0% { width:0px;} 100%{ width:70%;} }
@-moz-keyframes css3 { 0% { width:0px;} 100%{ width:90%;} }
@-moz-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:10%;} }
@-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }

@-webkit-keyframes html5 { 0% { width:0px;} 100%{ width:70%;} }
@-webkit-keyframes css3 { 0% { width:0px;} 100%{ width:90%;} }
@-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes photoshop { 0% { width:0px;} 100%{ width:10%;} }
@-webkit-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }

</style>

</head>
<body>

<div class="container">
<div class="content">
<div class="col">
<ul id="skill">
<li><span class="expand html5"></span><em>HTML 5</em></li>
<li><span class="expand css3"></span><em>CSS 3</em></li>
<li><span class="expand jquery"></span><em>jQuery</em></li>
<li><span class="expand photoshop"></span><em>Photoshop</em></li>
<li><span class="expand dreamweaver"></span><em>Dreamweaver</em></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Call Desktop

 <div class="phone_lefts-side glow" data-target="html">     <a title="Contact Us" href="tel:+91 "><i class="fa fa-phone"></i></a> </div> /*Call Me*/ .phone_lefts-side{position:relative;} .phone_lefts-side a{ position: fixed;    bottom: 50px;    color:white;    background-color:#03a84e;   animation: topBottom 4s infinite;    z-index: 11111;    left: 20px;    background-color: #0000ff;    color: white;    padding: 11px 16px;    border-radius: 50%;    font-size: 20px;    animation: bounce 4s infinite alternate;} .glow {  font-size: 80px;  color: #fff;  text-align: center;  -webkit-animation: glow 1s ease-in-out infinite alternate;  -moz-animation: glow 1s ease-in-out infinite alternate;  animation: glow 1s ease-in-out infinite alternate;} @-webkit-keyframes glow { from {text-shadow: 0 0 10px ...
Read more

Right click disable

 <body class="tg-home" onLoad="disableClick()" oncontextmenu="return false"> //hide code// document.onkeydown = function(e) {     if(e.keyCode == 123) {      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){      return false;     }        }  ///F12//  //------------------------------ function unloadJS(scriptName) {   var head = document.getElementsByTagName('head').item(0);   var js = document.getElementById(sc...
Read more

soft button

Image
<!DOCTYPE html> <html> <head> <title>Soft Button</title> </head> <body> <a href="#"><span>Button</span></a> </body> </html> <style type="text/css"> *{ margin: 0px; padding: 0px; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f2f3f7; } a{ position: relative; display: inline-block; padding: 10px 30px; text-decoration: none; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; color: #5a84a2; font-size: 18px; border-radius: 40px; box-shadow: -2px -2px 8px rgba(255,255,255,1), -2px -2px 12px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0,0,0,0.15); } a:hover{ box-shadow: inset -2px -2px 8px rgba(255,255,255,1), inset -2px -2px 12px rgba(255,255,255,0.5), inset 2...
Read more