CSS Zen Garden was een initiatief 20 jaar geleden om de mogelijkheden van CSS te verkennen: hoe kon je destijds CSS gebruiken om statische HTML om te zetten naar een visueel meesterwerk. Dezelfde taak nu voor jou, maar nu. Voor deze cursus maak ik een restaurant-menu met verschillende contexten en beperkingen
Als opdracht voor CSS To The Rescue heb ik gekozen voor CSS Zen Garden - 2021 version. Deze opdracht bestaat uit het ontwerpen van een menu-kaart met verschillende gerechten.
- Prefers-color-scheme: Media query waarbij er gebruik kan worden gemaakt van dark & lightmode, op basis van de OS instellingen.
- Prefers-reduced-motion: Media-query voor degene die een gereduceerde website willen hebben, oftewel zonder animaties.
- Input met radio-buttons: Content laten zien op basis van input via radio buttons.
- Responsive without media-queries (min-width & max-width)
- Level AAA (Lighthouse check 100%)
De komende weken wil ik mij voornamelijk focussen op het werken met verschillende variabelen, animaties en een bestands-structuur op te zetten. Al deze elementen zijn voor mij nog nieuw, en wil ik in combinatie met de context & requirements implementeren binnen mijn ontwerp.
Als eerste versie heb ik een schets opgezet waarbij er alle menu-items over elkaar heen worden 'gestacked'. Hiermee wordt er één grote stapel gecreëerd tijdens het scrollen door het menu. De gerechten worden met position: sticky en een transform: rotate(x deg) op hun plaats gezet.
Tegenover concept 0.1 vanuit week 1, heb ik het roer volledig om gegooid in week 2. Zoals hieronder te zien is, is het ontwerp van de pagina dusdanig veranderd. Bovenin de pagina is er een header element, welke de gehele hoogte van de viewport in beslag neemt, gevolgd door een navigatie-menu, met daaronder de bijbehorende elementen. Dit wordt gedaan met behulp van een input[type='radio'], waarmee de bijbehorende content wordt getoond.
Als thema van mijn pagina heb ik gekozen om glitch effecten toe te voegen. Vooralsnog alleen op de H1, maar het doel is om hier een terugkerend element van de maken op de site.
Om een hoog contrast te hebben (minimaal 7:1), heb ik er voor gekozen om twee uitspringende kleuren te gebruiken. Uiteindelijk zijn het de kleuren donkerblauw (rgb(34, 31, 62)) & beige (rgb(242, 195, 153)) geworden, welke een score van 9.77 haalt volgens de website www.contrast-ratio.com, wat op basis van de WCAG 2.0 (Leven AAA) wordt gemeten.
Voor het eerst heb ik gebruik gemaakt van variabelen die ik in de CSS code nest, met het gevolg dat ik variabelen kan hergebruiken, en benoemen. Ook heb ik voor het eerst in CSS met input-navigatie gewerkt. Ik heb gebruik gemaakt van `input[type='radio'], en dat ging me vrij goed af.
Ik ben gaan voortborduren op het concept wat ik in week 2 heb opgebouwd. Ik heb onder meer mijn hele CSS structuur overhoop gehaald, om hier een logisch systeem voor te maken voor mijzelf. Ook heb ik met verschillende kleuren geëxperimenteerd, en heb ik een 3D-rotatie toegevoegd aan mijn idee, evenals nog meer toevoegen van glitch-elementen binnen mijn pagina.
Verschillende nieuwe elementen die ik hier aan heb toegevoegd is de :is() selector binnen CSS, waardoor je kortere code kan schrijven, om de elementen aan te roepen. Ook heb ik gebruik gemaakt van tabindex='0' en de focus state, om zo te kunnen navigeren binnen de website.
Ook heb ik de navigatie opnieuw geschreven. In plaats van het display property om te gooien naar block in plaats van none, wordt er nu gebruik gemaakt van een transform: translateX(). Hierdoor kan er op de handeling een transitie worden getoont, waardoor het menu vloeiend beweegd.
assets/
+-- css/
| +-- animations/
| | +-- keyframes.css
| +-- footer/
| | +-- footer.css
| +-- header/
| | +-- header.css
| +-- main/
| | +-- glitches/
| | | +-- glitches.css
| | +-- items/
| | | +-- item.css
| | +-- list/
| | | +-- list.css
| | +-- navigation/
| | | +-- navi.css
| | +-- main.css
| +-- media/
| | +-- light_dark.css
| | +-- motion.css
| +-- states/
| | +-- focus.css
+-- index.htmlAan de hand van deze structuur heb ik er voor gekozen om alle code-onderdelen op te splitsen. Ik heb er bewust niet voor gekozen om atomic web-design in mijn CSS-structuur te implementeren doordat ik dit zelf niet fijn vind werken, met enkel CSS. Binnen frame-works komt dit beter tot zijn recht, doordat alle code van een desbetreffend element dan bij elkaar staat.
Zodoende is mijn keuze geworden om alle elementen los te behandelen in een header, main en footer folder, waarin de hoofd-elementen worden gestyled. Randzaken zoals media-queries, keyframes & states staan ook in een losse folder, doordat dit geen directe invloed heeft op de styling van een element.
Ik heb onder meer geëxperimenteerd met de twee-kleuren restrictie. Hiervoor heb ik gebruik gemaakt van de CSS filters. Denk hierbij aan brightness(100%), hue-rotate(100deg), saturate(100%) en ga zo nog maar even door. Helaas heb ik door mijn vele glitch-toevoegingen hier van af moeten stappen, omdat hier de kleuren rood, groen en blauw veelvoudig werden gebruikt.
Een van mijn requirements was om goed te scoren op level AAA van de WCAG. Dit is onder meer te meten met de LightHouse tool, en hierbij is een score van 100% op basis van accessability naar boven gekomen. Enkel op basis van SEO is er geen 100% score behaald, dit was dan ook geen vereiste om level AAA te behalen, wat staat voor de accessabilty van een website.
De website is hier te bijken: cssttr.netlify.app
git clone https://github.com/joordy/css-to-the-rescue-2021.git- W3docs. (2020, July 14). How to Create Glitch Effect With CSS. Retrieved February 17, 2021, from https://www.w3docs.com/snippets/css/how-to-create-glitch-effect-with-css.html
- MDN. (2021, February 19). animation-fill-mode - CSS: Cascading Style Sheets | MDN. Retrieved March 02, 2021, from https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
- Perez, J. A. (2019, September 2). Carousel - CSS only. CodePen. Retrieved February 12, 2021, from https://codepen.io/JonAnderDev/pen/wBopXo
- Palladino, D. (2015, December 3). VHS CRT Paused. CodePen. Retrieved February 19, 2021, from https://codepen.io/derekjp/pen/jWNazq
- Graham, G. (2019, January 4). :is(). CSS-Tricks. Retrieved March 03, 2021, from https://css-tricks.com/almanac/selectors/i/is/
This is a repository which is licensed as MIT. Developed by Jordy Fronik ©️ 2021.