CSS to the Rescue @cmda-minor-web 2020 - 2021

Table of Contents

🚀 Purpose of Project

Week 1 👋

Week 2 💻

Week 3 💻

Week 4 🚨

⚙️ Installation

📁 Sources

👮 License

Deze README is een procesboek van afgelopen 4 spectaculaire CSS weken ✨ . Ik heb veel geleerd en erg veel geëxperimenteerd; dus neem een kijkje in mijn procesboek! 🚀

Eindproduct

Link naar live versie 🚀

GIF

---

Week 1

Kickoff

Ik heb onderzoek gedaan naar selectoren en toen heb ik een loginpage gemaakt daarover. Die is hier te vinden. Wanneer je ingelogd bent, zie je hetgeen wat Shabier en Sjors gemaakt hebben.

Ik heb hier gebruik gemaakt en research gedaan naar de selectors (parent selectors) :valid, :invalid, :focus-within , maar ook pseudo selectors als :hover, :focus en pseudo elements als :after. Hierdoor kwam ik achter de kracht van CSS.

Screenshot van hoe het login scherm eruit ziet:

Concept eindbeoordeling

Ik heb het het volgende concept bedacht:
Ik wil de HTML content van het menu pakken en daar een bepaalde huisstijl aan toevoegen. Mijn ideëen gaan nu uit naar een Swiss style design en die wil ik helemaal uitspitten en vervolgens wil ik de gerechten op de kaartjes weergeven en wanneer je er overheen hovert, dan draait hij om en zie je de ingrediënten erop staan. Overigens wil ik ook nog een soort functie aan kunnen zetten dat het van het rustige swiss design omtovert naar een erg druk design.

Context

Mijn keuze voor context is de prefers-color-scheme, omdat ik het uitdagend vind om 2 verschillende kleurthema's toe te passen. Overigens heb ik dit nog nooit gedaan, maar het lijkt mij zeker een uitdaging om dit een keer te doen. Dit brengt zeker ook wat bij aan de UX. Ik heb al een resource gevonden van MDN waarin ze alles over dit principe uitleggen.

Requirements

De eisen waar mijn product zich aan moet houden zijn*:

• SVG toepassen in shapes, masks én filters
• Twee kleuren

*Later ben ik zo diep in de materie gedoken dat ik me er helemaal niet meer aan gehouden heb

Inspiratie

Voor de layout en design heb ik een Pinterest bord gemaakt waarop ik al mijn inspiraties pin. Het bord is hier te vinden.

De verschillende onderdelen wil ik op deze manier verwerken, dat als je op een gekleurde pagina drukt, dat hij dan zichbaar wordt (zie hieronder). (Bron afbeelding)

De manier waarop ik de cards wil laten zien staat hieronder (Bron afbeelding):

Sketch

Ideëen voor het ontwikkelen

• CSS programming for :hover over page and then z-index?
• Gridbox
• Animation (@keyframes)

Week 2

Nieuwe ideëen

• Slider/carousel in plaats van paper-magazine
• Randomness color subjects
  • Media queries
• Header/titel applicatie
• Roteren van menu's (skew()) [uitgewerkt]

To-Do:

• Label for input
• Background image flip/animation.
• Dish cards flip -> uiteindelijk heb ik hier niet meer voor gekozen, omdat dat lelijk werd in het design.

Nieuwe schetsen

Stiekem programmeren met CSS

Het is me eindelijk gelukt om door middel van radio buttons een navigatie te maken en de cards te laten zien. Daarmee was ik erg aan het strugglen, maar nadat Vasilis zei dat ik de inputs in de root van de HTML moet zetten, konden de CSS selectors er wel bij en zo werkte de feature wel! Zie screenshots hieronder.

Before

After

Ook heb ik leren werken met radial-gradient, maar dat heb ik weer verwijderd, omdat dat niet aansloot en paste bij mijn design.

Week 3

Nieuwe ideëen

• Intro scherm met de titel van het restaurant [uitgewerkt]
• Background image gradient met een animation. Gaaf effect. [uitgewerkt]
• animatie maken [uitgewerkt] --> als raket en dan hover over h1 en dan zal raket verschijnen en weggaan
• header interactie met animaties
• prefers-color-scheme - Dark mode [uitgewerkt]:
  • Background dark gradient (custom properties veranderd)
  • Text color light (white)
• extra: media print (helaas niet uitgewerkt)

Header/titel zo breed als window

Random effect

Er gebeurt een nice random effect als je op een card hebt geklikt en daarna op een andere. Ze hebben dan allemaal een andere skew effect/richting. Daardoor gaan ze allemaal anders bewegen. Te gek!

Prefers-color-scheme

Darkmode - Titel

Darkmode - Menu

Screenshots tijdens het developen in chronologische volgorde

Week 4

Raket maken en animeren 🚀

Het is gelukt om een vorm te maken (een raket) en te laten bewegen over het scherm. Op het moment dat je over de titel van website hovert, zal de titel verdwijnen en de raket verschijnen.

Hier zie je hoe de applicatie werkt en kun je ervaren hoe de raket richting Pluto gaat 🚀

Geleerd (in een notendop)

• Veel animatie (@keyframes) probeersels
• transform: skew()
• transform: scale)
• filter
• filter: blur()
• filter: dropshadow()
• media prefers-color-scheme
• clip-path
• text-underline-position
• :after
• repeat(auto-fill, minmax(7em, 1fr))
• Custom properties
• CSS selectoren
• Krachtigheid CSS
• Specificity

⚙️ Installation

1. Clone the repository:

git clone https://github.com/ralfz123/css-to-the-rescue-2021.git

2. To run the app

python -m SimpleHTTPServer 8000

3. Go to localhost in the browser

http://localhost:8000/

📁 Sources

Credits to Sanne 't Hooft, Vasilis van Gemert, Thijs Spijker and Leonie Smits for giving interesting lectures about CSS and how to deal with it.

• CSS-TRICKS (n.d.). Awesome CSS tricks - CSS_TRICKS. Retrieved 18 February 2021 from https://css-tricks.com/
• CSS Selector Reference (n.d.). w3schools.com . Retrieved 15 February 2021 from https://www.w3schools.com/cssref/css_selectors.asp

👮 License

This project from Ralf has a MIT © License