We’ve discussed a number of ways to add content to a document, position it, organize it in columns, and make it responsive. This week, we’ll continue to practice these techniques while creating a dynamic and visually striking responsive website.
The challenge of this week’s exercise is to create a digital poster for an event. The type of event you want to feature(music, gallery show, broadway performance, etc.) is up to you, but the event must be upcoming some time in the near future. The poster needs to be visually captivating. It should immediately grab the viewer’s attention and make them want to know more about the event. The poster must function well when viewed at a variety of screen sizes.
Techniques you’ll need to use:
Flexbox – creating rows and columns, aligning items using margin.
CSS animations – create striking visuals with CSS to help grab the viewer’s attention.
Media Queries – your poster needs to be responsive and display properly on mobile devices, as well as desktop.
Positioning – some elements of your poster may require absolute positioning to achieve certain effects, such as overlapping elements.
Flexbox – Vertical Alignment
Last week we discussed using Flexbox to create horizontal layouts of rows and columns. Now, we will discuss another strength of Flexbox – aligning items vertically using margin.
When using Flexbox, elements inside the flex container can be controlled using margin. Instead of having to rely on position: absolute, to align items vertically, you can control them using margin. The benefit of this approach is that Flexbox won’t overlap elements if the flex container is smaller than the content inside of it. This is especially useful for creating layouts that should take up the full height of the content at large viewport heights, but condense down to smaller viewport heights without overlapping content and breaking the layout.
In the example above, the container element around Thursday is set to min-height: 50vh – meaning it will always be a minimum of 50% of the viewport height. The text element inside the container has a margin: auto property set on it, meaning it will always be centered horizontally and vertically within the space.
👉 Now you try!
Create a new directory in your GitHub folder names event-poster. You’ll need an index.html and a CSS file, such as main.css to get started.
Find an event that you want to use for this exercise. Consider checking your favorite music venue website, Eventbrite, or other resource for upcoming events. You’ll need to include the most relevant details of your event in the poster – event title, performer names, date, location, etc. You’ll need to create a strong visual graphic that supports the theme of the event.
Add the event title to your document and center it in the page using Flexbox. Consider setting the flex container to height: 100vh and using margin: auto on the child element.
CSS Animations
CSS animations can liven up a page and call attention to relevant interactions. CSS animations are made of 2 components: Keyframes and Animation Properties.
Key Frames
If you’ve ever used After Effects or another animation program, you’ll remember that key frames show different stages of the animation. A simple animation might have a start and stopping point(2 keyframes), a more complex one might have several different stages.
The basic syntax of a keyframe animation is:
@keyframes animationTitle {
0% {
/* Your CSS for first keyframe goes here */
}
50% {
/* Your CSS for second keyframe goes here */
}
100% {
/* Your CSS for third keyframe goes here */
}
}
Let’s go ahead and create an animation called spinType, which will spin some type around in a circle. Within the keyframe, you can set the times of each keyframe. Let’s make one at 0% and 100%:
Flexbox – Vertical Alignment
👉 Now you try!
CSS Animations
Key Frames
@keyframes animationTitle { 0% { /* Your CSS for first keyframe goes here */ }
50% { /* Your CSS for second keyframe goes here */ }
100% { /* Your CSS for third keyframe goes here */ }}