Join Justin Putney for an in-depth discussion in this video Solution: Creating a responsive text shadow, part of HTML5 Projects: Creating a Responsive Presentation.
So, if your monitor is like mine at home, it's probably rather big so, you can fit a…lot of things on screen. So, what we've gone for this part to show…this solution, is we've increased the resolution using a different browser.…And I've cut out the top part of the browser so, we can actually see this…effect in action. So, right now, this is a rather large…screen, and the text is not particularly in conflict with the graphic.…And so, what I want to show is, as the graphic comes up and starts to overlap the…text, our effect will come into play. So, there it is.…
You can see it switch on. Go back a little bit, and I can change the…width of this and that does affect the positioning a bit.…But really, what I'm targeting is as I move the bottom of the browser up, the…graphic moves up and that's where it starts to interfere with the overlap.…So, that's the final effect, and let's see how it's done.…The way I approach this problem is to think, really, what is affecting this overlap.…And our previous media queries had to do with the width of the window.…
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