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
Related
I am trying to create 3d like animation for building and floors.
This is my initial design idea.
I want to create this divs with 3d effects and possible some animation on hover to recognize the current div.
I have never done animation or worked with 3d css effects so your help is much appreciated
Thanks in advance !
Im thinking that you could likely increase the z-index in css to make it appear on top of other elements.
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 should preface this by saying that I am brand new to the world of SVGs. I'm playing around with a rather simple experiment using SVGs and CSS3 animations.
I have created the SVG in Inkscape and saved it as a plain SVG. I've then put it into HTML to play around with some CSS3 animations.
As you can see from my link below the whole SVG bounces strangely, this can be removed by removing the .arm class from the CSS. (which stops the single red circle group that has an arm class).
The problem is that I want the red circle groups to animate (spin) whilst the entire larger group is also spinning.
Any ideas or blatant things I may be doing wrong? (I do realize it's not the best SVG but I was just experimenting).
http://codepen.io/Fernker/pen/cwvfB
Note 1: After playing around a bit more if I remove either .arm or .center CSS rules then the wobble stops, but together they produce the wobble.
Here I fixed it for you (kind of).
http://codepen.io/anon/pen/unmfE
Basically I hacked it so it works, but you'll need to wrap your SVG in another container and have that rotate from center. If you animate too far down the nest, it will be affected by siblings.
It looks as though the shape is not creating a perfect circle when spinning, therefore shifting the center whilst spinning causing the wobble.
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.
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).