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.
Related
How to make background have a border radius like this image:
You can use clipping. Here is a guide.
This is not a border radius nor a background for the top of the container. These seems to me, more like a background of the arrows of the slider.
Most of times, good designs relies on visual tricks AND it's a good practice to inspect webpages that you like and learn from other's code
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
After all these years, I still haven't learned CSS layout, so bear with me. I'm trying to create a container with rounded corners that I generated in Photoshop. The background of the container is white, so I have eight images: top-left-corner, top, top-right-corner, right, bottom-right-corner, bottom, bottom-left-corner, and left.
The edges have a drop shadow around them so yes, I do need 8 sides. How would I lay this out in CSS? I tried and failed miserably to do it with a table + CSS. How would I do it using divs?
EDIT:
Simply speaking, how would I lay something out like the pseudo code below
[IMG][IMG WIDTH="100%"][IMG]
If I write this in HTML, my images are split over three lines. How do I get it all to fit on one line?
I like the tutorials that have been put together by Matthew James Taylor. These tutorials won't help much with rounded corners, but they are great for CSS layout ideas.
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
Check out: Curvy Corners, it's a jQuery plugin that will look at your CSS and find any CSS3 properties for webkit: -webkit-border-radius: 10px; and make any corners with that CSS property round, in every browser.
I use it for IE and it works great! All you have to do is add the .js file to your directory and link it at the bottom of your HTML and it does all the work for you :)
There are a bunch of ways to do this, http://www.devwebpro.com/25-rounded-corners-techniques-with-css/.
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Are you using paddings? If so, you must subtract the padding from your other values (left/right).
I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3.
I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at:
www.dillerdesign.com/experiment/DD_roundies/
[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.
My suggestion would be to use position: absolute to place the images instead.
Other ideas would be:
Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
Even possibly drop #mtm and but the images directly in #main
Ignore old browers and use CSS3 rounded corners.