I am trying to use a CSS3 Border gradient property and using an example from css tricks. I can get it to work using their example but cant seem to get my colours in that i am after and i think it's syntax errors. Is someone able to let me know what i may be missing?
I am after a left and right border on a div with the gradient going from #d1d2cd to #e3e4df 5 pixels wide?
I have mocked up an example in js fiddle: http://jsfiddle.net/DqgPy/
Thanks
I'd recommend checking out a site like:
http://www.colorzilla.com/gradient-editor/
Play around with the gradient settings, and it will auto-generate the CSS you need (including support for older browsers). At the very least, the code provided might help you figure out any of your syntax errors.
Related
I've encounter a doubts of how to approach a project which im busy at this time. I need to create a header with a strange form. This project needs to be responsive in any modern device. I've checked different blogs searching for help such as shapes of CSS. This has helped me but I do not know which would be the best approach for this.
http://css-tricks.com/examples/ShapesOfCSS/
The design which is wished is something similar as this image:
As you can see there are two curves on each side which are also different from each other. I would like this to be a header element. Is it possible to create with only one element? Any suggestions of how to reach this kind of irregular forms with CSS?
You could achieve this by using border-top-left-radius and border-top-right-radius, and setting them at different values.
Example jsFiddle.
If you'd like to set the border radius individually for all four corners, use the more general border-radius property. It's syntax is:
border-radius: top-left top-right bottom-right bottom-left
Example jsFiddle.
border-radius is supported in all major browsers, except older versions of IE (IE8 and before).
If you'd like border-radius to work in older versions of IE (6, 7, 8), you could look into using CSS3 PIE.
Here is a codepen of the desired header in the question.
Depending on your header size you will need to play with the numbers; but this should kick you off in the right direction.
http://codepen.io/BuoyantMedia/pen/ubIpG
I'm trying to create a button similar to these http://houseofbuttons.tumblr.com/post/16760351131/starred-checked-action-buttons-by-brendon
and was hoping to do it with just css.
I put together a quick jsfiddle page http://jsfiddle.net/ne69E (but I haven't been able to get it to work, though I do see the round element with the same code without jsfiddle).
Before I spend too much time doing this, I wanted to make sure that it is possible to create a linear gradient over a radial gradient. I tried using the background-image: linear gradient, but that only applies to the div, not the borders.
What do you think? is it possible? Or should I just use images?
Your jsfiddle has a couple errors (you wrote webit instead of webkit and you're using numbers like 4 and 7 with no units), check this updated jsfiddle, and it seems you're not so far off from an effect like the ones on the buttons you want.
I am not sure how to exactly phrase this question so maybe that's why I can't find help with this.
I am coding a webpage and the designer has made a background for a part of it. It's sort of a two way gradient: both horizontal and vertical at the same time. I am attaching the image here because I'm not sure how to explain it.
I'm sorry if it's very obvious but I can't find anything resembling this anywhere. Thank you!
Here's the image:
EDIT: The question is, can I make this background using just CSS3?
Thanks!
Are you able to limit browser support to browsers that support multiple backgrounds?
If so, you can create two gradients, along with a border, to simulate that.
Here's a version that only works in Firefox: http://pastehtml.com/view/b295elnso.html
You can modify the webkit and other lines to get it working in other browsers. I used the Ultimate CSS Gradient Generator to build the lower gradient.
Here's a good listing of multiple background support.
(Edit: I meant only works in Firefox, not IE. Doh!)
*(Edit2: Added multiple background support listing)*
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.
Is there any way to make a rounded border in IE without using images using CSS only, or any other easy way?
I have checked other questions like this on Stack Overflow, but I’m not getting an exact way.
Keep as bookmark : http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ;)
For border-radius specifically, see http://code.google.com/p/curved-corner/
You can do on for I9 only as it supports border-radius css property. Otherwise it seems to be difficult without images.