Rollover Text

Take a look at:
http://www.smashingmagazine.com/2012/01/09/high-quality-free-fonts-2012/

When you click on the heading link, the whole block of text has s rollover background colour. Does anyone know how this is achieved?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tend to say this:

and this:

Interesting enough:

This is cross-browser (cool) which I haven’t had expected. No chance currently to give try. Or do I miss here something?

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Any link can be given a shape like this. It has more benefits than just looking good – it also gives the user a larger “target” to click. Starting with a bare link:

<a href="foo">Foo</a>

you can add the following styles:

a { display:block; padding: 4px 8px; text-decoration: none; }
a:hover { background-color: yellow; }

and when you mouse over it, you will see a large yellow block behind the link. In fact, this box will extend the entire width of whatever container element the link is found inside. Look at the way that the left navigation on your example page works – the block-level color is contained by the width set for the navbar.

The example above would do this to the entire page, so to add this style to all the links in a particular element, you could click once on that element in Freeway, then open up the Style / Links segment of the Inspector, then click the More… button and use the extended style editor to add the display:block attribute and the padding. Once you have done that, the style that gets written to the page will have a prefix that “scopes” it to just the links found inside that box:

#boxName a { … }

Hope this helps,

Walter

On May 11, 2012, at 3:25 AM, BigG wrote:

Take a look at:
http://www.smashingmagazine.com/2012/01/09/high-quality-free-fonts-2012/

When you click on the heading link, the whole block of text has s rollover background colour. Does anyone know how this is achieved?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options