I have a request to make these menu items:
Top menu:
Side menu:
I started with a border-radius, but I don't know how to make the other side to be 'outer radiuses', I believe both the top and bottom menu are mainly the same idea, I'll just have to play with the sizes and directions.
I'll soon share a jsFiddle of a version I'm working on, currently I haven't manage to do anything at all.
Essentially you want to use the :before and :after selectors to create a little box with a border radius in the corners you want.
There are many examples online, here are a few:
Making Outer Border Radius Using CSS and CSS3
CSS3 - Tabs with inner and outer radii - no graphics - (free for personal use - not commercial)
Flared Borders with CSS
Related
How to make background have a border radius like this image:
You can use clipping. Here is a guide.
This is not a border radius nor a background for the top of the container. These seems to me, more like a background of the arrows of the slider.
Most of times, good designs relies on visual tricks AND it's a good practice to inspect webpages that you like and learn from other's code
Well, here's the story. I am developing my first site and the first problem I've encountered is making rounded corners of main div, that will contain all stuff. CSS3 is a good solution, but incompatibility with IE6-8 is stopping me.
Also I need that rounded div (it's actually rectangular, 950x1600 with rounded 30px corners) to be centered and have a nice shade along the border.
Using background image is not an option too, because it planned to be with seamless pattern.
So what I`m thinking to do is:
Put one centered div.
Put images cut from photoshop in it's corners
Use 1px high PS pattern for sides as shade.
Everything would be ok, but 'patterned' background messes everything.
So only solution I see here is to put two divs on both sides of centered div, make right one draw pattern from right-top corner, so borders cut from photoshop would match seamlessly with siding divs, used as background image.
Now tell me, folks, am I trying to invent a bicycle here, or there's better solution?
p.s. all solutions that i've found all over are useless in a way. Some are very close, but leaving some margin white field 10px around divs. Or after adjusting to necessary height and width do not scrolling and falling out of page. Tables with text are useless without text (no? if i remove text it just disappears)
Yeah, I am a total noob, so please be indulgent =)
If your main concern is rounded-corner property support in older versions of IE, it might be worth checking out a plugin like CSS3Pie (css3pie.com). This uses the 'behaviour' property, so it won't mess with your other browsers - there's no sense in adding obsolete mark-up for 90% of current browsers (i.e. designing for the lowest common denominator).
CSS3 Pie
To be honest, I'd usually abandon the rounded corners in older versions of IE completely - as long as content degrades gracefully, there's absolutely no harm in this. However, if you really want a consistent appearance, I'd definitely go with a plugin like the above, rather than structuring your entire page around browsers that should've fallen out of use ages ago.
In asp.net How to create color full rounded corner navigation menu using css and whenever user click on parent node then all the child node wiil be display and color of the parent node will be change.
CSS Rounded corners are done using the border-radius style. It's widely supported in all browsers now, but you may need to add some vendor prefixes to support older versions of browsers.
IE8 and lower does not support border-radius at all, but can be made to do so using various hacks, of which CSS3Pie is by far the best. (IE9 does support it just fine though)
For menus that change colour and drop down the submenu when you mouse-over, you can use the :hover CSS selector.
So something like this:
.menu {background-color:red;}
.menu:hover {background-color:blue;}
Of course there's more to it than that, especially when you're talking about drop-down menus, but that's the basic stylesheet functionality you need to know.
There's a whole bunch of tutorials for this on the web, but this looks like a good one: http://divitodesign.com/css/how-to-dropdown-css-menu/
If you want to do it on click rather than hover, you might find you have do some of the work with Javascript rather than pure CSS.
Use ajax Rounded Corners or you can use rounded images. There are loads of jquery dropdown menus available on net
I use css to apply rounded corners to li navigation elements. This elements have a border too.
So this is how it looks like:
Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.
Any idea how to fix that? Do I have to use bg-images?
Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.
Yes it can be done using this jquery plugin.
http://jquery.malsup.com/corner/
No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.
Anyone know if there's a bullet-proof (standards-compliant to XHTML1.1 strict, cross-browser, non-javascript) way to use CSS and background images to turn an inline link into a visual button that will stretch to accommodate different amounts of text (or text resizing)?
I'm thinking I need to use background images as the designer's buttons have rounded corners with a different coloured border. It must work in IE6 (Government job).
Im pretty sure the answer is no, but as always thought it worth a check.
Amongst other things, I've already tried variations on the sliding doors technique, but can't make it work as the solution needs to work inline (i.e. within a paragraph) and I can't set a fixed width.
EDIT: There are several buttons, each of which has a different colour for foreground, border and background. They also have a gradient 'face', but no need for transparency or anything else 'unorthodox'. Unfortunately I can't link to examples as I'm under an NDA.
I'm not sure if this will fit your needs, but I helped someone with hoverable rounded buttons in this post... it uses only HTML and CSS.
I don't think you can do this within your restrictions. The problem is that you have one element, but to properly do stretching, you need three (unstretched left side, stretched center, unstretched right side).
Yeah, you probably need to make image buttons for this.
Just as an aside in future, here's a page on CSS button styling.