NombreValorCSS

Prueba de Estilo para claves nombre valor con CSS

by Alejandro Hernández

HTML

<br>
<br>
<span class="keyvalue grey">
    <span class="key"><a href="#">Gremio</a></span><!--no space
 --><span class="value"><a href="#">CONSTRUCCIÓN</a></span>
</span> 
<br>
<span class="keyvalue blue">
    <span class="key"><a href="#">Ente</a></span><!--no space
 --><span class="value"><a href="#">Os.Pe.Con.</a></span>
</span> 
<span class="keyvalue red">
    <span class="key"><a href="#">Empresa</a></span><!--no space
 --><span class="value"><a href="#">Cantalapiedra &amp; García S.R.L.</a></span>
</span>

CSS

body{
    background: #ffe;
}
.keyvalue {
    /*behaviour*/
    white-space:nowrap;
    
    line-height:18px;
    font-size:11px;
}
.value a {
    text-shadow:0 1px 1px rgba(0,0,0,0.25);
}
.value a {
    padding:0 5px 1px 5px;    
    text-decoration:none;
    border: 1px solid;
    border-bottom-right-radius:3px;
    border-top-right-radius:3px;
}

.key a {
    padding:0 5px 1px 5px;
    color:#fff;
    text-decoration:none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border: 1px solid;
    border-bottom-left-radius:3px;
    border-top-left-radius:3px;
}
body {
    font-family:"Arial";
}

.keyvalue.blue .key a {
    background:#469;  
    border-color: #469;  
}
.keyvalue.blue .value a {  
    color:#469;
    border-color: #469;
    background:#ffefd8;
}
.keyvalue.red .key a {
    background:#bf3030;
    border-color: #bf3030;
}
.keyvalue.red .value a {  
    color:#bf3030;
    background:#fbe1ce;
    border-color: #bf3030;
}
.keyvalue.grey .key a
{
    background:#555;  
    border-color: #555;
}
.keyvalue.grey .value a {  
    color:#555;
    border-color: #555;
    background:#eee;
}