¿Conoces algún buen truco de cartas? Con suerte, después de hoy, lo harás! Vamos a construir algunas cartas de juego simples y atractivas con CSS puro, luego aprenderemos cómo apuntar y animar cada carta para un poco de diversión adicional.
En el camino, veremos cómo usar el antes y el después para construir las tarjetas con un mínimo de marcas. ¡Empecemos!
Inicie la demostración en vivo o descargue el código fuente.
Construyendo una Tarjeta
La primera tarea en nuestra lista es obviamente construir una tarjeta. Lo lograremos con un mínimo de marcado y sin incrustar ninguna imagen. ¿Imposible dices? ¡No! Vamos a ver cómo funciona.
Comience creando un nuevo documento HTML e insertando un div básico con dos clases: tarjeta y suitdiamonds.
Ahora es el momento de poner algo en la tarjeta. Haremos de todo un as por simplicidad, de modo que todo lo que necesita es un párrafo con una? A?
A medida que avanzamos, tenga en cuenta que mi objetivo completo aquí es el código mínimo y reutilizable. Fíjate que he usado clases, no identificaciones. Esto es, por supuesto, porque las clases son reutilizables. Además, hay una razón por la que el nombre de la clase aquí no es solo "diamantes", que veremos más adelante. A medida que avancemos y miremos nuestro CSS, observe dónde encadeno los selectores y creo una base de código casi estilo módulo para reducir la repetición.
Tarjeta CSS
Lo creas o no, ese es todo el margen de beneficio que necesitamos para nuestra tarjeta. Todo lo demás se llevará a cabo con CSS. Para comenzar aquí, necesitamos algunos estilos de página básicos, seguidos de nuestros tarjeta estilos de clase
Como puedes ver, los estilos de las cartas son bastante simples. Hacemos la tarjeta blanca, redondeando las esquinas, aplicando una sombra, etc. Nada demasiado sofisticado aparte de la posición relativa.
Ahora hagamos nuestro? A? Mira un poco más atractivo. De nuevo, no hay mucho aquí, solo un poco de alineación de texto y estilos de fuente.
Deberíamos estar haciendo bastante bien en este punto, echemos un vistazo y veamos lo que tenemos:
Parece una carta, ¿no es así? ¿Hay algo que falta? ¡Los trajes! Diamantes, corazones, palos, espadas; tienes que tener trajes Esto se vuelve difícil si queremos mantenernos alejados de las imágenes, pero tengo algunos trucos bajo la manga.
Traje CSS
Dado que no queremos agregar ningún margen adicional a nuestra página, obviamente querremos ver antes de y después para insertar los iconos del traje. Afortunadamente, la mayoría de los navegadores estándar reconocen una gran variedad de símbolos. Si revisa CopyPasteCharacter, encontrará exactamente lo que necesita para un mazo de cartas.
Como puede ver, aquí insertamos un diamante usando antes y después (así tendremos dos). A continuación, necesitamos repetir esto en los cuatro palos:
Si eres rápido, te darás cuenta de que uno de estos símbolos en cada tarjeta debe estar al revés. Esto sería lo suficientemente simple con una transformación CSS, pero dado que nunca veremos la tarjeta al revés en nuestra pantalla, creo que esto es una realidad innecesaria que no vale la pena el código de ejecución.
Ahora, todo lo que hemos hecho hasta este punto es crear los símbolos, aún tenemos que dimensionarlos y colocarlos correctamente. Normalmente, esto tomaría un tonelada de selectores dado que tenemos cuatro palos, cada uno de los cuales tiene una versión anterior y posterior para diseñar. Sin embargo, éramos inteligentes y usamos la palabra "traje". en cada nombre de clase. Esto significa que podemos apuntar fácilmente a todas las clases de trajes a la vez. Entonces, solo necesitamos el estilo de las clases antes y después por separado. ¡Increíble!
¿Qué diablos? Si nunca antes has visto esto, es algo muy elegante con un nombre que me encanta decir porque me hace sonar más inteligente de lo que realmente soy: el selector de valor de atributo de subcadena arbitraria. Explico esto en profundidad aquí, pero básicamente, le permite seleccionar partes de un atributo y capturar cualquier cosa que tenga esa parte en común.
Con eso, tenemos una tarjeta completa estilizada! Se ve bastante impresionante teniendo en cuenta que nuestro marcado es tan breve.
Una mano de cartas
Solo colocamos una única carta en nuestra mesa, pero hemos proporcionado el estilo para los cuatro palos. Vamos a crear una? Mano? De tarjetas para mostrarlos a todos. Aquí está el marcado:
Esto es más o menos igual que antes, solo que esta vez tenemos un div envoltorio con una? Mano? clase y hemos utilizado las cuatro clases de traje. Para nuestra clase de mano, realmente no necesitamos mucho estilo. Sin embargo, nosotros usamos flotadores en nuestras tarjetas, lo que significa que necesitaremos un clearfix en la tarjeta principal, que es el div de mano. Aquí está el código de Nicolas Gallagher para esto, junto con un simple hover para las tarjetas.
¡Eso es! Ahora tenemos un pequeño juego de tarjetas hecho con CSS y HTML puro. Esto es lo que parecen:
Sepáralos
Ahora que hemos construido nuestras tarjetas, divirtámonos con ellas. Lo que quiero es tener una sola tarjeta, que cuando se cierne sobre ella, los fans queden en nuestras manos. En el formulario desplegado, las cartas no deben ser rectas como vimos anteriormente, sino rotar como cuando las sostienes en la mano.
HTML
El HTML para sacar esto es casi exactamente lo que vimos antes. Solo que esta vez, agregar un? Spread? clase al contenedor div.
CSS
Llevar esto a cabo requerirá bastante CSS, pero es bastante fácil envolver tu mente. Primero, vamos a ser un poco más específicos acerca de nuestro contenedor. Para ello, establezca un alto, ancho y contexto de posicionamiento en la clase de propagación.
Siguiente. Posicione absolutamente las cartas de modo que todas se apilen unas sobre otras en relación con la división div. Restablezca los valores de posicionamiento y configure una transición para esos valores de posicionamiento para que se animen los cambios.
Ahora tenemos que configurar un grupo de estados de desplazamiento que posicionan manualmente cada tarjeta en la matriz que queremos. Hacemos esto con transformaciones de CSS3 dirigidas a cada palo junto con diferentes valores superiores e izquierdos. En última instancia, configurar esto fue una gran cantidad de prueba y error. Afortunadamente, he hecho ese trabajo por ti, aquí está el código que necesitarás.
Finalmente, cuando las tarjetas están en su forma extendida, quiero otro estado de desplazamiento que resalte sutilmente cada tarjeta. Podemos hacer esto oscureciendo la sombra de cuadro que aplicamos anteriormente.
¡Véalo en acción!
Ahora que todos hemos terminado con el código, es hora de echar otro vistazo al ejemplo en vivo. Como beneficio adicional, lancé una tercera mano que crece cuando pasas el mouse sobre una carta.
Manifestación: Haga clic aquí para lanzar.
¿Qué vas a hacer con ellos?
Así que ahí lo tienen, puro naipes CSS y HTML. Para ser honesto, no tengo idea de qué hacer con ellos, pero fueron muy divertidos de construir. Si tiene alguna gran idea para mejorar o usar estos de una manera divertida, ¡deje un comentario a continuación y avíseme!