@cmda-minor-web 2020 - 2021
Bij dit vak ga ik alle hoeken van CSS bekijken. Met pure CSS ga ik een menukaart visualiseren en een print stylesheet in elkaar zetten. Door dit vak hoop ik beter te worden met CSS, met bijvoorbeeld selectoren clip-paths en animaties etc. Beoordelingsformulier van deze course.
- overschrijven van variabelen
- clip-paths
- responsive design zonder media queries
- background-gradients
- puur CSS navigatie
- :target selector
- section:not(section:target) om alles weg te halen wat niet is getarget
- CSS vormen met before en after
- clamp()
- vormen maken met CSS
- keyframes en animaties
- print stylesheet
Deze week ben ik begonnen met responsive design. Hier was ik al wat mee begonnen omdat de gerechten met flex naast elkaar staan, maar alles moet nog in elk formaat kunnen vallen. Om dit te doen heb ik onderzoek gedaan naar verschillende methoden zoals clamp en minmax. het responsive maken van de website was niet al te moeilijk omdat ik de layout niet al te moeilijk had gemaakt. Evengoed heb ik er veel van geleerd om het zonder mediia queries te doen. Vooral de fonts aanpassen naar een passende en leesbare oplossing was hier de uitdaging.
Om de print stylesheet goed te kunnen laten werken moet er een print optie worden aangevinkt. De "achtergrondbeelden" of "Bakcground graphics" moeten aan staan om de pagina te laten werken, anders worden alle kleuren niet meegegeven aan de print, en ziet alles er heel leeg en wit uit. Om dit duidelijk te maken heb ik een extra uitlegtekst aan de HTML toegevoegd, waardoor de gebruiker kan zien wat er moet gebeuren om het werkend te krijgen. Deze tekst is in dezelfde kleur als de achtergrond. Wanneer de optie is aangevinkt is de tekst niet meer te zien op de nu wel zichtbare achtergrond, omdat deze dezelfde kleur zijn.
Blend modes zijn ook in andere programma's te vinden en zijn handig om verschillende afbeeldingen met elkaar te blenden. Photoshop heeft ook blend-modes, en deze zijn vergelijkbaar met de CSS blend-modes. Zo is het mogelijk om verschillen in afbeeldingen te highlighten of om een bepaald patroon of kleur in een afbeelding door te drukken. De CSS attributen voor blend-modes zijn background-blend-mode: (voor background images en kleuren); en mix-blend-mode: (voor 2 elementen);. Dit is een lijst van de CSS blend-Modes die beschikbaar zijn:
- color
- color-burn
- color-dodge
- darken
- lighten
- overlay
- screen
- multiply
- difference
- exclusion
- soft-light
- hard-light
- hue
- saturation
- luminosity
- normal
Filers zijn handig toe te passen op afbeeldingen. Normaal pas je wel eens wat instellingen aan als je een afbeelding op instagram zet. Dan maak je de foto bijvoorbeeld iets lichter of pas je de temeratuur iets aan. Deze instellingen heb je ook in CSS met het filter: ; attribuut. Dit is een lijst van de filters die te gebruiken zijn:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
Filters zijn opvolgbaar, en je kan ze dus achter elkaar neerzetten. Dit scheelt ruimte in je code en ziet er als volgt uit: filter: contrast(120%) hue-rotate(15deg) brightness(0.9);
Ook heb je in CSS clip paths. Hier zijn handige generators voor te vinden online, zodat je zelf niet alle punten hoeft neer te zetten. In een clip path kan een afbeelding geplaatst worden. Deze afbeelding krijgt vervolgens de vorm van de clip-path, dit kan een leuk effect zijn voor bijvoorbeeld parallax scrolling of een wondow effect. De documentatio is als volgende:
.container {
clip-path: polygon(
20% 0%,
0% 20%,
30% 50%,
0% 80%,
20% 100%,
50% 70%,
80% 100%,
100% 80%,
70% 50%,
100% 20%,
80% 0%,
50% 30%
); /* clip path of a cross */
}
na de kennismaking ben ik gaan brainstormen over mijn concept. Al snel wist ik dat ik de menu kaart ga vormgeven, en dat ik dit ga doen met 2 kleuren, responsive zonder media-queries en een print- stylesheet. De twee kleuren vind ik zelf een leuke uitdaging, en zie ik veel kansen in het gebruiken van blend-modes en filters. Responsive zonder media-queries is een uitdaging waarbij ik veel ga leren, omdat er veel mogelijkheden zijn voor responsive design waar ik niet vanaf weet. De print stylesheet heb ik gekozen omdat ik dit een interessant element vind om meer over te weten te komen, en daarbij past het ook goed bij het onderwerp.
Mijn vormgeving ga ik baseren op de stijl van een krijtbord. Hiervoor heb ik gekozen omdat je vaak bij restaurants buiten een krijtbord ziet staan, en het dus goed bij een restaurant style past. Daarbij geeft het ook heel veel uitdaging om het met css te maken, omdat het niet allemaal rechttoe rechtaan is in de stijl van een krijtbord. Alles is net even anders en dit geeft mij mogelijkheden om te experimenteren met verschillende technieken. Daarnaast lijkt het mij leuk om mezelf uit te dagen om een origineel statisch voorwerp dynamischer te maken en interactief te maken door de mogelijkheden die CSS te bieden heeft.