keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
43,942,549,399 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
8 Responses
Pro
Sean Nelson
Some simple CSS3 buttons used for moving through screenshots in the iPhone frame above. Second button shows the on-click state.
Using this iPhone template: http://drbl.in/jyt
over 1 year ago
Pro
Kubilay Sapayer
looks great man :)
over 1 year ago
Pro
Sean Nelson
Thanks man!
over 1 year ago
Pro
Miro Keller
How did you do the arrows? Imgs or CSS3 as well somehow?
over 1 year ago
Pro
Sean Nelson
The arrows are images. Still need them to degrade nicely :P
If I were to use CSS3, I would probably start by making a div with a fixed width and height, rotate it 45° with -webkit-transform, then somehow mask off the other half of the box. Maybe that can be achieved by putting the arrow into another div that has a width 1/2 the size. of the arrow div, and set it to overflow: hidden;. That may hide the side of the arrow we don't want to see. Not sure though, there's probably an easier way. Haven't actually tried any of that yet :)
A more realistic, yet imageless, approach would be to find a web font that's just icons (the Pictos icon set has a web font available) and use @font-face. So the arrow that displays is actually just part of the font.
Hope this helps!
over 1 year ago
Pro
Miro Keller
I guess for me the best way will continue to be using images... The other approaches you mention add non-semantic elements and meaningless text (the letter corresponding to that particular font glyph)...
Unless! An :after pseudo-class is used, the content set to that letter in combination with the pictogram font! That could work... without adding any non-semantic element!
over 1 year ago
Pro
Sean Nelson
Yeah, it gets really hacky when you try to make shapes and all that jazz with just CSS3, haha.
over 1 year ago
Pro
Miro Keller
Damn, but that is an area where CSS3 is really lacking... Creating shapes is an integral part of design, and CSS is for design, right? I can't believe it took years to get us some rounded corners... It will be decades until we can create custom shapes!
over 1 year ago