Pasando el rato. Números CSS | Oloblogger Pues sí... a pesar de tener decenas de consultas pendientes, me aburría un poco y me puse a experime...

9 de noviembre de 2012

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
Copy URL

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

follow us in feedly

4 comentarios :

  1. Te gusta complicarte la vida, eh? ;)
    Creo que seguiré con el método de pegar imagen, jeje...

    ResponderEliminar
    Respuestas
    1. Sí, claro. Yo no dije que fuera hacer lo contrario, pero mejor aún un carácter numérico con un font-size enorme ;)

      Eliminar
  2. Muy bueno y bien logrado. Además te vales de los pseudoelementos para no añadir etiquetado extra.

    Me recordó una vieja realización de David Desandro: Curtis Css Typeface

    Un saludo

    ResponderEliminar
    Respuestas
    1. Lo acabo de ver y está muy chulo. Lo malo es que pensaba probar con letras otro día y ahora con eso se me han quitado las ganas :)

      Eliminar