Vem har två tummar och älskar att driva gränserna för CSS? Den här killen. Låt oss hoppa in i ett projekt som bara gör det. Det är ganska experimentellt och kommer inte att passera den semantiska polisen, men det kommer att lära dig en massa mycket om avancerad CSS-taktik och kommer att bli massor av kul.
Vad vi ska bygga är en ren CSS horisontell dragspelare. Du kommer att kunna infoga så många bilder som du vill ha, alla med unikt innehåll och alla tillgängliga via ett klickhändelse, allt utan att du smickar på JavaScript. Omöjligt att du säger? aldrig!
Vad vi bygger
Slutprodukten av dagens ansträngningar kommer att vara en glidande, animerad och klickbar horisontell dragspelmeny. Vi vill ha några smala barer som, när de klickas, expanderar för att visa doldt innehåll.
demo: Klicka här för att starta.
Clickable CSS
Som du vet är det inte CSS som stöder klickhändelser, så hur är det i haken att vi ska få den här att flytta från bild till bild? Vi kan ta det enkla sättet ut och använda en svävar, men var är kul i det? Låt oss istället prova lite svårare och kapra en rad knappar.
Med radioknappar har vi allt vi behöver: en grupp av klickbara objekt där endast en kan väljas och det valda objektet är lätt att rikta och stila på. Perfekt! Semantisk? Inte riktigt? Om du vill göra det på ett sätt som håller på med en peer review, använd JavaScript. Idag skjuter vi helt enkelt CSS så långt vi kan få det att gå och se om vi kan lära oss någonting under vägen.
Steg 1: HTML-ram
Att bygga ett nytt webbdesignprojekt är att bygga ett hus. Det första steget är att få en grundläggande men solid ram på plats där du kan bygga resten. För att åstadkomma detta lägger vi ner lite start HTML.
Det första vi behöver är en oorderad lista inuti ett formelement. Detta verkar lite konstigt vid denna tidpunkt, men det blir mer meningsfullt om en minut.
Här representerar varje listobjekt en bild. Om du vill ha fem bilder måste du ha fem listor. Vårt testprojekt kommer att använda tre bilder. Så varför formelementet? Låt oss attackera det där nästa.
Inne i varje listobjekt kommer vi att placera tre element: en inmatning, etikett och div. Ingångarna kommer att vara radioknappar, som är anslutna till etiketter. Tillsammans kommer dessa två saker att utgöra våra dragspelskontroller. Div kommer att hålla innehållet som vi vill ha inuti varje bild.
Som jag nämnde ovan använder vi radioknappar här för att de ger all den funktionalitet som vi behöver dra av den här lilla featten. Problemet är naturligtvis att de ser ut som radioknappar. Vi kan fixa det här med CSSs magi.
Steg 2: Åsidosätt formulärstilarna
Vår nästa utmaning är att göra fula radioknappar söta. Så här ser vår HTML ut utan stilering:
Som du kan se, mellan listkulorna och radioknapparna har vi vårt arbete klippt oss för oss. Första saker först, innan vi gör något annat, låt oss kasta ut en lat man reset:
Detta gör att våra marginaler och vadderingar kommer att fungera tvärs över olika webbläsare och att eventuell vaddering inte kommer att störa våra explicit angivna dimensioner. Border-box gör detta genom att manipulera standard CSS box-modellen för att vara lite mer användarvänlig.
Rensa liststilarna
Låt oss ta itu med något enkelt. Dessa punktpunkter kan dödas med ett enkelt stilblock som jag är säker på att du är bekant med.
Dölj radioknapparna
Nu är det dags att rikta in radioknapparna och sparka av dem på skärmen. För att göra detta ställer vi helt enkelt sin position till absolut och lägger dem sedan långt borta.
Observera att min väljare här är super generisk. Om du placerar det här objektet i något projekt, se till att du inte riktar in alla inmatningar så som jag har gjort här. Kasta hela saken i en div med en klass och rikta bara in de insatser som hör samman med den klassen.
Stil etiketten
Nu är vår radioknapp gömd, men varför valde vi att göra det? Hur ska vi styra dragspelet? Svaret är naturligtvis att en radioknapps etikett fungerar som en alternativ klickpunkt och kan formas mer fritt. Det betyder att även med radioknappen, kommer funktionaliteten fortfarande att finnas i etiketterna, allt vi behöver göra är att göra dem presenterbara.
Här har jag delat upp min kod i tre bitar så att vi enkelt kan gå igenom det. Det första stycket reglerar etikettens formfaktor: det är höjd, bredd, marginal, överflöde etc. Vi har i grunden visat etiketterna i stora rektanglar som sitter bredvid varandra.
Nästa är en bit av stilar som styr etiketternas utseende. Vi har ställt bakgrunden till grått, centrerat texten (de lilla siffrorna) och ställt in teckensnittstorleken.
Slutligen sätter vi upp några övergångar så att de förändringar som vi kommer att göra senare kommer att animeras.
Steg 3: Mer etikett Styling
Med den sista delen av styling har vi helt omvandlat våra tråkiga gamla radioknappar till något som ser mycket närmare det vi vill uppnå.
Jag gillar det inte, men det finns ingen definition mellan de tre flikarna, så låt oss hjälpa till med lite mer styling.
Här har vi mörkat den andra fliken så att den skiljer sig mellan de första och tredje flikarna, lägger till en annan övergång och ställer in svängstilarna för att mörka flikarna ännu mer när användaren muspekar över dem. Det gör att våra flikar ser mycket bättre ut:
Steg 4: Skjut HTML
Nu när vi har våra flikar ser vi hur vi vill, låt oss hoppa tillbaka och avsluta vår HTML. Det här innehållet skulle ha blivit i vägen om vi hade lagt in det innan, men det borde vara dolt nu.