Dagens projekt kommer att bli roligt. Vi ska bygga en grundläggande HTML / CSS-demosida, sedan lägga till en knapp som tillåter användaren att växla sidans färgschema mellan staterna: dag och natt. När färgerna växlar, så kommer olika andra element på sidan.
Den riktigt fantastiska delen är att vi kan dra av allt detta med bara CSS. Längs vägen lär vi oss att skapa en CSS-driven klickhändelse, liksom hur vi använder pseudoelement för att manipulera sidinnehåll.
Vad vi bygger
I grund och botten kommer vi att ha ett mycket enkelt steg som kan bytas mellan två stater. Standardstatus med en? Dag? tema, som använder en ljus bakgrund och mörk text. Den andra staten med en natt? tema med en mörk bakgrund och lätt text. Med ett knapptryck kan du växla mellan de två.
? Det mörka och ljuset temat kommer också att visa upp olika rubriker och bakgrundsbilder.?Inte nöjd med enkla färgändringar, jag ville ta den här tanken ännu längre, så vi ändrar också några andra saker runt. Det mörka och det ljusa temat kommer också att visa upp olika rubriker och bakgrundsbilder.
Återigen, för att visa upp, kommer vi att utföra allt detta magi utan en enda droppe JavaScript. Låt oss börja.
Steg 1. Sida HTML
Det första vi ska göra är att bygga vår testsida. Det behöver inte vara mycket här, bara några grundläggande element som vi kan leka med i vår CSS. Som du kan se använde jag en rubrik, tre stycken och en bild.
Den riktigt konstiga saken här är den tomma? Headerimage? div. Normalt skulle jag bara kasta i en bild här, men om vi vill kunna byta ut den här bilden i vår CSS måste vi infoga fotot som en bakgrundsbild.
Steg 2. Starter CSS
Innan vi gräver in och börjar utforma specifika delar av vår markering, har vi mycket setup att göra. Först ska vi använda gränsvärde storlek för att göra våra relationer lite enklare att hantera. Detta manipulerar CSS-boxmodellen så att en objekts specifika bredd faktiskt innehåller vadderingar och gränser.
Sedan lade jag till en övergång till allt på sidan. Detta är verkligen inte rekommenderas för seriösa webbsidor, men för vår roliga lilla demo är det det perfekta sättet att se till att lamporna på / av-övergången är animerade.
För att avsluta definierade jag bara storlekarna och vadderingen för sidbehållarna. Observera att om vi vill använda höjd: 100% på huvud klass måste vi se till att både kropp och HTML också är inställda på att uppta hela sidans höjd.
Steg 3. Rubrik CSS
Nu är det dags att börja utforma de specifika elementen på sidan. Vi börjar med vår rubrik. Centrera den, ge den en teckensnittsfamilj och omvandla den till stor bokstav. Därefter är det här där saker blir intressanta, använd ett pseudoelement för att lägga till i ordet? På? efter texten lade vi in i vår HTML.
Pseudoelementen verkar vara lite komplicerade när du först börjar, men det är viktigt att förstå exakt vad som händer här. I grunden sätter vår HTML en rubrik med ordet? Lights? och vår CSS hoppar sedan in och lägger till på ordet? På.?
För en fullständig förklaring av pseudoelement, kolla in? Lowdown på: Före och: Efter i CSS.?
Steg 4. Punkt CSS
Nästa är de tre styckena under rubriken. Dessa ska flyttas till vänster, inställda till en tredjedel av föräldrars bredd och rensas sedan. Det finns också några visuella tweaks här, men allt är ganska enkelt.
Steg 5. Big Photo CSS
För att avsluta demosidan, tilldela en bakgrundsbild till headerimage klass och definiera dimensionerna. Som vanligt tar jag en bild från LoremPixel.
Avstämning
Vid denna tidpunkt ska din sida se ut som bilden nedan. Totalt sett är det inte så imponerande? än!
Steg 6. Light Switch HTML
Nu när vi har en demo att arbeta med, är det dags att installera en? Ljusbrytare? vilket är ett fint sätt att säga att vi ska kasta på en knapp som ändrar upp vissa stilar på sidan. Tricket att göra detta med ren CSS beskrivs i stor utsträckning i ett tidigare inlägg,? Använda kryssrutor för att byta CSS och skapa Klicka händelser.?
I det inlägget lärde vi oss att köra en kryssruta och böja den till vår vilja.Det är inte den mest semantiska tekniken, men det är definitivt en spräng att leka med. För att få den här festen påbörjad lägger du till en etikett och kryssrutinmatning längst upp i kroppen i din HTML.
Steg 7. Light Switch CSS
I huvudsak är vad vi ska göra här dölja kryssrutan själv och stil etiketten så att den ser ut som en knapp. Anledningen till att detta fungerar är att i HTML kan etiketten för en given kryssrutan klickas precis som rutan själv för att växla till / från-läget.
För att dra av det här ställer du in etikettdisplayen till? Block?, Ställ sedan in en höjd, bredd, bakgrundsfärg, textjustering, typsnitt och marginal som nedan. Observera också att jag ställde positionen till? Fixed? vilket gör det möjligt för ljusströmbrytaren att synas när du rullar ner sidan. På svävar ändrar vi bara färgerna.
För att slutföra använder vi absolut positionering i själva kryssrutan och skjuter ut den till ingen mans land och döljer det effektivt från sidan.
Avstämning
Detta ger oss en liten knapp som blöder bort på vänstra sidan av sidan. Här är ett skott av de två staterna som vi har satt upp:
Steg 8. Ändra bakgrundsfärgen
Nu när vi har vår ljusbrytare inställd, är det dags att rikta in det i vår CSS och definiera?: Checked? stat. Den verkliga voodoo här är att vi kan klara oss på andra väljare och ändrar faktiskt bara vad som helst på vår demosida när knappen klickas. Låt oss börja med att ändra sidans bakgrundsfärg:
Här använde vi angränsande syskonkombination, som är inställd på att fånga några huvud? klass som följer omedelbart vår kontrollerade ljusbrytare. Detta kommer effektivt att göra bakgrundsfärgen mörk när strömbrytaren är avstängd.
Tricket
Den pittoreska delen här är att du måste knyta den andra väljaren till kryssrutan på något sätt för att det verkligen är en komplicerad (och troligen ganska ineffektiv) väljare. Vi kunde till exempel inte bara ta tag i kroppen, utan istället var vi tvungna att använda en syskonvalare som definierade förhållandet mellan kryssrutan och ett annat element. Du kan också dra av det med barnkombinator, som vi kommer att se i nästa steg.
Steg 9. Ändra massor av saker!
Nu när vi vet hur man använder ljusströmbrytaren för att byta objekt på sidan, kan vi gå nötter. Här ändrar jag textfärgen, bakgrundsfärgen och till och med bakgrundsbilden till ett nattfoto! Jag ändrade också h2: efter text att läsa? Av? så att rubriken kommer att växla mellan? Lyser på? och? Lyser av? som du spelar med växeln. Ganska cool!
Detta ger oss ett fint mörkt tema som användaren kan välja att aktivera.
Se den live
Allt vårt hårda arbete har löpt ut, det är inte dags att se frukterna av vårt arbete. Var noga med att klicka på ljusbrytaren till vänster för att se effekten. Gaffel också demo på CodePen och visa oss hur du skulle göra det ännu bättre!
demo: Klicka här för att starta.
Slutsats
Vi drog av många fina CSS-tricks idag med mycket liten ansträngning. Vi skapade en klickhändelse genom att kapra en kryssruta, använde förändrade pseudoelement och bytte ut det övergripande utseendet på en sida.
Som alltid tack för att du läste. Jag hoppas du lärde dig några saker längs vägen, gör jag alltid!