In this course I will create an interactive webpage using CSS and HTML only. I will build features that are usually done with javascript.
I will have to pick a context and 2 restrictions as an extra challenge. I will have to think of a workaround which ultimately challenge me to be more creative!
- You understand the broader scope of CSS: You can show that CSS can be used for more than just styling web pages.
- You understand the progressive enhancement parts of CSS: You can show that you can use the cascade, inheritance and specificity in your project
- You understand the interactive parts of CSS: Is the UX fully enhanced within in given CSS scope?
- You have been experimenting: Have the learning goals been stretched?
Dark-mode
- Two-colors
- Responsive without media queries
- Print style sheet
Create different triggers with CSS and HTML to trigger the next stage.
My idea was to create a (glitchy) terminal with a bit of storytelling. The terminal isn't quite stable and this is part of the story. This terminal is in an infinite loop that always runs into the same error and let's you do the same things over and over again.
The concept is mostly on rails, meaning the effects mostly play automatically, but has some stages where it requires interaction from the user. I'm using different triggers to get to the next stage.
The prototype contains several stages. I took a lot of time to create workarounds with HTML and CSS to trigger the next stage.
A start screen where the user has to press a key to start the game. I've used a textbox with autofocus and required that is hidden from the user. When the user presses a key it is actually filled in to the textbox. I can trigger a next stage/sequence with :valid on the textbox.
/* show food-service */
[trigger="start"]:valid ~ [theme] {
display: block;
}
Because the textbox has required, when entering a character the textbox will become valid.
Next the user will have to select a theme. The user can choose a dark-mode (default) or a classic green mode. These work with the target pseudoclass. This will change the theme. but also allows me to trigger the next stage.
#body:target [food-service], #html:target [food-service] {
display: block;
}
Next an intro will play. No interaction from the user is required here. When the animationa are done, the menu pops up.
The user can select one of the four different menu's here. I've included some glitchy effects to illustrate this terminal is quite stable. The menu items are dark and unreadable from the start, but become readable on hover.
The last stage happens when the user has selected a menu./ The menu fails to load and the terminal runs into a critical error. It manages to reboot its systems, but the user has to start all over again.
The logo is a reference to Aperture Science from the Portal games. In this game you'll have to do all kinds of tests for a faulty AI.
Dark mode is used when the user prefers dark mode in its system. All the images above are in dark-mode. I also made another theme option called Classic. This theme uses green en red as its colors.
Both dark mode and classic mode can be selected manually.
The concept is responsive using relative values like percentages, vh/vw and I've used flexbox.
I'm only using 2 colors at a time, for both dark and classic themes. Black is also used, but black is the abscence of color.
I've created a seperate print.css file that only shows the menu. All terminal stuff is hidden and the menu items are shown.
- Create triggers without JS with checkboxes and input validation
- Blurring backgrounds
- Mix-blend-mode
- Create a terminal-like interface
- Better understanding of using gradients
- Transform effects
- rotate3D
- skew
- transform-origin
- ASCII art using the
preandcodeHTML tags - CSS variables
- Seperate a smooth animation into small steps. I've used this to create a type animation.
- Implementing automatic dark-mode
- Implementing manual dark-mode
- Better understanding of Flex.
- Using
flex-growto take all available space. - Better understanding of
::afterand::before - Custom HTML attributes with CSS
- Target pseudoclass
- More animation properties
- Declaring multiple animations and delays in a statement
- Clip-path