<div class="container">
  <div class="col">
    <h2 class="titulo">Programación</h2>
    <ul class="skill">
      <li><span class="blueline html"></span><em>HTML</em></li>
      <li><span class="blueline css"></span><em>CSS</em></li>
      <li><span class="blueline php"></span><em>PHP</em></li>
      <li><span class="blueline javascript"></span><em>Javascript</em></li> 
      <li><span class="blueline jquery"></span><em>jQuery</em></li>
    </ul>
  </div>
  	<div class="col">
    <h2 class="plataformas titulo">Plataformas</h2>
    <ul class="skill">
      <li><span class="greenline wordpress"></span><em>Wordpress</em></li>
      <li><span class="greenline prestashop"></span><em>Prestashop</em></li>
      <li><span class="greenline joomla"></span><em>Joomla</em></li>
      <li><span class="greenline blogger"></span><em>Blogger</em></li>
      <li><span class="greenline drupal"></span><em>Drupal</em></li>
    </ul>
  </div>
  	<div class="col">
    <h2 class="programas titulo">Programas</h2>
    <ul class="skill">
      <li><span class="redline dreamweaver"></span><em>Dreamweaver</em></li>
      <li><span class="redline illustrator"></span><em>Illustrator</em></li>
      <li><span class="redline photoshop"></span><em>Photoshop</em></li>
      <li><span class="redline premiere"></span><em>Premiere</em></li>
      <li><span class="redline flash"></span><em>Flash</em></li>
    </ul>
  </div>
</div>
<!-- idea original en: http://www.alessioatzeni.com/blog/css3-skill-bar-animation/ -->
* {margin: 0; padding: 0; outline: none;}

body {
	background: #121212;
	font: 12px normal Arial;
  font-family: "Raleway",Arial,Helvetica,sans-serif;
	color:#fff;
}
h2 {
	font-size: 2.7em;
  font-weight: normal;
	padding: 10px 0 16px 0;
  margin: 0 0 30px;
	text-align:center;
	color:#2187e7;
  text-shadow: 1px 1px 5px #000, 0 0 10px #2187e7, 0 0 20px #2187e7;
  background:#000;
	border-radius:2px;
	border: 1px solid #2187e7;  
  box-shadow: 0px 0px 50px -8px #2187e7;
}
h2.plataformas {
  border: 1px solid #9ACD32;  
  box-shadow: 0px 0px 50px -8px #9ACD32;
  color: #9ACD32;
  text-shadow: 1px 1px 5px #000, 0 0 10px #9ACD32, 0 0 20px #9ACD32;
}

h2.programas {
  border: 1px solid #FF4500;  
  box-shadow: 0px 0px 50px -8px #FF4500;
  color: #FF4500;
  text-shadow: 1px 1px 5px #000, 0 0 10px #FF4500, 0 0 20px #FF4500;
}
 
.container {
	width: 90%;
  padding:5%;
	margin: 0 auto; 
	overflow: hidden;
}

.col {
	width: 23%;
  margin: 0 5%;
  position: relative;
  float: left;
  font-size: 12px;
  line-height: 2em;
  padding: 5% 0;
} 
/*.col { width:101%; }*/
.skill { 
	list-style:none; 
	padding-top:30px;
}

.skill li { 
	margin-bottom:70px; 
	background:#030303; 
	height:6px; 
	border-radius:3px; 
	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; 
  font-style: normal;
  font-size: 14px;
  text-align: center;
  color:#dedede;
	top:-28px;
}

.blueline { 
	height: 3px; 
	margin: 2px 0; 
	background: #2187e7; 
	position: absolute;
	box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.6);
}
.greenline { 
	height: 3px; 
	margin: 2px 0; 
	background: #9ACD32; 
	position: absolute;
	box-shadow: 0px 0px 10px 1px rgba(173, 255, 47,0.4);
}
.redline { 
	height: 3px; 
	margin: 2px 0; 
	background: #FF4500; 
	position: absolute;
	box-shadow: 0px 0px 10px 1px rgba(255, 69, 0,0.4);
}

.titulo      { opacity:1;  animation:titulo 5s ease-out;     }

/*programacion*/
.html        { width:90%;  animation:html 2s ease-out;       }
.css         { width:95%;  animation:css 2s ease-out;        }
.php         { width:70%;  animation:php 2s ease-out;        }
.javascript  { width:50%;  animation:javascript 2s ease-out; }
.jquery      { width:30%;  animation:jquery 2s ease-out;     }

/*plataformas*/
.wordpress   { width:80%;  animation:wordpress 2s ease-out;  }
.prestashop  { width:60%;  animation:prestashop 2s ease-out; }
.joomla      { width:40%;  animation:joomla 2s ease-out;     }
.blogger     { width:70%;  animation:blogger 2s ease-out;    }
.drupal      { width:20%;  animation:drupal 2s ease-out;     }

/*programas*/
.dreamweaver { width:90%;  animation:dreamweaver 2s ease-out;}
.illustrator { width:30%;  animation:illustrator 2s ease-out;}
.photoshop   { width:70%;  animation:photoshop 2s ease-out;  }
.premiere    { width:50%;  animation:premiere 2s ease-out;   }
.flash       { width:60%;  animation:flash 2s ease-out;      }


@keyframes titulo      { 0% { opacity:0; } 100% { opacity:1; }  }

/*programacion*/
@keyframes html        { 0% { width:0px; } 100% { width:90%; }  }
@keyframes css         { 0% { width:0px; } 100% { width:95%; }  }
@keyframes php         { 0% { width:0px; } 100% { width:70%; }  }
@keyframes javascript  { 0% { width:0px; } 100% { width:50%; }  }
@keyframes jquery      { 0% { width:0px; } 100% { width:30%; }  }

/*plataformas*/
@keyframes wordpress   { 0% { width:0px; } 100% { width:80%; }  }
@keyframes prestashop  { 0% { width:0px; } 100% { width:60%; }  }
@keyframes joomla      { 0% { width:0px; } 100% { width:40%; }  }
@keyframes blogger     { 0% { width:0px; } 100% { width:70%; }  }
@keyframes drupal      { 0% { width:0px; } 100% { width:20%; }  }

/*programas*/
@keyframes dreamweaver { 0% { width:0px; } 100% { width:90%; }  }
@keyframes illustrator { 0% { width:0px; } 100% { width:30%; }  }
@keyframes photoshop   { 0% { width:0px; } 100% { width:70%; }  }
@keyframes premiere    { 0% { width:0px; } 100% { width:50%; }  }
@keyframes flash       { 0% { width:0px; } 100% { width:60%; }  }

/*media queries*/
@media (max-width: 1200px){
  h2 {font-size:2.2em;}
}
@media (max-width: 980px){
  h2 {font-size:1.8em;}
}
@media (max-width: 767px){
  h2 {font-size:1.4em;}
}
@media (max-width: 580px){
  h2 {font-size:1.1em; padding:10px 0;}
}
@media (max-width: 480px){ 
  h2 {font-size:2.2em; padding: 10px 0 15px 0;}
  .col {width: 90%;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.