Vi har gjort massor av roliga saker nyligen med :sväva väljare. Från knapphängningseffekter för nybörjare till mer avancerade svävarövningar och till och med på att använda hovers med flera bakgrunder. Idag går vi vidare och lär oss om en relaterad men lika fantastisk väljare som ofta blir förbisedd.
Med :aktiva, vi kan kontrollera tillståndet för ett objekt medan det klickas. Vanligtvis tar det den enkla formen att ändra en länks färg medan musen trycks ner, men vi ska göra något mycket mer intressant. Följ med då vi bygger ett super coolt, rent CSS-presidents trivia-spel.
Vad vi bygger
Grundidén här är ganska enkel. Vi har ett galler med åtta bilder med målet att identifiera de avbildade männen, varav en är en före detta amerikanska president. Hovering över en bild glider ner lite för att avslöja ytterligare instruktioner, vilket uppmuntrar dig att klicka. Om du klickar och håller kommer bilden att dras ytterligare för att visa namnet på den visade presidenten.
demo: Klicka här för att starta liveversionen
Ladda ner: Klicka här för att ladda ner källfilerna
Pseudoklassväljare
En pseudoklassväljare är något vi kan använda i CSS för att ändra en grundläggande väljare. Om det här låter för tekniskt för din smak, oroa dig inte, du använder redan dessa utan att ens veta det! Den som du är mest känd för är den :sväva pseudoklassväljare, som låter dig ändra utseendet på något på svävaren. Du kanske också känner till mer avancerade pseudoklassmarkörer som :förstfödde.
När det gäller länkar eller ankare finns det fyra av dessa pseudoklassmarkörer som du ska känna till. Här är de med förklaringar för deras användning:
Som du kan se är vår ofta använda svängväljare en del av en trevlig liten familj som kan styra stilen på en länk i stort sett alla former av existens. Det är viktigt att notera att det här skulle vara en mycket mer intressant uppsättning verktyg om :besökt var inte så problematisk. På grund av säkerhetsbesvär begränsar webbläsare faktiskt vad du kan göra med denna pseudoklass. Till exempel kan du använda den ändra färgen på en länk, men du kan inte manipulera den länkens bakgrundsbild.
Av denna anledning vänder vi oss till :aktiva om vi vill göra något riktigt roligt med en ren CSS-klickhändelse. Det är inte intuitivt att klicka och håll fast, men du bör gå noggrant när du använder den här funktionaliteten och var noga med att tydligt instruera användaren.
Några av de tråkiga grejerna, låt oss börja på vårt projekt!
HTML
HTML för vårt projekt är ganska enkelt. Vi börjar med en kort introduktion som anger vad spelet är och hur man spelar det. Här ställer vi en enkel fråga:? Vem var de första åtta amerikanska presidenterna ?? Observera att allt detta kastas i en enkel container div.
Därefter skapar vi en återanvändbar modul för att hålla vår bild, som fungerar som en slags visuell fråga och svaret, ett enkelt stycke som döljer sig under bilden. Konceptet att vara återanvändbart är nyckeln här. Vi vill upprepa detta för sju andra presidenter och vi vill uppenbarligen inte gå igenom smärtan av att utforma varje modul individuellt. Av denna anledning tillämpar vi en klass (president), som vi kan stila en gång och ha dessa stilar påverkar allt som klassen appliceras på.
Avstämning
Nu borde du ha några fina marginaler som flyttar innehållet bort från kanten och en fin rubrik som inte längre använder standard typografisk styling.
Stil presidentklassen
Nu ska vi börja lägga till en stil för presidentklassen, vilket borde göra en stor skillnad i vår layout. För att börja, vill vi flyta dem alla till vänster och sätta sina dimensioner. Eftersom vi ska skjuta in bilderna in och ut sätter vi överflödet till dolda så att ingenting bryter ut ur vår lilla 200px med 200px låda.
Därefter ställer vi marginalen till 20px, det här är inte ett godtyckligt tal. Det är det noga beräknade värdet som tillåter fyra bilder per rad i vår layout. Vår bredd är 960px, som är uppdelad mellan fyra 200px breda bilder, men 4 * 200 är 800 och lämnar 160 pixlar kvar för marginaler. 160px / 4 bilder är 40px av marginal per bild, 20 till vänster och 20 till höger.
Det finns också några andra intressanta platser här. Vi lägger till en del z-index voodoo senare, vilket faktiskt gör bakgrundsfärger till vår svartext. För att ta reda på detta använde jag en RGBa bakgrundsfyllning på 20%. Äldre versioner av IE gillar inte så att de helt enkelt inte får någon bakgrundsfyllning.
Jag ställer också markören på? Pekare? vilket kommer att få den lilla handen att dyka upp när vi svävar över en president. Slutligen lade jag till en insatsskugga bara för att få vår bakgrund att se lite snyggare ut. Denna del är helt frivillig.
Avstämning
Vid denna tid ser sakerna lite konstigt ut, men vi är på rätt väg. Våra presidentsbilder hålls inne och klipps, vilket är bra, men bakgrundstexten trycker faktiskt på dem, som vi inte vill ha. I stället vill vi att bilden ska flyta över texten. Vi gör det här i nästa steg.
Fixa textstilarna och staplingsordern
Innan vi fortsätter att göra allt detta arbete, låt oss stila vår punkttext riktigt snabbt. Om vi väntar längre kommer det att döljas bakom bilderna och svårare att hålla koll på.
Dessa stilar borde göra hela vår text ser mycket bättre ut. Observera att även om den lilla etiketten har standard styling, kan och kan det enkelt överdrivas manuellt.
Sätta texten bakom bilderna
Som jag nämnde ovan vill vi inte att våra stycken trycker ner bilden men istället gömmer sig bakom den. För att uppnå detta ställer vi det fri från flödet från med absolut positionering och flyttar sedan den bakom bilden med ett z-index på -1.
Det här blir allt rätt där vi vill ha det. Texten gömmer sig bakom bilden och varje bild visas äntligen i sin fulla form. Problemet? Det finns inget sätt att se svaret!
Ta det till livet
Nu när vi har allt rätt där vi vill ha det, är det dags att lägga till interaktionen. Låt oss tänka på hur vi vill att den ska fungera: Vi har redan standardkoden, så vi är bra där. Nästa steg är svängningsevenemanget. Detta borde bumpa ner bilden, men bara lite, bara tillräckligt för att visa den första raden av text. Sedan på klicket vill vi ta bilden ner ytterligare.
Allt detta behöver hända med några fina övergångar förstås så det visar sig att vårt första steg är att ställa upp dessa på bilderna. Som alltid behöver vi en miljon olika versioner för att redovisa alla olika webbläsare:
Med dessa övergångar på plats, när vi ändrar marginalerna på våra bilder, kommer övergången att animeras. Så vårt nästa steg är att definiera svängningsevenemanget med vår favorit pseudoklassväljare.
Detta lägger till en liten marginal överst på bilden så att när användaren svänger över det så ser vi det här:
Detta tjänar som ett bra litet tips för hur du får svaret. Om vi visade det fulla svaret här skulle vi troligen ha ett problem med oavsiktligt avslöjar, klicket fungerar som ett mer konkret sätt att säkerställa intentionality.
Vår sista del av CSS är vad vi kom hit för att lära oss om: den aktiva pseudoklassväljaren. Genom att implementera detta lilla men kraftfulla finalstycke, kommer hela vårt trivia-spel samman.
Nu när en användare klickar på en bild och håller knappen nertryckt, slår presidentens bild ned och hans namn avslöjas. Med det är vi alla färdiga!
Slutsats
Efter att ha läst igenom denna handledning borde du få veta en massa bra saker om några av de mest populära pseudoklassmarkörerna och hur man använder dem för att komma med några riktigt intressanta resultat. Vi kombinerade svängaren och aktiva väljare för att skapa ett rent CSS trivia-spel där användaren först hänger och sedan klickar för att se ett dolt meddelande.
Lämna en kommentar nedan och låt oss veta om du lärde dig något. Också vara säker på att kolla in live demo. Kan du namnge alla åtta presidenterna framgångsrikt?