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
Related
Can we have border something like this using css ?
Borders are limited for a div. Multiple box-shadows can do some work but it will be a lot of work. Why don't you use SVG? I suggest you to use SVG, its light and most of the websites today use it. And you can animate SVGs!
So I've been trying to add a shadow to my images and I've been encountering some issue.
The images used are PNG of cut out products but they have a round border so there's still some transparent corners as seen here:
This is my image in Photoshop:
Now if I add them on my site and put a box-shadow on top of them this is the result:
There's this white-grayish corners that look pretty bad. Is there any workaround for this?
Thanks in advance.
The problem is the image itself, not the shadows, that white-grayish corners are part of the image and you can't do nothing with css to fix it, what you need to do is import your image again from photoshop without that corners.
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
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.