/css-to-the-rescue-1920

CSS to the Rescue @cmda-minor-web 19-20

Primary LanguageHTMLMIT LicenseMIT

CSS to the Rescue @cmda-minor-web 19-20

De opdracht

Voor het vak is het de bedoeling dat we zoveel mogelijk css selectoren en properties gebruiken. Belangrijk bij deze opdracht is dat we zoveel mogelijk gaan experimenteren en nieuwe dingen leren. Het is dus belangrijk dat je niet perse veel maakt maar juist zoveel mogelijk nieuwe dingen ondekt ongeacht je er helemaal uit komt.

Concept

Ik ben begonnen met het template van het restaurant menu. Het idee was dat ik elk gerecht een eigen omgeving zou geven en elk omgeving met zoveel mogelijk interactie te geven. Ik merkte tijdens het uitwerken dat met 1 omgeving mezelf al helemaal kon verliezen en heb er op een goed moment voor gekozen om het Vis gedeelte zo uitgebreid mogelijk te werken.

Context

Dark mode

Restriction

Responsive without media query Design responds to temprature (Niet helemaal gelukt)

Nieuwe dingen die ik geleerd heb

::selection
/* mouse animations */
animate-direction
counter-reset
counter-increment
grid-area
place
max-concent /* van css grid */
grid-template-areas
/* het gebruiken van data attributen in je content door middel van attr() */
filert
clip-path
/* radial gradient */
backdrop-filter
mix-blend-mode
all:unset
/* de checkbox hack */
:valid
focus within
perspective
font-variant
dark-mode

Naast all deze code gerelateerde dingen heb ik ook andere dingen geleerd over/door css. Door zoveel met css te werken en vooral door met dingen te werken die je normaal gesproken niet in de praktijk zou gebruiken ga je op een andere manier naar website's kijken. Je gaat een beetje weg van het photoshop design die je krijgt en meer denken wat voor invloed interactie op het design zal hebben. Je design gaan meer tot leven komen waardoor je juist iets extra's sterks toevoegd aan het web. 1 van de sterke dingen van het web is dat het erg toegangelijk is. maar een 2de voordeel wat je tijdens dit vak goed leerd is dat het ook heel interactief kan zijn en levend. En dat onderschijt ons juist van een allerdaagse magazine.

Ook heb ik geleerd om niet teveel in je concept te blijven hangen. Als je een concepet bedenkt ga je (onbewust) heel erg binnen de scope denken over dingen waarvan je weet dat het kan. Het moment dat ik concept los liet en ging kijken wat css nog meer zou kunnen was het moment dat ik veel meer over CSS ging bijleren.

dingen die ik nog had willen uitproberen

een grid met percentages uitbouwen: https://medium.com/@danwebb/how-to-build-complicated-grids-using-css-grid-609b1197cf75

Meer typografische css uitproberen. Ik ben er recent achter gekomen dat css op topografie een grote wereld is die naar mij mening nog niet veel verkent is en dat de mogelijkheden met typografie verder gaat dan je fantasie doet denken

Credits

Big thanks to Isabel Mik for helping me out with the art-work and design