By zooming the text size all the way up (300%) with the browser, I was able to get one of the links to wrap across 2 lines. I just viewed the Elastic Lawn on CSS Zen Garden ( ) in IE 5.2 on the Mac. (Animation effects are not visible in every browser some, such as Safari 1.0, show only the first frame.) This static underline and this animated rollover could be used to show external links. Here are some examples of custom underlines that can be created with this Set the CSS background properties to the :hover pseudo-class instead of directly If you want the custom underline effect to appear only during rollovers, simply The CSS white-space property to prevent our link text from wrapping.Īll of the CSS properties for the link element can be combined:īackground: url(underline.gif) repeat-x 100% 100% Linked text on the lower line would display the custom underline.) We’ll use We need to ensure that our links do not span multiple lines. Since the underline graphic is positioned at the bottom of the link element, Of your underline graphic and adjust to suit your needs: It’s suggested that you start with a bottom-padding equal to the height To the baseline of the link text will vary depending on the font size being The exact position of the underline graphic relative To create space for the custom underline graphic below the link text, we willĪdd some padding. Have a preference for the side of the element to which the image is aligned.įor our example, we will position our background at the bottom right: For some background graphics such as arrows, you may
We’ll use the background-position property to place the image at the bottom To ensure that our graphic appears below the link text, regardless of font-size, The background image to repeat along the x-axis: Not vertically, or it would appear behind the link text itself. We want this graphic to repeat horizontaly along the bottom of our text but To create the custom underline, we will set a background image for the linkĪ The line-height of your text to add more space between the bottom of one lineīefore we can create the custom underline for our links, we need to remove If your underline graphic is more than a few pixels tall, you should increase Repeat horizontally, and if you want the background to show through you’ll You should start by creating a graphic for your underline. They can also be used to provideĪdditional visual cues to the differences between the types of links contained 3 days of design, code, and content for web & UX designers & devs.Ĭustom underlines allow for new creative opportunities that might beĪppropriate for some websites.
0 kommentar(er)
