Join Justin Putney for an in-depth discussion in this video Challenge: Creating a responsive text shadow, part of HTML5 Projects: Creating a Responsive Presentation.
Alright, take a look at this text and we've got a bit of a problem here.…The white text is sitting on top of these detailed buildings and it's pretty…difficult to read. So your challenge, if you choose to accept…it, is to add some CSS so that this text actually displays better but try and do it…when the text overlaps the buildings. So your objective is to add some CSS, to…make the title slide text more readable when it overlaps the building graphics.…
And I'm going to give you a hint. One easy way to do it is to use a text-shadow.…So, think about what we've done in the last chapter, and see what you come up with.…You've got ten minutes on this one. It might require some trial and error.…So play around and see what you can make. And when you're all done, you can check…out my solution video to see how I solved it.…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout