keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
44,200,621,322 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
6 Responses
Since I do web design but I don't code, I put together this handy diagram for the developer to illustrate the construction of a button.
3 months ago
As a designer and developer, I'm not exactly sure how helpful this would be. I'm assuming your developer is using CSS3, since you're showing him the breakdown of elements (otherwise he'd just use a background image). In that case, he'd use a completely different structure.
To illustrate my point, I went ahead and built your button out: http://jsfiddle.net/TvAR2/1/. You'll notice that each of these elements isn't present, as applying different properties to the main button element does the trick.
And yes, all that code goes into making your buttons look good. ;)
3 months ago
Yeah, you pretty much got it. The developer's first attempt was pretty far off so I did this to show how I put it together, at least so he could see my thought process. I should have clarified when I first posted this shot that the diagram accompanied more detailed notes.
I'm still learning the technical side of things so thanks for the comment.
3 months ago
Glad to help. I'm a big advocate of blending the lines between designer and developer (since that's what I did, after all). If you need any more help in the future, don't hesitate.
3 months ago
Pro
Kyle DeVore
Hey Kyle, what is the advantage of using rgb color definitions over hex colors in your code?
3 months ago
It's mainly a personal preference. RGB values are easier for me to understand, and easier to manipulate with Javascript. Also, if I decide to change the transparency of an element later, I can just throw in the additional RGBA value and call it a day.
3 months ago