Crear barras de habilidades planas con CSS puro

Vista prévia

Descripción

En este post vamos a crear barras de progreso de estilo plano para presentar sus habilidades & experiencias mediante el uso de CSS puro. Creado & liberado por < a href = "https://codepen.io/StoyPenny/pen/fgCau" target = "_ blank" rel = "noopener" > StoyPenn .

Funcionamiento

Cree el código HTML para las barras de aptitudes. Utilice la clase CSS ' value-* ' para especificar el porcentaje.

<div class="contentContainer">

<div class="progressBar">


<h4>HTML5</h4>


<div class="progressBarContainer">



<div class="progressBarValue value-90"></div>


</div>

</div>

<div class="progressBar">


<h4>CSS3</h4>


<div class="progressBarContainer">



<div class="progressBarValue value-80"></div>


</div>

</div>

<div class="progressBar">


<h4>Jquery</h4>


<div class="progressBarContainer">



<div class="progressBarValue value-30"></div>


</div>

</div>

<div class="progressBar">


<h4>WordPress</h4>


<div class="progressBarContainer">



<div class="progressBarValue value-70"></div>


</div>

</div>
</div>

El CSS para renderizar las barras de habilidad en los elementos DIV.

.contentContainer {

background: #efefef;

padding: 20px;

max-width: 350px;

min-width: 150px;

margin: 15vh auto;

border-radius: 10px;

border: solid 5px #dbdbdb;
}

/*///////////////////////////////////////////////////////


// Progress Bars \\
 ///////////////////////////////////////////////////////*/

.progressBar {

margin-bottom: 26px;

margin-bottom: 1.66em;
}

.progressBar h4 {

font-size: 21px;

font-size: 1.33em;

text-transform: none;

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

margin-bottom: 7px;

margin-bottom: .33em;
}

.progressBarContainer {

width: 100%;

max-width: 350px;

height: 26px;

height: 1.66em;

background: #e6eae3;

background: rgba(8,102,220,.2);

overflow: hidden;

border-radius: 5px;
}

.progressBarValue {

height: 1.66em;

float: left;

background: #0866dc;

background: rgba(8,102,220,.75);
}

.value-00 { width: 0; }

.value-10 { width: 10%; }

.value-20 { width: 20%; }

.value-30 { width: 30%; }

.value-40 { width: 40%; }

.value-50 { width: 50%; }

.value-60 { width: 60%; }

.value-70 { width: 70%; }

.value-80 { width: 80%; }

.value-90 { width: 90%; }

.value-100 { width: 100%; }