Känna några bra kort tricks? Förhoppningsvis, efter idag, kommer du! Vi ska bygga några enkla och attraktiva spelkort med ren CSS, så lär vi oss hur vi målar och animerar varje kort för lite extra kul.
Under vägen ser vi hur man använder före och efter för att bygga korten med minimal uppmärksamhet. Låt oss börja!
Starta live demo eller ladda ner källkoden.
Bygga ett kort
Den första uppgiften på vår lista är uppenbarligen att bygga ett kort. Vi drar av med minimal uppmärkning och utan att bädda in några bilder. Omöjligt att du säger? Nej! Låt oss se hur det fungerar.
Börja med att skapa ett nytt HTML-dokument och infoga en grundläggande div med två klasser: kort och suitdiamonds.
Nu är det dags att lägga på något på kortet. Vi gör allt för ett ess för enkelhetens skull, så allt du behöver är en paragraf med ett? A ?.
När vi fortsätter, kom ihåg att hela mitt mål här är minimal, återanvändbar kod. Observera att jag har använt klasser, inte ID. Detta är förstås eftersom klasserna är återanvändbara. Det finns också en anledning att klassnamnet här inte bara är "diamanter", vilket vi ses senare. När vi går framåt och tittar på vår CSS, märker var jag kedjar ihop väljare och skapar en kodbasbaserad modulmodell för att minska upprepningen.
Kort CSS
Tro det eller inte, det är all den markering som vi behöver för vårt kort. Allt annat kommer att dras av med CSS. För att börja här behöver vi några grundläggande sidstilar, följt av vår kort klassstilar.
Som du kan se är kortstilarna ganska enkla. Vi gör kortet vitt, runt hörnen, applicera en skugga, etc. Inget annat än att förtjäna bortsett från den relativa positioneringen.
Låt oss nu göra vår? A? se lite mer attraktivt ut. Återigen, inte mycket här, bara lite textinriktning och typsnittstyp.
Vi borde göra det bra på den här tiden, låt oss ta en titt och se vad vi har:
Det ser ut som ett kort, eller hur? Men saknas något? kostymerna! Diamanter, hjärtan, klubbar, spader; du måste ha kostymer. Det blir svårt om vi vill hålla sig borta från bilder, men jag har några knep på min ärm.
Kostym CSS
Med tanke på att vi inte vill lägga till någon extra markup på vår sida, vill vi naturligtvis se till innan och efter för att infoga kostymikonen. Lyckligtvis känner de flesta vanliga webbläsare ett stort antal symboler. Om du kollar CopyPasteCharacter hittar du exakt vad du behöver för ett kort kort.
Som du kan se här införde vi en diamant med både före och efter (så vi får två). Därefter måste vi upprepa detta på alla fyra kostymerna:
Om du är snabb, inser du att en av dessa symboler på varje kort ska vara upp och ner. Detta skulle vara enkelt nog med en CSS-transform, men med tanke på att vi aldrig faktiskt ser kortet upp och ner på vår skärm, tycker jag att det här är en onödig bit av verklighet som inte är värt exekveringskoden.
Nu har allt vi gjort upp till denna punkt skapar symbolerna, vi måste ändå korrekt storlek och placera dem. Normalt skulle detta ta en ton av väljare med tanke på att vi har fyra kostymer, var och en har en före och efter version för att stila. Vi var kloka dock och vi använde ordet? Kostym? i varje klassnamn. Det innebär att vi enkelt kan rikta alla kostymklasser på en gång. Då behöver vi bara utforma klasserna före och efter varandra separat. Grymt bra!
Vad i helvete? Om du aldrig har sett det här tidigare, är det något superintressant med ett namn som jag älskar att säga eftersom det låter mig smartare än jag verkligen är: godtycklig substring attributvärdesväljare. Jag förklarar här djupt här, men i grunden låter du dig rikta in delar av ett attribut och ta tag i allt som har den gemensamma delen.
Med det har vi ett komplett kort utformat! Det ser ganska imponerande med tanke på vårt uppslag är så kortfattat.
En hand av kort
Vi lägger bara ett kort på bordet, men vi har gett stilen för alla fyra kostymerna. Låt oss skapa en? Hand? av kort för att visa dem alla av. Här är markeringen:
Det här är ungefär detsamma som tidigare, bara den här gången har vi en wrapper div med en? Hand? klass och vi har använt alla fyra kostymklassen. För vår handklass behöver vi inte mycket styling. Vi använder dock flottörer på våra kort, vilket innebär att vi behöver en clearfix på kortföräldern, vilket är hand div. Här är Nicolas Gallaghers kod för detta tillsammans med en enkel svävar för korten.
Det är allt! Nu har vi oss en fin liten uppsättning kort gjorda med ren CSS och HTML. Så här ser de ut:
Sprida dem
Nu när vi har byggt våra kort, låt oss ha roligt med dem. Vad jag vill ha är att ha ett enda kort, som när det svävar över, fläktar ut i vår fulla hand. I den utspända formen borde korten inte vara raka som vi såg ovan, men roterade som när du håller dem i handen.
html
HTML för att dra av det här är ganska mycket exakt vad vi såg tidigare. Bara den här gången, lägg till en? Spridning? klass till container div.
CSS
Att dra av detta kommer att ta ganska lite CSS, men det är allt ganska enkelt att sätta upp dig. Först ska vi vara lite mer specifika om vår behållare. Gör detta genom att ange en höjd-, bredd- och positioneringskontext på spridningsklassen.
Nästa. placera absolut korten så att de alla staplar på toppen av varandra i förhållande till spridningsdelen. Återställ positioneringsvärdena och ställ in en övergång för de positioneringsvärdena så att alla ändringar kommer att animeras.
Nu måste vi sätta upp en massa svävarstater som manuellt placerar varje kort i den matris som vi vill ha. Vi gör detta med CSS3-transformer riktade mot varje kostym tillsammans med olika topp- och vänstervärden. I slutändan var det mycket försök och fel att sätta upp detta. Lyckligtvis har jag gjort det för dig, här är koden som du behöver.
Slutligen, när korten är i sin spridda form, vill jag ha ett annat svävstatsläge som subtilt lyfter fram varje kort. Det kan vi göra genom att mörka den boxskuggan vi tillämpade tidigare.
Se det i aktion!
Nu när vi är alla färdiga med koden är det dags att ta en titt på liveexemplet. Som en bonus kastade jag i en tredje hand som växer när du svävar över ett kort.
demo: Klicka här för att starta.
Vad ska du göra med dem?
Så där har du det, rent CSS och HTML-spelkort. För att vara ärlig har jag ingen aning om vad jag ska göra med dem, men de var säkert roliga att bygga. Om du har några bra idéer för att förbättra eller använda dessa på ett roligt sätt, lämna en kommentar nedan och låt mig veta!