Conosci qualche buon trucco con le carte? Spero che, dopo oggi, lo farai! Creeremo alcune semplici e attraenti carte da gioco con puro CSS, quindi impareremo come indirizzare e animare ogni carta per un po 'di divertimento in più.
Lungo la strada, vedremo come usare prima e dopo per costruire le carte con un margine minimo. Iniziamo!
Avvia la demo dal vivo o scarica il codice sorgente.
Costruire una carta
Il primo compito sulla nostra lista è ovviamente quello di costruire una carta. Lo faremo con un margine minimo e senza incorporare alcuna immagine. Impossibile dirlo? Anzi! Vediamo come funziona.
Inizia creando un nuovo documento HTML e inserendo un div di base con due classi: carta e suitdiamonds.
Ora è il momento di mettere qualcosa sulla carta. Faremo tutto come un asso per semplicità, quindi tutto ciò di cui hai bisogno è un paragrafo con un? A ?.
Mentre procediamo, tieni presente che il mio intero obiettivo qui è un codice minimo e riutilizzabile. Si noti che ho usato le classi, non gli ID. Questo è ovviamente perché le classi sono riutilizzabili. Inoltre, c'è un motivo per cui il nome della classe qui non è solo "diamanti", che vedremo più avanti. Mentre andiamo avanti e guardiamo al nostro CSS, notate dove concateniamo i selettori e creiamo una base di codice in stile quasi modulo per ridurre la ripetizione.
Carta CSS
Che ci crediate o no, questo è tutto il margine di cui abbiamo bisogno per la nostra carta. Tutto il resto verrà realizzato con i CSS. Per iniziare, abbiamo bisogno di alcuni stili di pagina di base, seguiti dai nostri carta stili di classe.
Come puoi vedere, gli stili delle carte sono piuttosto semplici. Facciamo la carta bianca, intorno agli angoli, applichiamo un'ombra, ecc. Niente di troppo fantasia a parte il posizionamento relativo.
Ora facciamo il nostro? A? sembra un po 'più attraente. Di nuovo, non molto qui, solo alcuni allineamenti del testo e stili di carattere.
Dovremmo fare abbastanza bene a questo punto, diamo un'occhiata e vediamo cosa abbiamo:
Sembra una carta, no? C'è qualcosa che manca però? i vestiti! Diamanti, cuori, fiori, spade; devi avere abiti. Questo diventa difficile se vogliamo stare lontano dalle immagini, ma ho qualche asso nella manica.
Suit CSS
Dato che non vogliamo aggiungere alcun markup extra alla nostra pagina, ovviamente vorremmo guardare a prima e dopo per inserire le icone del seme. Fortunatamente, la maggior parte dei browser standard riconosce un'ampia varietà di simboli. Se controlli CopyPasteCharacter, troverai esattamente quello che ti serve per un mazzo di carte.
Come puoi vedere, qui abbiamo inserito un diamante usando sia prima che dopo (quindi ne avremo due). Quindi, dobbiamo ripetere questo in tutti e quattro i semi:
Se sei veloce, ti renderai conto che uno di questi simboli su ogni carta dovrebbe essere capovolto. Questo sarebbe abbastanza semplice con una trasformazione CSS, ma dato che non vedremo mai la scheda sottosopra sul nostro schermo, penso che questo sia un inutile bit di realtà che non vale il codice di esecuzione.
Ora, tutto ciò che abbiamo fatto fino a questo punto è creare i simboli, dobbiamo ancora ridimensionarli e posizionarli correttamente. Normalmente, questo richiederebbe un tonnellata di selettori dato che abbiamo quattro semi, ognuno dei quali ha una versione prima e dopo di stile. Siamo stati furbi e abbiamo usato la parola "tuta"? nel nome di ogni classe. Ciò significa che possiamo facilmente indirizzare tutte le classi di tuta contemporaneamente. Quindi, abbiamo bisogno di stilare separatamente solo le classi prima e dopo. Eccezionale!
Che diamine? Se non l'hai mai visto prima, è qualcosa di super fantasia con un nome che amo dire perché mi fa sembrare più intelligente di quanto lo sia io: il selettore del valore dell'attributo della sottostringa arbitraria. Spiego questo in modo approfondito qui, ma fondamentalmente, ti permette di indirizzare parti di un attributo e afferrare tutto ciò che ha quella parte in comune.
Con quello, abbiamo una carta completa in stile! Sembra piuttosto impressionante considerando il nostro markup è così breve.
Una mano di carte
Abbiamo messo una sola carta sul nostro tavolo, ma abbiamo fornito lo stile per tutti e quattro i semi. Creiamo una? Mano? di carte per mostrarle tutte. Ecco il markup:
Questo è praticamente lo stesso di prima, solo che questa volta abbiamo un div wrapper con una? Mano? classe e abbiamo usato tutte e quattro le classi di seme. Per la nostra classe di mani, non abbiamo davvero bisogno di molto stile. Tuttavia, lo usiamo galleggianti sulle nostre carte, il che significa che avremo bisogno di un clearfix sul genitore della carta, che è il div della mano. Ecco il codice di Nicolas Gallagher per questo insieme a un semplice passaggio del mouse per le carte.
Questo è tutto! Ora abbiamo un bel set di carte realizzato con puro CSS e HTML. Ecco come sono:
Diffondili
Ora che abbiamo creato le nostre carte, divertiamoci con loro. Quello che voglio è avere una singola carta, che al passaggio del mouse, i fan fuori nella nostra piena mano. Nella forma a ventaglio, le carte non dovrebbero essere dritte come abbiamo visto sopra, ma ruotate come quando le tieni in mano.
HTML
L'HTML per rimuoverlo è praticamente esattamente ciò che abbiamo visto prima. Solo questa volta, aggiungi un? Spread? classe al contenitore div.
CSS
Tirare fuori questo richiederà un bel po 'di CSS, ma è tutto abbastanza facile da avvolgere la mente. In primo luogo, saremo un po 'più specifici riguardo al nostro contenitore. Fallo impostando altezza, larghezza e contesto di posizionamento sulla classe di spread.
Il prossimo. posizionare le carte in modo assoluto in modo che si impilino l'una sull'altra rispetto al div spread. Ripristina i valori di posizionamento e imposta una transizione per quei valori di posizionamento in modo che eventuali modifiche vengano animate.
Ora dobbiamo impostare una serie di stati di hover che posizionano manualmente ogni scheda nell'array che vogliamo. Lo facciamo con le trasformazioni CSS3 rivolte a ciascun seme e con valori superiori e di sinistra diversi. In definitiva, impostare questo era un sacco di prove ed errori. Fortunatamente, ho fatto quel lavoro per te, ecco il codice che ti servirà.
Infine, quando le carte sono nella loro forma sparsa, voglio un altro stato al passaggio del mouse che sottolinei sottilmente ogni carta. Possiamo farlo oscurando l'ombra della scatola che abbiamo applicato prima.
Guardalo in azione!
Ora che abbiamo finito con il codice, è tempo di dare un altro sguardo all'esempio dal vivo. Come bonus, ho lanciato una terza mano che cresce quando passi il mouse su una carta.
demo: Clicca qui per il lancio.
Cosa farai con loro?
Quindi eccoci qui, pure carte da gioco CSS e HTML. Per essere onesti, non ho idea di cosa fare con loro, ma sono stati sicuramente divertenti da costruire. Se hai delle idee fantastiche per migliorarle o usarle in modo divertente, lascia un commento qui sotto e fammi sapere!