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.
Related
I didn't see anything that really hit on what I'm trying to do. I know that animating gradients used to not be possibly but I think that's changed in the last year or so. Does anyone have any advice about how to move four divs with different background gradients through css3 transitions? I'm trying to create a nighttime to dawn to day gradient transition and can't seem to make it work. Ideally I'd love to do it just with css3 but if I have to use JavaScript or jQuery, that's fine. Also, I'd like to make it happen on load and not need a :hover pseudo class.
Thanks in advance!
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.
I am using transform CSS property to rotate text but the seems to come differently in different browser, I tried it with different fonts it doesn't come smooth.
is their a way i can make it smooth. link for image
jsFiddle example
a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. that's all i got for you. makes it a bit smoother.
I have a page where the body is set to a background colour. I have a fixed-position footer that is above some text that scrolls behind it.
I have used a css3 gradient to attempt to create a sort of fade effect, but there seems to be a brighter line occurring somewhere along the gradient. Any tips to remove this line would be greatly appreciated. Ideally, I would like to avoid using images as the colours are changing dynamically across various pages, so it would be nice not to have to create a new background image for every colour.
I have created a jsbin to demonstrate:
http://jsbin.com/okedut
I also took a screenshot and increased the contrast/size in photoshop which confirms there is indeed a line appearing for some reason:
It seems like a browser bug when you are using rgba values.
The effect that you want to achive can be done with CSS masks.
http://www.webkit.org/blog/181/css-masks/
For FF you can use a SVG solution:
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
I was curious if it's possible to fade from one gradient to another inside a div in css3? I would like to be able to have one gradient start fading into another around the center of the div background.
(for instance, a fade like here http://garyoak.com/images/fade.png )
I know how to do the gradients individually, but i have no idea how to do fade 1 gradeint into a another if it's possible. If it's not possible, is there way to accomplish this effect? I was thinking of stacking two divs on top of each other, each one backed with a different gradient and having the top one fade horizontally, but again I'm not really sure how to do that.
I could combine the gradients into one single horizontal gradient, but i already have all the single colour gradients defined and it'd take quite abit of time to correctly combine them together, especially if i decide to change one of the gradients. I basically just want to avoid having to define and update seperate gradients to fade two existing gradients together.
If someone could help me out/point me to a proper resource to figure this out, I'd appreciate it.
thanks
I just answered a similar question, see here for an example of how to do multiple gradients:
Question about a specific gradient with css3