Pasando el rato. Números CSS

Pues sí... a pesar de tener decenas de consultas pendientes, me aburría un poco y me puse a experimentar que es lo que realmente me gusta.

Hoy tocó dibujar formas simples CSS. Un cuadrado me llevó a un rectángulo, este a probar si podía hacer un uno, el uno al dos... y así hasta la colección completa de dígitos (en base 10, claro).

Realmente no tiene mucha historia la cosa, pues casi todos los dígitos se pueden hacer a partir de una forma básica de anillo achatado que se consigue con un borde muy ancho y un fondo transparente al que se le añade un border-radius.

Luego es cuestión de quitarle uno o varios lados haciéndolos también transparentes. Por último y para lo que falte, se añade lo que sea con un :before.

Este sería el anillo de marras:

.anillo {
width: 20px;
height: 30px;
border: 20px solid #c00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

Y este otro uno al que le hemos quitado el lado izquierdo (agrandamos el ancho para salvar el box-model):

.anillo2 {
width: 40px;
height: 30px;
border: 20px solid #c00;
border-left: 0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

Cuando incorporamos un segundo elemento, necesitamos posicionarlo absolutamente con respecto a la caja padre para poder ubicarlo exactamente dónde queramos, así que esta deberá llevar un position:relative;.

.cero {
width: 20px;
height: 100px;
border: 20px solid #c00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: transparent
}

.uno {
position: relative;
margin-left: 15px;
width: 20px;
height: 140px;
background: #c00
}
.uno:before {
content: "";
position: absolute;
top: 0;
left: -15px;
width: 20px;
height: 20px;
-moz-border-radius: 20px 0 0;
-webkit-border-radius: 20px 0 0;
border-radius: 20px 0 0;
background: #c00
}

.dos {
position: relative;
width: 40px;
height: 50px;
border: 20px solid #c00;
border-right: 0;
-moz-border-radius: 20px 0 20px 20px;
-webkit-border-radius: 20px 0 20px 20px;
border-radius: 20px 0 20px 20px;
margin-top: 50px;
background: transparent
}

.dos:before {
position: absolute;
content: "";
top: -70px;
left: -20px;
width: 40px;
height: 50px;
border: 20px solid #c00;
border-left: 0;
border-bottom: 0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px
}

.tres {
position: relative;
width: 40px;
height: 50px;
border: 20px solid #c00;
border-left: 0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: transparent
}

.tres:before {
position: absolute;
content: "";
top: -70px;
width: 40px;
height: 50px;
border: 20px solid #c00;
border-left: 0;
border-bottom: 0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px
}

.cuatro {
position: relative;
width: 20px;
height: 70px;
margin-left: 40px;
margin-top: 70px;
background: #c00
}

.cuatro:before {
position: absolute;
content: "";
top: -70px;
left: -40px;
width: 20px;
height: 60px;
border: 20px solid #c00;
border-top: 0;
-moz-border-radius: 20px 20px 0;
-webkit-border-radius: 20px 20px 0;
border-radius: 20px 20px 0
}

.cinco {
position: relative;
width: 40px;
height: 50px;
border: 20px solid #c00;
border-left: 0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin-top: 50px;
background: transparent
}

.cinco:before {
position: absolute;
content: "";
top: -70px;
left: 0;
width: 40px;
height: 50px;
border: 20px solid #c00;
border-right: 0;
border-bottom: 0;
-moz-border-radius: 20px 20px 0 0;
-webkit-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0
}

.seis {
position: relative;
width: 20px;
height: 50px;
border: 20px solid #c00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin-top: 50px;
background: transparent
}

.seis:before {
position: absolute;
content: "";
top: -70px;
left: -20px;
width: 40px;
height: 50px;
border: 20px solid #c00;
border-right: 0;
border-bottom: 0;
-moz-border-radius: 20px 20px 0 0;
-webkit-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0
}

.siete {
position: relative;
width: 20px;
height: 140px;
margin-left: 30px;
background: #c00
}

.siete:before {
content: "";
position: absolute;
top: 0;
left: -30px;
width: 40px;
height: 20px;
-moz-border-radius: 20px 0 0;
-webkit-border-radius: 20px 0 0;
border-radius: 20px 0 0;
background: #c00
}

.ocho {
position: relative;
width: 20px;
height: 50px;
border: 20px solid #c00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin-top: 50px;
background: transparent
}

.ocho:before {
position: absolute;
content: "";
top: -70px;
left: -20px;
width: 20px;
height: 30px;
border: 20px solid #c00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px
}

.nueve {
position: relative;
width: 20px;
height: 70px;
margin-top: 70px;
margin-left: 40px;
background: #c00
}

.nueve:before {
position: absolute;
content: "";
top: -70px;
left: -40px;
width: 20px;
height: 30px;
border: 20px solid #c00;
-moz-border-radius: 20px 20px 0;
-webkit-border-radius: 20px 20px 0;
border-radius: 20px 20px 0
}

Y a continuación todos juntos. También en este Dabblet para que podáis juguetear.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter