I'm trying to get a transparent gradient of a certain size on the header of my website. I'm horrible with CSS (And CSS3, etc.) so I was wondering if anybody could help me?
Just go to ColorZilla and adjust gradient as per your requirment from there. Then after it will show you some css codes. Just make it copy and paste in your css file.It will make your gradient easily.
You can use this site for generate your gradient background and this ok in IE 6,7,8,9 and other browser
www.colorzilla.com
Related
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.
Today i was customizing my website and i remembered a very nice CSS effect i saw a few months ago. I didnt find it on my Bookmarks.
The website had a Large logo with colors moving on it. After going on the Source Code, i saw that the Logo was a Black PNG file, and there was another Image, an Color Circle sppining on it, but there was some overlay effect that the colors of the circle only appear on the black parts of the logo.
anyone knows the website or how can i use this effect? to make some image appear only on non-trasparent parts of another image?
Thank you and best regards
Sounds like it might be CSS blending modes, which were introduced by Adobe and currently work in some builds of WebKit with a -webkit prefix.
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 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 have a transparent .png image file which I have attached it on my site, however the file has some background colour (grey) which I have no understanding why it is there. It's sure in transparent mode when I open it in any image editor or view, it has transparent background. Why when I link it, and when displaying on my site it isn't transparent ?
This is the method I'm using http://book.cakephp.org/#!/view/1441/image
I've tried embedding the image in CSS but find it a bit troublesome because I need the image to be clickable that links to my homepage.
Anyone can suggest any way to achieve the result I mentioned? ..perhaps some links or scripts that would work..I appreciate that.
:-)
It's possible there's some reprocessing going on. Do you have a link to the image, or better yet a link where we can see the markup / CSS as well?
I found a way to solve this not sure if it's the best but it works.
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
If you're using IE6, the grey background will be there because IE6 does not support alpha-transparency in images (without using behaviours or hacks).
This might help:
http://24ways.org/2007/supersleight-transparent-png-in-ie6