Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
Now, to add the arrows to the anchor links, we're going to add some more properties to that call-to-action rule. So after margin, let's hit a return. First, let's set padding. We're going to set 0 on the top, 12 pixels on the right. Because we're going to align the arrow to the right, we want to make sure that the text inside of the anchor link never overlaps that arrow. Zero on the bottom, 0 on the left. Next line, we're going to set background. First property is url.
Inside of the parentheses for url../images/cta_arrow.png. Next, for the repeat properties, we're going to type in "no-repeat," then a space. For the X position, we're going to set right. That will align this graphic to the rightmost edge of the anchor link. Then a space, then 0 pixels for the Y position. Let's hit File > Save. Let's come out to our browser. Let's hit reload.
And in our browser we will see the graphic showing up inside of each one of the anchor links. So it's aligned to the right-hand side. And the 12 pixels is actually the distance from the type here to the outermost area here. So, again, that gives us a little bit of padding so that the background graphic doesn't overlap with the type. Now, the next thing we want to do is add in a hover state, and we want to shift this background graphic up so that we can have it turn blue along with the type turning blue. So now this technique is commonly referred to as a CSS sprite. And the idea here is that we have that single graphic that we created in Photoshop, and on the hover state, we're going to change the Y position so that the graphic actually shifts up inside of the anchor area, giving us the illusion of that arrow changing from orange to blue.
So to do that, let's come back to our CSS file. We're going to start by typing a.cta:hover, beginning and ending bracket. The only property we're going to set in here is going to be background-position. We're going to set right for the X position and -50 pixels for the Y position. If we were to take that slice and measure the top portion of the arrow that's orange in that Photoshop slice and measure down to the top of the blue area, we will come up with 50 pixels.
So this is the amount we want to shift that sprite when somebody rolls over one of those call-to-action links. So let's hit File > Save. Let's come back out and preview this in a browser. So now when I roll over these links, the illusion is that the arrow is actually changing color, but in reality, what we're doing is taking that background graphic and shifting it up so that the position of the blue triangle matches exactly where the orange triangle was. Now that we have our call-to-action link styled, next we're going to work on the styles inside of the promo areas.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.