Ik heb gekozen voor de CSS Zen Garden. Bij de CSS Zen Garden is het de bedoeling om alle mogelijkheden van CSS te ontdekken. Hierbij mmoest je kiezen uit een context en twee eisen. Ik heb 2 contexten gekozen: print-stylesheet & prefers-reduced-motion. Voor de eisen heb ik gekozen voor: SVG toepassen & Responsive zonder media queries.
Mijn grootste uitdagingen zijn:
- Een visueel leuk/mooi uiterlijk verzinnen en creëren
- Responsive maken d.m.v. goed en slim gebruik te maken van relative units
- Classes en ID's vermijden
- CSS Grid toepassen en een stapje verder hiermee te gaan
- Onbekende functies gebruiken zoals clamp()
- Logica in CSS creëren
Ik heb inspiratie op gedaan voor mijn ontwerp:
In de opdracht-uitleg.pdf had Vasilis veel verschillende posters laten zien om inspiratie op te doen, deze trekken mij aan:
Ik heb daarnaast nog gezocht op Google, Dribbble , Behance, etc. naar afbeeldingen van food menu's en inspiratie opgedaan.
Schetsen
Ik ben geïnspireerd gaan schetsen:
Ik begon met wat leuke expirementjes:
Titel in spiegelbeeld
Deze titel staat nu in spiegelbeeld door middel van:
transform: scale(-1, 1);Grid
De gerechten staan naast elkaar door display: grid;:
Clip-paths
Met clip-path kan je een element uitsnijden in je gewenste vorm:
clip-path: polygon(25% 0, 5% 50%, 5% 60%, 50% 100%, 95% 60%, 95% 50%, 75% 0);Deze clip-paths kan je animeren, met een hover heb ik deze geanimeerd naar:
Door position: sticky; op de content van de gerechten te zetten krijg je een leuk scroll effect:
Hier scrollt de text mee tot aan de beneden rand van het gerecht.
Grid ging best soepel en zonder moeilijkheden.
clip-path was nieuw voor mij, ik heb zeker wat lopen puzzelen met de clip-path, omdat de paths best ingewikkeld zijn met alleen maar procenten of andere cijfers is het lastig te begrijpen. Maar met behulp van Clippy is het een stuk makkeljker om gewenste paths te maken. Ik heb daarnaast zelf lopen sleuten aan de cijfers etc en goed geëxperimenteerd.
Volgende week wil ik graag echt wat vormgeving gaan toepassen en een mooi geheel neerzetten.
Ik ben deze week meteen begonnen met experimenteren van de vormgeving, ik vond het spiegelbeeld effect van de titel wel leuk, maar qua vormgeving en uitstraling niet zoveel hebben. Door een gastspreker bij dit vak ben ik geïnspireerd geraakt om het volgende te maken:
Ik heb hierbij een :before selector gebruikt. Deze ziet er als volgt uit:
content: "R";
color: white;
display: block;
shape-outside: ellipse(100% 50% at -80% 50%);
width: 5rem;
height: 12rem;
float: left;
margin-right: -50px;
background: var(--color-red);
border-radius: 0% 100% 100% 0% / 50% 50% 50% 50%;Hier heb ik geëxperimenteerd met een combinate van shape-outside en border-radius. De shape-outside kende ik nog niet voordat de gastspreker dit introduceerde. Border-radius kende ik al wel, maar had hier nog niet echt mee geëxperimenteerd, ik kwam nooit verder dan border-radius: 20px;.
Kleine vormgeving toegepast aan de subtitles:
Hover:
Vormgeving van gerechten klein beetje aangepast:
Hover:
Vormgeving van sub-koppen:
Hierbij heb ik gebruik gemaakt van :before en :after. Deze heb ik tevens ook geanimeerd.
Ik ben best trots op de vormgeving van de sub-koppen. Ik vind de kleur leuk en het effect met die zwarte en lichtgroene letters erg pakkend. Hierdoor heb ik de achtergrond kleur veranderd:
In een thema-sessie van Vasilis over typografie heb ik geleerd over variable fonts. Deze fonts hebben meerdere aanpasbare attributen/eigenschappen dan normale fonts. v-fonts.com heeft veel leuke fonts en je kan meteen ermee experimenteren.
Ik heb Ancho uitgekozen om in mijn eigen website te gebruiken.
Deze heb ik als volgt geanimeerd:
Dit heb ik voor elkaar gekregen met deze code:
font-family: ANCHO;
font-variation-settings: "wght" 52;
animation: varFont 1s infinite alternate;
@keyframes varFont {
to {
font-variation-settings: "wght" 500;
letter-spacing: 2px;
text-shadow: -10px -10px 3px #cc4d4d;
}
}Ik heb de titel aangepast naar:
Ook hieraan heb ik een animatie on hover toegevoegd. Met letter-spacing en text-shadow.
Mes / CSS Logica
Ik heb een mes toegevoegd als SVG, deze interactief gemaakt met een checkbox. Deze mes "snijdt" door het woord logo heen en en dan komt er bloed:
Dit is gelukt met CSS logica, dat gaat als volgt:
input#switch:checked ~ label>.knifeSvg {
transform: rotate(50deg);
}Logica: Als de checkbox gecheckt is, dan moet de mes 50graden draaien.
Ik heb tijdens de kickoff meer gespeeld met logica. Bekijk dat hier.
Reduced motion
Ik ben ook begonnen met reduced motion, ik heb eerst op internet een klein beetje opgezocht wat dit betekent voor het web. Het houdt simpelweg in dat je animaties en bewegende beelden zoveel mogelijk vermijdt als mensen dit liever hebben.
Dit kan als volgt in css:
@media (prefers-reduced-motion) {
h2:before, h2:after {
animation: dissolve 2s;
}
main>section>article, main>article {
transition: none;
}
}Hier verminder ik de beweging in de sub-koppen en zet ik simpelweg een transition uit.
Ik ben blij/trots dat ik een stuk verder ben gekomen met mijn vormgeving, nu heb ik meer motivatie om er leuke dingen mee te doen en meer te experimenteren.
Ik heb mezelf uitgedaagd met de :before,:after en text-shadow properties.
Voor mij waren de variable fonts echt nieuw en vind dat ik daar van heb geleerd en iets leuks mee heb gemaakt.
Ik heb veel gepuzzled met hoe de titel eerst was, met shape-outside en border-radius, het is niet helemaal zoals ik wilde, maar heb er wel zeker van geleerd.
Ik wil voor volgende week(vakantie/afronding) meer responsiveness erin gooien, het meer als geheel maken, spelen met gradients en print style sheet toevoegen.
Ik ben begonnen met het afmaken van het geheel en de vormgeving.
Gerechten
Ik heb de titels van de gerechten gestyled en geanimeerd met text-shadows:
Ik heb gespeeld met layered text-shadows, dit houdt in dat je meerdere text-shadows toevoegt aan een element:
--textshadow-color1: black;
--textshadow-color2: white;
text-shadow: 0px 0px 0 var(--textshadow-color1), -2px -2px 0 var(--textshadow-color1), -4px -4px 0 var(--textshadow-color2), -6px -6px 0 var(--textshadow-color1), -8px -8px 0 var(--textshadow-color2),
0px 0px 0 var(--textshadow-color1), -2px 2px 0 var(--textshadow-color1), -4px 4px 0 var(--textshadow-color2), -6px 6px 0 var(--textshadow-color1), -8px 8px 0 var(--textshadow-color2);En deze op hover geanimeerd, door simpelweg de waarden de tegenovergestelde waarde te geven, 2px wordt -2px:
main>section>div>article>h3:hover {
text-shadow: 0px 0px 0 var(--textshadow-color1), 2px 2px 0 var(--textshadow-color1), 4px 4px 0 var(--textshadow-color2), 6px 6px 0 var(--textshadow-color1), 8px 8px 0 var(--textshadow-color2),
0px 0px 0 var(--textshadow-color1), 2px -2px 0 var(--textshadow-color1), 4px -4px 0 var(--textshadow-color2), 6px -6px 0 var(--textshadow-color1), 8px -8px 0 var(--textshadow-color2);
}De prijzen van de gerechten heb ik een pop-art achtig ontwerp gegeven met -webkit-text properties:
Met behulp van deze codepen heb ik geëxperimenteerd met deze properties:
main>section>div>article div {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
text-shadow: 2px 2px #ff1f8f, 5px 5px black;
transition: text-shadow .6s;
}
main>section>div>article div:hover {
text-shadow: 0px 0px #ff1f8f, 1px 1px black;
}Daarna heb ik elk gerecht gestyled met een display: grid;, om hier nog verder mee te experimenteren:
Ik heb hier gespeeld met grid-areas om de titel boven de beschrijving en prijs te houden:
display: grid;
align-items: center;
grid-template-columns: 90% 10%;
grid-template-areas:
"title title"
"description price";
/* Bij de elementen de grid-area geven */
grid-area: title;Voor de dynamiek/differentiatie heb ik de nth-child(even) een geanimeerde gradient gegeven:
De achtergrond heeft een repeating-conic-gradient() en met custom properties kan je de angle animeren:
main>section:nth-child(even) {
background-image: repeating-conic-gradient(from var(--conicHoek) at 70% 50%, var(--color-red), black, lightgreen, var(--color-red));
animation: rotateGradient 30s infinite alternate;
}
@property --conicHoek {
syntax: '<angle>';
inherits: false;
initial-value: .4turn;
}
@keyframes rotateGradient {
from {
--conicHoek: 0turn;
}
to {
filter: invert(100%);
--conicHoek: 1turn;
}
}Ik heb ook een filter toegepast voor een extra leuk effect:
Ik heb de quotes geanimeerd met ook een gradient en deze laten draaien:
Responsive main grid
Ik heb daarna een responsive grid zonder media queries toegepast:
Hierbij staan de gerechten op breed beeld naast elkaar, maar zodra je het scherm kleiner maakt gaan ze onderelkaar:
Dit gaat als volgt:
main {
--auto-grid-min-size: clamp(50%, 700px, 100%);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
}Ik had eerst --auto-grid-min-size: 700px;, maar daar kreeg ik wat problemen mee zodra het scherm kleiner werd. Dus ik ben verder gaan experimenteren en kwam toen met --auto-grid-min-size: min(100%, 700px);, dit loste het probleem op, maar ik wilde in week 1 mezelf uitdagen met clamp(), dus ben daar naar gaan zoeken en het is gelukt! :)
Print-style-sheet Nu ik tevreden was met het geheel ben ik begonnen aan de print style sheet. Deze initieer je zo:
<head>
<link rel="stylesheet" media="print" href="styles/print.css">
</head>styles/print.css
@media print {
/* code */
}Hier heb ik gekeken naar dat een restaurant ook moet uitkijken met print kosten, dus heb ik de kleuren verminderd. Gradients printen nooit mooi uit, dus heb die ook uitgezet. De gerechten heb ik precies formaat van a4 gegeven, zodat deze goed worden uitgeprint.
Tab-index
Om de website toegankelijk te maken voor mensen die alleen het toetsenbord gebruiken en met de toets tab navigeren heb ik handmatig tab-index toegevoegd aan de elementen.
Reduced motion
Ik heb het reduced motion stuk verder uitgewerkt door de animaties uit te schakelen en de text-shadows eraf te halen. De text-shadows bewegen niet, maar ze geven wel een dynamiek effect wat ook storend kan zijn.
Ik ben trots op de animaties en hierbij ook de reduced motion. Ik vind de gradients erg goed gelukt.
Ik ben ook heel blij met dat het is gelukt met de clamp() en responsive zonder media queries. Ik heb echt lang moeten tobben met die grid auto-fill en minmax. Ik heb dit ook nog geprobeerd met flexbox, maar dat mislukte.
Ik wil graag nog een navigatie toevoegen voor meer toegankelijkheid. En eigenlijk nog meer experimenteren met allemaal leuke animaties en coole css properties, maar ik ben zeker trots in hoever ik al ben gekomen!