over 8 years ago from Clark Wimberly, Designer
Seems like we had a bunch of fun in this thread so I thought we could all try a second time.
The challenge today is an animated hover effect, where the line under the link animates into place.
How would you mark this up and style it?
Solved in 4 lines of code! http://jsfiddle.net/sjgj20rj/
ok that one is pretty damn impressive
Thanks for the initial code.
How about adding 2 lines to make it work with any background color?
http://jsfiddle.net/dktnnkL6/14/
[spoiler] use a transparent border to position the shadow!
Excellent! My first thought when I looked at the first one is that it's dependent on being on the same-colored background — nice solution!
It has a glitch which I fixed here:
It seems there's not really a need for the box shadow at all - you can get away with just a border, some negative margin and adjusting padding.
http://jsfiddle.net/sjgj20rj/14/
edit: oops, gets a little funky when the border is larger! box shadow is the way to go then.
Hover into that slowly from below.
wouldn't this have an issue with multi line text, where the white box-shadow is hitting the text below? could use rgba(0,0,0,0) perhaps if it is the case
Works on multiple lines too! Well done!
Best one.
Front-end developers hate him! You won't believe this awesome CSS trick!
I found a reason why your karma is -8 ;)
I tried so hard not to upvote this...I failed.
Sure, I'll take the bait.
http://codepen.io/msisto/pen/yyMXxB
I took some liberties.
Also, my $0.02: This would be more challenging if you included some rules like: no additional elements (for the line), must degrade gracefully on mobile, etc... Still fun!
I was gonna add some rules, but I figured that seeing what constraints people allowed would be part of the fun! In the last one, the rule was no images, but that doesn't quite apply here.
Also your solution looks pretty rad.
These seem to be quite popular, and we're working with Clark and Brandon to make them a regular thing with a bit more structure (and prizes for the winners).
More soon!
That's awesome! I love little games/challenges like this. If it's structured, even better.
EDIT: If it's going to be a contest, how about something where you can't see the solutions until you submit one OR you choose not to enter.
And maybe a custom challenge badge in the story feed? :)
First try: http://cloud.smallparade.com/ZJXz
No prefixes or anything included.
This is super good, wonderfully done :)
Careful with that nesting! :trollface: #competitive
:-)
Good job!
Didn't even think about a U element. Well played!
In the days of well-supported pseudo-elements within all browsers there should be no need for superfluous elements like the <u> tag.
Fully automated hovering link :p
haha it's just like the gif!
Progressively enhanced: http://codepen.io/chrisnager/pen/azJLxe?editors=010
Why overcomplicate this? http://jsfiddle.net/qtg06ptx/1/
Because if you use that technique for an inline link, this happens: http://jsfiddle.net/qtg06ptx/2/
I couldn't see what you meant when I opened the link on a 1920x1080.
To clarify: this method isn't suitable when the text is more than a single line since it adds an extra 10px between the lines.
Yes, I forgot to add a line break. Thanks for the clarification :)
Easily fixed: http://jsfiddle.net/qtg06ptx/4/
exactly what I would have done
Just saw this, I totally agree it can be done with a very limited amount of code. There is no need for before or after elements.
Well done.
Very simple solution using ::after pseudo-selector and :hover state to trigger a transition:
Hover to show line variation: http://jsfiddle.net/48t374e1/
Hover to hide line variation: http://jsfiddle.net/1srq4em7/
Why not use CSS3? Using position: absolute and moving it with top value makes the line lag. Browser support might be a little better without CSS3, but still though.
Positioning the line with position: absolute; anyway, so figured I may as well animate on that to keep the amount of CSS down.
Makes sense if trying to keep CSS down, but it is always worse performance to animate absolute positioning than using transforms. (Just throwing that out there for those folks who would animate "top" and then wonder why it's choppy.)
EDIT: I meant translates, duh. Stupid me.
FUN. Coming right up…
I'm still a n00b at this, but decided to give it a whirl: http://jsfiddle.net/rtue3pf1/
Loving the idea of these challenges!
Not as clever as Lucian's solution, but smooth, effective, works in paragraphs, and scales with text size: http://codepen.io/jodi/pen/LEWdGN
Didn't even used shadow! http://jsfiddle.net/nk9qrow5/
Here's my try: http://jsfiddle.net/sjgj20rj/21/
Not as impressive as previous examples but it works :)
These challenges are a great idea.
Here's my take with a pseudo-element and a transformation: http://codepen.io/edge0703/pen/raypPY
Hi. Have taken Lucian's and Dirk's methods with some slight refinements and examples of each method's problem scenario.
http://jsfiddle.net/qy1wbn23/5/
Also, if you want the link underline the same colour as the link text, use currentColor instead of black.
This is what I ended up with. These challenges are neat.
Okay I'm going to take my solution into a separate post and explain why I think a lot of solutions are close but not quite there!
My solution: http://jsfiddle.net/u7ef3ezc/
I've added the border by using a box-shadow. To position the box-shadow, I used a transparent border.
Some notes on other solutions:
General rule: if you don't need to, don't generate content with CSS. What we're trying to do here is style a link. Adding an element and styling that instead just feels like cheating.
As for the (current) number 1 solution by Lucian Marin: very close. Love the thinking, but I tend to avoid using a "white-out" style. Using the same color as the background color to something else, again, feels like cheating. Plus you'd have to adjust the solution to fit the case. In fact, since you used white, you're disqualified because the background color of the image isn't white, and your solution wouldn't work. (Harharrharrr, yeah, I'm totally trolling here)
Also, using padding could sincerely mess up the flow of your text!
Anyway, again, don't mean to diss any of the solutions, I just felt like they weren't quite there! :)
Thanks for the fun topic!
Thanks for all the thought! I agree, avoiding adding an element is always best.
But! Your example glitches when the mouse enters from the bottom: https://cloudup.com/cpi-NiQ-N2N
Well found!
Fixed it but too busy to change my initial post.
I'm guessing I'm not the first to take this approach, but I'm going to submit before looking at errone else's solution.
http://codepen.io/dgca/pen/ogZGyN
TL;DR: Border bottom with a CSS transition.
I gave it a shot, I wanted to make the most simple and concise solution. Hope you enjoy.
Great idea by OP to get people to write his code for him :P
Here's my version, nice little challenge :)
DN is the new SE?
From my perspective this is more about the challenge than it is about sharing code. Less about working in isolation and more about sharing ideas and experimentation.
Yeah this is aiming to be more of a "best practices in your opinion" kinda thing. Something SE doesn't really allow.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now