keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
112,274,934,460 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
15 Responses
Pro
Prathyush
Made an interactive user interface element in CSS. Idea is that the elements take as less space as possible and reveals the labels only on hover, so that the user can be sure that s/he is not guessing the functionality from the icons.
Check it out at the Prabrothers' laboratory.
Total amateur in CSS transitions at work. Please let me know if there's any way I can improve my code/design.
Built for Drops app.
over 1 year ago
I like the idea and implementation of it!
Maybe it would be even better of the text would flow in from under the right buttons. Right now they flow in from outside the buttons.
over 1 year ago
Nice! When you bring hover on right even outside the container it starts moving.
over 1 year ago
Pro
Prathyush
Yep, rightly noted Amrinder. Seems its the "Share" label protruding out with 0 opacity that causes this behaviour. Any idea on how to fix it ?
over 1 year ago
Very clean, love it!
over 1 year ago
Pro
Ollin
Looks amazing!
For the hover problem:
span { visibility:hidden;} li:hover span {visibility:visible;}
fade in still functions and doesn't activate unless the li is :hover :) lemme know if that works!
If anyone wants to test that out in chrome or safari, open the developer tools>resources>style.css, double click, and paste the aforementioned code in :)
over 1 year ago
Pro
Prathyush
That fixes it. Thanks a lot ;)
over 1 year ago
Pro
Timothy Whalin
Increasing the length of the transition makes the text not fade in over top of the other blocks (using Chrome). Increased to 1s and it seemed to work nicely. :)
over 1 year ago
Pro
Nikh
It looks awesome and all, but the quality of those icons are not something the Parbrothers would make.
Waiting for the rebound now ;)
over 1 year ago
Pro
Victor Coulon
great work :)
I suggest that you can add :
a { overflow:hidden;}
It's better on hover, because it's strange when the label appear outside the square.
You will lost the left and right border, but it's not matter.
You can update this :
a.dropslink:before into this li:first-child:before
and this :
a.sharelink:before into this li:last-child:before
Or as you want !
over 1 year ago
Pro
Jonatan Littke
Nice! I always felt that overdoing the 'icons instead of labels' thing has gone too far. So this is a good aid.
I do think, though, that doing this on a vertical rather than horizontal line would work better, as the base of the buttons would remain where they are. Now that they move, it's harder for the user to 'aim' exactly where he wants.
over 1 year ago
Ligth and clean icons drops !
over 1 year ago
Pro
Jan Cantor
Oooooooh. Me likey
over 1 year ago
Pro
Alexis Gallisá
You can add
-webkit-transform: translate3d(0px, 0px, 0px)
to the li tag to enable hardware acceleration in Safari and on iOS devices. Smoothens out the animation a bit.
Launching Safari with
CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari
From terminal will show you parts of the site which are hardware accelerated.
over 1 year ago
Pro
Caffeina
Great job man!
Take a look at a fix we made of your code!
http://jsfiddle.net/lastguest/SqZeR/1/
about 1 year ago