rowinruizendaal / css-to-the-rescue-2021

Resit

Sketch

Darkmode

Lightmode

What do i want to make?

I want to make a slick food menu card based on Grid/flexbox.

requirements

Context

prefers-color-scheme

Requirements

Apply SVG in shapes, masks and filters

Two colours

Dark theme:

#E86A92; #2B2D42;

Light theme:

#1A5E63; #FFFF;

Week 1 :

Experimented with:

Css grid

CSS selectors

Week 2:

I found out that i was not happy with what I deliverd at week 1, so I decided to make something totally diffent:

Experimented with:

Transform - Rotate

Transparancy

animations

Week 3:

I found out that i was not happy with what I deliverd at week 1 & week 2, so I decided to make something again totally diffent:

Experimented with:

Linear-gradient

repeating-linear-gradient

blend-mode

animations

animation-delay

filter: hue-rotate, dropshadow

box-shadow

skew

svg: Filter, mask & shapes

Dark mode

Light mode

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

Wij vinden het web fascinerend. De laatste jaren is CSS een volwassen en zeer krachtige taal geworden (niet langer een bottleneck - integendeel). Veel van de (nieuwe) CSS-lekkernijen worden echter nog niet ten volle benut. Sommige delen van de spec worden onterecht (nog) niet bemind, andere delen zijn zo groot en complex dat we mogelijkheden nog niet hebben doorgrond. Aan jou de mooie opdracht om de onontgonnen delen van de CSS-wereld in kaart te brengen.

In dit vierweekse vak ga je experimenteren met (voor jou) nieuwe CSS technieken - om daarna/mee een innovatieve, experimentele én aangename ervaring te creëren - met vanilla CSS en HTML dus (frameworks, preprocessors, libraries en JS zijn niet toegestaan).

Nb. Het experiment wordt gewaardeerd - zelfs/zeker als het niet (helemaal) lukt. Voel je vrij om verder te gaan dan de CSS-technieken die je al beheerst.

Dingen om vooraf te doen

• 🔱 Fork deze repository
• ✅ Enroll je voor de minor via de courselector (dan kun je je werk straks ook op DLO opleveren)
• 🎥 Camera's aan tijdens lessen en co (zorg dat je webcam werkt)
• 📒 Bekijk het programma (pdf 30MB) en de kennismakingsoefening alvast even

Opdrachten

Het vak bestaat uit:

• Een kennismakingsoefening
• De eindopdracht

De beoordelingscriteria voor de eindopdracht op een rijte.

Programma

Het vak beslaat 4 weken. Bekijk de kick-off presentatie (pdf 30MB).

In Teams vind je de Excel met de indeling en planning. Daar schrijf je je ook in voor themasessies en het eindgesprek.

Colleges, lessen en gesprekken vinden plaats in Teams.

Docenten

• Vasilis van Gemert
• Thijs Spijker
• Sanne 't Hooft
• Leonie Smits

Leerdoelen

• Je kunt experimenteren met (voor jou) nieuwe css-technieken - om de mogelijkheden op waarde te schatten en te gebruiken waar gepast.
• Je hebt begrip van de volle kracht en mogelijkheden van CSS. Je laat zien dat CSS meer kan dan allen web pages 'stylen'.
• Je hebt begrip van de interactie-technieken van CSS (en HTML). De UX is aangenaam bruikbaar binnen de gekozen context(en).
• Je hebt begrip hoe progressive enhancement elegant toe te passen. Je laat zien dat je cascade, inheritance en specificity kunt toepassen.

De Selector First CSS & No JS aanpak

Het eerste uitgangspunt is dat je geen ID's en classes gebruikt. Niet omdat ze niet nuttig zijn, maar om te oefenen met de vele CSS selectoren die je tot je beschikking hebt. ID's mag je alleen gebruiken om de :target selector te triggeren. En als het echt echt echt niet anders kan, heb je permissie om een paar classes toe te voegen.

Een tweede uitgangspunt is dat je geen JS gebruikt (i.i.g. zo min mogelijk - het vak heet niet voor niets CSS to the Rescue). Wat met CSS en/of HTML kan mag je niet met JS realiseren en het is niet toegestaan om CSS properties met JS aan te passen. We vinden het daarentegen wel interessant dat je verkent waar JS en CSS elkaar raken/versterken, bijv. het uitlezen en aanpassen van CSS custom properties, of bijv. de animationstart, animationcancel, animationiteration en animationend events gebruiken.