Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

17 divertidos juegos de palabras con reglas CSS

A raíz de un hilo en Reddit en el que los usuarios crean bromas y juegos de palabras a través de reglas CSS, el SEO australiano Saijo George ha recopilado en su web unas cuantas bastante divertidas.  

La verdad es que las hay bastante ingeniosas. Nosotros no hemos querido ser menos y también hemos hecho una pequeña selección con nuestras preferidas. A ver si te gustan:

 1. Parece que el Titanic no flota

juego palabras CSS Titanic float none

2- El DeLorean de Regreso al Futuro

Este no nos ha parecido especialmente gracioso, pero claro, tenemos debilidad por los DeLorean, sobre todo si vuelan y viajan en el tiempo.

CSS Regreso al Futuro DeLorean z-index -1955

3- Harry Potter

Aquí hemos tenido nuestras dudas. Dado que Harry se mete dentro de la capa para usarla. ¿Realmente Harry debería ser un elemento adyacente o un elemento hijo? En nuestra oficina el debate está abierto. ¿Tú que dices?

Lo único que tenemos claro es que en este caso está muy bien traído lo de usar la propiedad visibility en vez display, ya que, aunque use la capa, Harry continúa ocupando espacio e interactuando con su entorno. Ante todo, rigor ;-P.

juego palabras CSS capa invisibilidad Harry Potter visibility hidden

4 - Hobbits

La clase hobbit está bastante bien definida, de la cabeza a los pies.

CSS Hobbits height 50% pies width 200%

5- Que no falte Chuck Norris

Y como buen meme, hilo de Reddit (o similar) que se precie, no podía faltar Chuck Norris. ¿Cuál será su color favorito?

CSS Chuck Norris BADA55

6- La frontera entre USA y México...

  La versatilidad de CSS es tal que también sirve para definir los límites territoriales entre países

CSS forntera USA y México border dashed

7- ... frente a las fronteras de la Unión Europea

CSS paises de Europa border none

8- Y ya que estamos con fronteras, aquí va una de las más famosas

¿Sabes en qué parte de China se encuentra su famosa muralla?

CSS China border-top-style solid

9- Australia

Pobres australianos, ni sé cómo pueden aguantar estar todo el día cabeza abajo...

CSS Australia transform rotateY 180 Deg

10- La Torre de Pisa

Lo curioso de esto es que, contrariamente a la creencia popular, una fuente itálica no tiene por qué estar inclinada. Pero esto casi mejor que lo dejamos para otro día si nos da por hablar de tipografía.

CSS Torre de Pisa {font-style:italic}

11- El Big bang

Y no, en este caso Sheldon Cooper no pinta nada, nos referimos a la creación del universo. ¡Bazinga!

Big Bang before content

12- Ninja

Verdaderos maestros a la hora de ocultarse...

CSS Ninja visibility hidden

13- La tabla periódica

Obviamente no va a ser display:inline. Eso sí, si lo que has interpretado es algo así como periódico sobre la mesa, hazte ver ese inglés...

CSS Tabla periódica display table

14- Músculos

CSS Músculos display: flex

15- Rap

¿Qué tal vas de flow?

CSS rap word spacing 0

16- Lego

Aunque este también valdría para Minecraft.

CSS Lego display block

17- Ikea

Y para terminar, la mítica mesa Lack de Ikea. ¿Quién no tiene una en casa?

CSS Ikea Mesa Lack display table

Si se te ocurre alguna otra puedes dejárnosla en los comentarios.

 

campusMVP campusMVP es la mejor forma de aprender a programar online y en español. En nuestros cursos solamente encontrarás contenidos propios de alta calidad (teoría+vídeos+prácticas) creados y tutelados por los principales expertos del sector. Nosotros vamos mucho más allá de una simple colección de vídeos colgados en Internet porque nuestro principal objetivo es que tú aprendas. Ver todos los posts de campusMVP
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (2) -

Bernie Torras
Bernie Torras

.andalucia {
    color:#eaeaea
}

Responder

José Manuel Alarcón
José Manuel Alarcón

jajaja

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.