Rótulos Scrabble CSS

Ahora que el Scrabble, Palabras Cruzadas, Intelect o en su versión más portátil y moderna bautizada como Apalabrados se ha vuelto a poner de moda, quizás quieras usar este estilo para crear algún rótulo en tu sitio o incluso para añadir algún texto largo.

Si es así no tienes más que seguir leyendo y encontrarás una manera muy fácil de hacerlo con CSS, sin imágenes ni scripts añadidos, aunque es cierto que un plugin de jQuery te puede ayudar a hacer menos farragosa la tarea.

La idea es de Codrops -siempre tan creativos con el CSS- y la vi en una de sus últimas entradas que iba de esto, de tipografías web originales. En este otro enlace podéis ver unas cuantas ideas más, pero yo sólo voy a comentar esta porque además de ser sencilla de llevar a término, fue la que más me gustó.

---

Como decía, el montaje de esto no es muy complicado y creo que pocas cosas necesitan explicación. La parte más aburrida es tener que meter individualmente cada letra dentro de un span con una clase determinada (char) y a su vez cada palabra dentro de otra capa también con su propia clase (word).

El HTML tipo sería de esta manera y todos esos span nos permitirán tener un control de todo el texto letra a letra y también si lo queremos, palabra a palabra.

<div class="scrabble">

<span class="word">
<span class="char">P</span>
<span class="char">A</span>
<span class="char">L</span>
<span class="char">1</span>
</span>

<span class="word">
<span class="char">P</span>
<span class="char">A</span>
<span class="char">L</span>
<span class="char">2</span>
</span>

</div>

Para textos largos y tal y como indican en Codrops, seguramente merezca la pena usar el complemento para jQuery Lettering, del que ya hablamos en un anterior post y que hace de manera automática esa tarea de añadir todos los span necesarios.

---

Y bien, ya vamos con el CSS.

Lo que hay que añadir a nuestra hoja de estilo es un contenedor general que llamaremos scrabble en este ejemplo y luego sólo es cuestión de dar propiedades a las distintas clases (palabras y letras).

Aquí he respetado el código original que usa selectores de atributos por si alguno termina usando Lettering, ya que este script asigna nombres secuenciales a los span (char1, char2, char3, etc.) y la única forma de identificarlos en grupo es con dichos selectores.

Por ejemplo, las propiedades dentro de .scrabble span[class^="word"], se establecerán para los span cuya clase comience con los caracteres word. De esta manera nos servirá tanto para una clase word1, word216 o incluso una word7ioksaof.

Esta última va a ser que no se nos va a generar con Lettering, pero sirva como extensión del ejemplo.

Estas serían las propiedades del contenedor general, con todo centrado y dejando un pequeño espacio a ambos lados al no ocupar todo el ancho disponible:

/* Scrabble */

.scrabble {
text-align: center;
margin: 0 auto;
width:90%;
}

Ahora convertimos cada palabra en un bloque para que se vean unidas todas las letras que la componen, pero usamos inline-block para que no nos cambien de línea si no es necesario. Esto es, cuando haya ancho suficiente para más de una. Añadimos también un margen entre palabras:

.scrabble span[class^="word"] {
display: inline-block;
margin: 0 15px;
}

Este es el bloque principal de diseño. Cada letra irá dentro de una caja con puntas redondeadas, un tamaño de fuente grande con sombras que simulan profundidad y el conocido color hueso de las fichas como fondo. Las sombras interiores y exteriores completarán el efecto:

.scrabble span[class^="char"] {
width: 60px;
height: 66px;
display: inline-block;
background: #e4d095;
color: #2a1f1b;
border-radius: 4px;
font-size: 40px;
font-weight: 300;
line-height: 66px;
margin: 10px 3px;
text-align: center;
cursor: default;
font-family: Arial, sans-serif;
text-shadow:
1px 1px 1px rgba(255, 255, 255, 0.9),
0 -1px 1px rgba(255,255,255,0.2);
text-transform: uppercase;
box-shadow:
1px 4px 8px rgba(0,0,0,0.8),
inset 3px 0 2px rgba(255,255,255,0.4),
inset 0 3px 0px rgba(255,255,255,0.5),
inset -2px -3px 0px rgba(143,128,82,0.6);
}

Para terminar un pequeño toque maestro que hará que las fichas (cada letra) no se vean perfectamente alineadas y aumente el realismo.

Esto se consigue con pequeños desplazamientos (giros) que además se aplican de una manera que simula aleatoriedad. Si lo hiciéramos sólo cada n fichas sería demasiado evidente el patrón, así que se crean dos reglas simultáneas con criterios numéricos que se solapan.

Las que ocupan un una posición impar se rotan 2 grados...

.scrabble span[class^="char"]:nth-child(odd) {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}

...y cada tres se rotan -3 grados:

.scrabble span[class^="char"]:nth-child(3n) {
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}

Además podemos individualizar otras propiedades según la palabra que sea. Esto sirve para cambiar el color de la segunda:

.scrabble > span:nth-child(2) span {
color: #a62a19;
}

Y para dar otro ejemplo de lo que se puede hacer, si se añade algún encabezado también se puede marcar una parte del texto de forma individual para asignar otras propiedades que nos interesen:

.scrabble h5 span[class^="char"] {
color: darkblue;
font-size: 28px;
width: 36px;
height: 40px;
line-height: 40px;
}

Este sería el resultado de insertar todas las clases y propiedades anteriores una a continuación de la otra:

ROTULOSCRABBLEVISTOEN

CODROPS

Si queréis adaptar tamaños y colores, podéis experimentar previamente en este Dabblet.

¿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