Several of these are actually quite nice. Granted, they're definitely not link styles to be used "generally", in body text, etc. -- but for an appropriately image-conscious site, they could work particularly in a site header, for example. Unfortunately it's hard to comment on them individually since they don't really have "names"... but "Wafture", and "Chatoyant" (against red) are particularly nice and tasteful.
Creative Link Effects - Subtle and modern effects for links or menu items
21–30 of 30 posts
Re: Creative Link Effects - Subtle and modern effects for links or menu items
#22Earlier quoted context omitted.
Uggh. Token middlebrow dismissal. If that is how you feel, just browse the internet with CSS turned off or with your own style sheet overriding the site's own style sheet. If you use chrome, try this: [0] https://chrome.google.com/webstore/detail/user-stylesheet/nl...
Uggh. Token middlebrow dismissal. So, that means you disagree but can't articulate why? If that is how you feel, just browse the internet with CSS turned off If you had ever actually tried this, you'd know it's completely bullshit advice. or with your own style sheet overriding the site's own style sheet. Because the proper solution to shitty website UIs is to force everyone to jump thru hoops to fix them individuall…
In the context of surrounding text, it's entirely possible that these link effects are as usable as underlined text.
Design is about concepts like contrast, repetition, alignment and proximity. The designer here left the use of design principles like contrast up to other designers to choose how to indicate that a link is a link.
Contrast makes a link look like a link. Not blue, not purple, not underlines, but contrast.
Besides contrast, context matters too. There are words and expressions which are often linked, such as proper noun phrases, references to other works on the internet, obvious link phrases like "click here", etc. Once you've read one utterance in a different style on the page that is likely to be a link, then you have enough information to mouse over or try tapping and verify your hypothesis. Once you've verified the link style on a site once, you don't need to do it again.
Humans are pretty intelligent pattern matchers, and so long as the designer has placed enough clues in a page to identify a pattern, that is good usable design.
FWIW I don't disagree that it would behoove the designer to make things explicit by showing his links in example contexts, but that doesn't excuse everyone showing up here raining on his or her parade because they lack the imagination to see how these could work in context.
Re: Creative Link Effects - Subtle and modern effects for links or menu items
#23I like these, but I think some of them are too slow. If my cursor passes over them on the way to a different destination, they'll begin animation, and then reverse as soon as the cursor goes over. It'll just be barely a hint of movement, whereas normal links change color instantly. I think as soon as your cursor touches a link, you should think "this is a thing" instead of "I think something just happened". An exampl…
Just curious. Mostly I'm indifferent to these kinds of posts because CSS is getting more complicated faster than I can learn it (it seems but it might just be me).
Re: Creative Link Effects - Subtle and modern effects for links or menu items
#24I like these, but I think some of them are too slow. If my cursor passes over them on the way to a different destination, they'll begin animation, and then reverse as soon as the cursor goes over. It'll just be barely a hint of movement, whereas normal links change color instantly. I think as soon as your cursor touches a link, you should think "this is a thing" instead of "I think something just happened". An exampl…
How would that be different than replacing img1 with img2 on hover? Just curious. Mostly I'm indifferent to these kinds of posts because CSS is getting more complicated faster than I can learn it (it seems but it might just be me).
Re: Creative Link Effects - Subtle and modern effects for links or menu items
#25Re: Creative Link Effects - Subtle and modern effects for links or menu items
#26Flipping, scrolling, or otherwise moving the un-highlighted text to make room for the highlighted text doesn't accomplish anything – it's the same text, just with a different presentation.
Save these spatial animations for progressive disclosure. When you want more information to pop out of something, or you want additional controls to present themselves when the user has entered a specific context, that's when you should consider scrolling and flipping your elements.
Re: Creative Link Effects - Subtle and modern effects for links or menu items
#27Several of these are actually quite nice. Granted, they're definitely not link styles to be used "generally", in body text, etc. -- but for an appropriately image-conscious site, they could work particularly in a site header, for example. Unfortunately it's hard to comment on them individually since they don't really have "names"... but "Wafture", and "Chatoyant" (against red) are particularly nice and tasteful.
Did anyone understand how to implement them? are they JS or CSS or both based?
BTW, you can right-click a link and inspect with firebug or chrome dev tools to see what css styles are applied to it and how they change when you hover over the link.
Re: Creative Link Effects - Subtle and modern effects for links or menu items
#28Re: Creative Link Effects - Subtle and modern effects for links or menu items
#29I like these, but I think some of them are too slow. If my cursor passes over them on the way to a different destination, they'll begin animation, and then reverse as soon as the cursor goes over. It'll just be barely a hint of movement, whereas normal links change color instantly. I think as soon as your cursor touches a link, you should think "this is a thing" instead of "I think something just happened". An exampl…
Re: Creative Link Effects - Subtle and modern effects for links or menu items
#30The problem with half of these is the unnecessary use of spatial metaphors. Flipping, scrolling, or otherwise moving the un-highlighted text to make room for the highlighted text doesn't accomplish anything – it's the same text, just with a different presentation. Save these spatial animations for progressive disclosure. When you want more information to pop out of something, or you want additional controls to presen…