I'm using CSS to create a set of toggleable buttons.
I'm almost there, but I don't feel I've got the CSS proprerties quite right: http://jsfiddle.net/rrGab/5/
I think the dark border on the selected button is too dark and too sharply delineated, but I don't know how to make it look smoother.
Could someone suggest how to improve the CSS to make it look better?
I'd love to know the general CSS principles of making buttons "pop" out of the page or appear to be recessed into it.
Apologies if StackOverflow isn't the right place for this - would be happy to move it onto a design forum if that is more appropriate.
For a recessed 'letterpress' effect you need two different colored borders, one for the top, one for the bottom, instead of a solid border. Please refer to this article here. This technique is using text-shadow to create the effect with text, but I think you might could use the philosophy behind it and apply it to border color.
I agree that the solid border doesn't really make it pop. What if you again did a two-toned border, but use the 'middle color' that your gradient produces up top, and then your bottom border could be ever so slightly darker than the bottom of your gradient?
Related
I'm going for a pretty minimalistic look on my site and I was wondering how I could achieve a look like this:
http://iq.gs/cssdropdown
The top left hand corner in the picture would be transparent or a solid color to match the top navigation bar. What I'm looking to do is to show the six different colored boxes as block elements so when someone hovers over the navigation part, the six boxes drop down and can be used as links. I'm not sure how to do this, as I'm a newbie to CSS.
Please help!
Something like this? : http://jsfiddle.net/SpJ5f/
I didn't bother using the colours/fonts etc you asked for, just the idea behind it
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.
Can you use the CSS Filter attribute for IE gradients AND implement a background image?
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c8bcf', endColorstr='#0068b3');*/
As far as I know the background has to be "transparent" or none for the gradient filter to work..
perhaps you could wrap the gradient div with another div and put the background image on the outer one?
Wait! it does appear to work, glad I checked..
Working Example (IE only)
sorry about that I really thought it didn't work with a background, but couldn't find a reliable source - anyway in that fiddle above I changed the gradient to go from transparent to black
I'm not convinced that it can be done. It appears that in the jsfiddle above, the hex values have an extra 2 "0"s in them. if you set the values to actual hex chars, the example does not work. perhaps the background will show through if the gradient is going from transparent to a color only
I'm getting a tiny rounded corner halo effect that I'd like to get rid of. In this example, look for the effect in the red circle. Here's a zoom in of the effect:
I seem to recall a while back reading an article on just this problem. Anyone have a link to that article? Otherwise, any good ways to get rid of the halo?
It is being caused because the dl has all four corners rounded. This allows the bottom of the dl to be rounded. The dt sits over the dl and has its top left and top right corners rounded. But there is a slight overflow of the dl curve behind the dt curve, causing the halo.
My solution is to increase the border-radius of the dl so that it is hidden behind the dt corner. But it seems like a hack and adds a fair amount more CSS. I'm wondering if there is a better solution. Here it is without the halo:
If you don't mind a 2 pixel discrepancy you could add...
div.content dt.top {
position: relative;
top: -2px;
}
But I think your solution is good, it can be improved by using the shorthand version of border radius:
http://jsfiddle.net/DAjWS/
border-radius: [topleft] [topright] [bottomright] [bottomleft]
The article you are mentioning probably has to do with the combination of border with border-radius (it produces a halo similar to yours), but in your case it's expected. The same thing would happen in a vector editing app if you overlapped two boxes with rounded corners. you just have to find an elegant way of covering the anti-aliasing of the bottom box.
I just came across the article that I mentioned in my question. It was linked to from html5boilerplate.com. Essentially, the following webkit CSS will get rid of the bleed (or halo as I called it):
-webkit-background-clip: padding-box;
I'm using Aristo's CSS3 buttons seen here. One thing I like about Facebook's buttons are the little sliver of grey between the border and background of blue button elements. To see this go to "Messages" then "New Message" .. the Send button has just a bit of grey to make it pop out. It looks like this is achieved with this bit of code:
background-position: 0px -17px;
I've put up my attempts on jsfiddle here. My goal is to avoid creating a nested element if possible. I guess I could also create an image and set that as the background, but I was hoping this would possible just with CSS. Thanks!
Perhaps you could use the outline property for the border, and then you get to use the border property for the highlight.