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.
Related
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 am using the pro-theme "Frame" for Wordpress and have not been able to find support elsewhere for an issue (developer of theme won't support plugin compatibility issues--understandably). I am trying to re-position header/nav so that it does not overflow onto background images, rather, the background images are positioned below the header/nav wrapper/container. I've been trying to fix this issue for a few days now and cannot find a solution.
For example: below the link will show the BG image of a woman and I would like her head to not be cropped/covered. I also need whatever changes to be responsive and work with the additional features on the site (i.e. - homepage has a slideshow, etc.).
LINK
Thank you for any help--it is much appreciated!
Best regards,
The HTML of the page is a mess. I suggest to modify the background image of the woman itself (with whatever editor you want), just add a top margin to the image, let's say 80px white colour.
This is the easiest solution. If you provide me more details were this background is generated/paced I may be able to give you the CSS solution.
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
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 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