CSS to the Rescue repository van Dante Piekart
Thema: Control Panel
Getest op Google Chrome voor Mac
Inspirate Mijn grootste inspiratiebronnen voor dit project was het spel Please Don't Touch Anything en het voorbeeld Key Panel. Ik wil een vergelijkbare interactie creëren met een controlepaneel dat verschillende interactiemogelijkheden biedt. Deze componenten kunnen bestaan uit knoppen, hendeltjes, key-pads, etc. De uiteindelijke uitkomst ben ik nog aan het uitwerken.
Componenten Het begin van het project wil ik laten lijken op de start van het spel Please Don't Touch Anything, met een rode knop op een paneel. Hiervoor heb ik een Codepad-voorbeeld gevonden. Het spel draait er om dat de gebruiker 100 manieren moet uitvinden om de aarde te vernietigen. Het is een puzzel spel met honderden verschillende soorten interacties. Ik wil inspiratie nemen uit deze interacties.
Een screenshot van het spel met allemaal verschillende interacties en componenten.
Art Style De artstyle van mijn project wil ik laten lijken op die van het spel Please Don't Touch Anything. Ik ga proberen een volledig pixelachtig design te creëren. Ik heb een CodePen-voorbeeld gevonden dat dit effect met een SVG-filter realiseert.
Voor de "textures" wil ik gebruikmaken van lineaire gradients. Deze gradients wil ik direct in elkaar laten overlopen om zo een pixelachtig effect te creëren.
Achtergrond
Ik ben begonnen met het opzetten van de achtergrond. Hiervoor heb ik een lineaire gradient gebruikt gelijk in elkaar overloopt.
Eerste versie van linear gradient achtergrond.
Grote Rode Knop Voor het eerste element, een grote rode knop, heb ik een voorbeeld van Codepad gebruikt. Dit voorbeeld bestaat uit drie verschillende componenten om een werkende 3D-knop te creëren. Het maakt gebruik van:
- Hoofdelement: Onderkant van knop
- ::Before: Bovenkant van knop
- ::After: Opvulling midden van knop
In combinatie met :active-animaties zorgt dit voor een mooie en functionele 3D-knop.
Ik heb grote delen van de voorbeeldknop overgenomen voor mijn eigen knop, met enkele aanpassingen in de styling, zoals het verwijderen van de border. Verder is de knop grotendeels hetzelfde gebleven.
Wel heb ik er voor gezorgd dat de knop relatief semantisch is, aangezien dat in het voorbeeld niet het geval was.
Voorbeeld knop van Codepad, gebruikt ter inspirate.
Eerste verie van de grote rode knop.
Feedback
- Goed begin van project
- Voor pixel effect, speel met SVG pixelate filter
- Linear gradient achtergrond kan efficienter
- Documentatie verbeteren
Vooruitgang
- Achtergrond
- Control panel
- Eerste versie van werkende grote rode knop
Volgende Week
- Feedback documentantie verwerken
- Feedback linear gradient optimalisatie verwerken
- Meer functies toevoegen
- nadenken over uiteindelijke uitkomst
Grote Rode Knop
Vorige week heb ik het eerste element gemaakt: een grote rode knop. Oorspronkelijk was deze knop gemaakt met een <button>-element, rechtstreeks gekopieerd uit de voorbeeldcode. Echter, ik kon geen manier bedenken om verdere interacties toe te voegen aan dit element. Daarom heb ik ervoor gekozen om het te vervangen door een checkbox.
Uiteindelijke Uitkomst Ik heb nagedacht over de uiteindelijke uitkomst van dit project. Mijn idee is om enkele interacties toe te voegen, waarna de gebruiker de aarde kan laten ontploffen.
Nieuwe Functies Deze week wil ik me focussen op het aanpassen van de grote rode knop, van een button naar een checkbox. Daarnaast lijkt het me leuk om een sleutel-draai-interactie toe te voegen. Aangezien ik uiteindelijk de aarde wil laten ontploffen, lijkt het me interessant om een soort flow te creëren, zoals bij een nucleaire onderzeeër, waarbij je eerst sleutels moet draaien om daarna de grote rode knop in te drukken.
Grote Rode Knop
De eerste versie van de grote rode knop was gemaakt met een <button> element.
Eerste versie van de grote rode knop code.
Om deze code aan te passen naar een checkbox, heb ik gekeken naar de code van het voorbeeld Key Panel. Dit voorbeeld maakt gebruik van een grote checkbox die onzichtbaar op de achtergrond is, en een div die als visueel element wordt gebruikt.
Tweede versie van de grote rode knop code.
Pixel Filter Ik heb gekeken naar het voorbeeld van de pixelfilter. Ik begrijp niet helemaal wat de filter precies doet, maar het lijkt te werken wanneer ik de code toepas op de volledige body. Echter, de filter zorgt voor een vreemd effect op sommige plekken, een soort glitch-effect. Niet alles wordt precies afgesneden en uitgelijnd. Ik heb wat met de code gespeeld en het is me gelukt dit gedeeltelijk op te lossen. Maar een ander probleem was dat mijn elementen niet perfect uitgelijnd waren met de filter. Dit gaf een oneven effect, dat meer als een echte filter aanvoelde dan als een stylistische keuze. Daarom heb ik ervoor gekozen om de filter niet toe te passen en me meer te focussen op een "minimalistisch" en "strak" design.
Pixel effect op de grote rode knop.
Linear Gradient Door de feedback van Sanne heb ik de linear gradient verbeterd.
Verbeterde versie van de linear gradient achtergrond.
Door een 0 voor de nieuwe gradient te zetten zeg je tegen de CSS dat de nieuwe kleur direct na de vorige moet beginnen.
Responsive De behoefte om de applicatie responsive te maken kwam voort uit het idee dat ik meerdere interacties in het project wilde hebben. Ik heb de knop momenteel drie keer gekopieerd en de code zodanig aangepast dat de knoppen zich aanpassen aan alle schermformaten.
Demo van de responsiveness van de website.
:has Om het idee te creëren dat de gebruiker twee "fail-safes" moet gebruiken voordat de "detonate"-knop werkt, heb ik Roel om hulp gevraagd met betrekking tot de werking van :has. Dankzij zijn hulp is het me gelukt om ervoor te zorgen dat de gebruiker eerst knop 1 en 3 moet indrukken voordat knop 2 werkt.
Demo van de fail-safe.
Code van de fail-safe.
Nesting
Tijdens het schrijven van de responsive code heb ik ook besloten mijn CSS te nesten. Ik heb de code zodanig aangepast dat alle stijlen voor het formulier genest zijn binnen de <form>-tag.
Feedback
- Speel met een iritant knoppen spel, waar de ene de ander uit zet
- zet de sizes van de elementen in custom vars
Vooruitgang
- button veranderd naar checkbox
- interactie toegevoegd door de middleste knop uit te zetten voordat alle andere knoppen zijn ingedrukt
- alles responsive gemaakt
Volgende Week
- Meer elementen toevoegen
- "laatste" knop animatie maken
- Custom vars implementeren
- Inspirate, Key Panel
- Voorbeeld, Codepen SVG Pixel Filter
- Hulp Roel, :has
Verandering Ik vind het altijd grappig hoe ik na het weekend met compleet nieuwe ideeën kom en mijn project elke week weer omgooi. Dat was deze week niet anders. In deze week lees je hoe ik compleet nieuwe functies heb ingebouwd, bestaande functies heb aangepast of zelfs verwijderd omdat ze niet meer pasten.
Het Einde van de Wereld
Deze week heb ik me vooral gericht op de gebruikerservaring van dit project. Hoe verloopt de interactie en wat is het uiteindelijke doel? Ik kwam op het idee om een scenario uit het spel Please Don't Touch Anything uit te werken—specifiek het opblazen van een stad. Daarvoor heb ik een gif gevonden uit het spel waarin dit gebeurt.
gif van stad die explodeert.
Ik heb een scherm gemaakt en labels toegevoegd aan de knoppen om de gebruikerservaring te verbeteren.
Layout van de applicatie.
Wanneer de gebruiker op alle 3 de knoppen drukt explodeert de stad.
Voledige flow van de applicatie.
Nesting & Comments
Op dit punt werd mijn code steeds moeilijker leesbaar. Ik had zoveel _ :has_-statements gebruikt dat het, gecombineerd met een gebrek aan comments, veranderde in een wirwar van functies. Daarom besloot ik mijn code volledig opnieuw op te bouwen—van HTML tot CSS—met een betere structuur, nesting en (redelijk) semantische code.
Veel elementen die bij elkaar horen, heb ik netjes genest om de leesbaarheid te verbeteren.
Code van de big red button, met verbeterde nesting.
Daarnaast heb ik door mijn hele project comments toegevoegd—en zelfs een kleine easter egg.
Intro Tekst
Ik wilde mijn applicatie toch een cinematische uitstraling geven. Daarom heb ik een introtekst toegevoegd.
Introtekst van de applicatie.
Om dit te realiseren, heb ik gebruikgemaakt van een techniek die ik tijdens de lessen Browser Technology heb geleerd. Met behulp van <h1> en ::after kan ik de content van de H1-tag dynamisch invullen.
Code van de introtekst.
Explosion
Wanneer de gebruiker uiteindelijk de stad opblaast, wilde ik een animatie creëren die de illusie geeft dat de gebruiker zich dichtbij de stad bevindt en daardoor mee trilt. Hiervoor heb ik een eenvoudige shake-animatie gemaakt, die wordt geactiveerd zodra de detonate-knop wordt ingedrukt.
Code voor de detonatie-animatie.
Media Queries
Ik heb mediaqueries op twee plekken in mijn applicatie toegepast:
- Om te voorkomen dat de pagina te breed wordt.
- Om de explosie-gif groter weer te geven op kleinere schermen.
Thuis gebruik ik een ultrawide monitor en merk ik dat veel websites geen rekening houden met deze aspectratio. Dit leidt vaak tot een te brede lay-out en een inefficiënt gebruik van de ruimte. Hoewel mijn website relatief simpele content heeft, ontstaan op brede schermen kleine visuele glitches en worden sommige elementen te groot. Door een maximale breedte op de <main> te zetten, voorkom ik dat de lay-out op ultrawide schermen uit verhouding raakt.
Daarnaast heb ik ervoor gezorgd dat de video-viewport op kleinere schermen groter wordt, zodat de explosie goed zichtbaar blijft.
Feedback
- Media queries niet goed geimplementeerd
- Style queries gebruiken inplaats van :has
- Meer variabelen gebruiken
Vooruitgang
- Flow afgemaakt
- Explosion animatie
- Intro tekst
- CSS nesting
- Container Queries
- Comments
Volgende Week
- Laatste puntjes op de i zetten
- Feedback verwerken
- Container Queries
- CSS Nesting
- Hulp Roel, h1:before content
Style Queries
Ik heb vorige week feedback gekregen van Sanne over het gebruik van Style Queries in plaats van :has(). Daarom heb ik een paar bronnen gevonden die mij daarbij kunnen helpen:
CSS Herbouwd
In de afgelopen weken is mijn code steeds uitgebreider geworden. Uiteindelijk werd mijn project, zelfs met comments, een beetje verwarrend. Daarom heb ik tijdens het aanpassen van mijn :has-selectors naar @container style queries besloten om mijn volledige CSS opnieuw te schrijven en op te bouwen.
Ik heb tijdelijk een nieuw bestand aangemaakt en stap voor stap alle onderdelen gekopieerd, terwijl ik oude en overbodige code heb verwijderd. Tegelijkertijd heb ik duidelijke comments toegevoegd en de namen van animaties en variabelen verbeterd. Daarnaast heb ik veel animatiewaarden in variabelen gezet, zodat ik mijn animaties gemakkelijker kan aanpassen.
Ik heb dus ook bijna alle :has-selectors naar @container style queries veranderd.
Oude selector voor wanneer alle knoppen zijn ingedrukt.
Nieuwe selector voor wanneer alle knoppen zijn ingedrukt.
Om de code overzichtelijker te maken, heb ik deze beter genest. Hierdoor kunnen gebruikers hele codeblokken in één oogopslag bekijken, zonder elementen uit andere delen van het document te hoeven zoeken.
Bovendien heb ik bovenaan mijn CSS-bestand een inhoudsopgave toegevoegd, zodat gebruikers eenvoudig met Cmd/Ctrl + F door de verschillende secties van de code kunnen navigeren.
Inhoudsopgave van het CSS-bestand.
Resetknop
Op het laatste moment kwam Sanne nog even langs om mijn code te bekijken. Hij merkte op dat mijn resetknop in de HTML niet semantisch was.
Ik heb de knop aangepast naar een <button> met het type reset en deze binnen het hoofdformulier geplaatst. Hierdoor was het niet nodig om een extra formulier aan te maken, wat me een aanzienlijke hoeveelheid code bespaarde. Omdat ik deze wijziging maakte nadat ik mijn CSS had herschreven, was het relatief eenvoudig om de aanpassing te implementeren.
Het resultaat is dezelfde functionaliteit, maar met een veel semantischere HTML-structuur.
Oude resetknop.
Nieuwe resetknop.
Ik vond dit project ontzettend leuk, leerzaam en uitdagend. Het begon met een eenvoudig concept, geïnspireerd door "Please Don't Touch Anything", en door de weken heen heb ik geëxperimenteerd met technieken zoals:
- Nesting
- Style Queries
- CSS Animaties
- Checkbox Animaties
De waardevolle feedback van medestudenten en docenten hielp me mijn code en ontwerp te verfijnen, en het gedetailleerd documenteren van elke stap heeft me geholpen te werken aan mijn leerdoel voor deze minor.
- Style Queries Smiley Voorbeeld
- Style Queries Voorbeelden
- Hulp Nils, fixing fade animatie