Transparancy on image not working together well with box-shadow
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.
css web photoshop shadow
edited Nov 10 '18 at 22:59
kit
1,1063716
asked Nov 10 '18 at 13:14
Lorenz Klein
1
add a comment |
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.
css web photoshop shadow
edited Nov 10 '18 at 22:59
kit
1,1063716
asked Nov 10 '18 at 13:14
Lorenz Klein
1
add a comment |
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.
css web photoshop shadow
edited Nov 10 '18 at 22:59
kit
1,1063716
asked Nov 10 '18 at 13:14
Lorenz Klein
1
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.
css web photoshop shadow
css web photoshop shadow
edited Nov 10 '18 at 22:59
kit
1,1063716
asked Nov 10 '18 at 13:14
Lorenz Klein
1
edited Nov 10 '18 at 22:59
kit
1,1063716
asked Nov 10 '18 at 13:14
Lorenz Klein
1
edited Nov 10 '18 at 22:59
kit
1,1063716
edited Nov 10 '18 at 22:59
kit
1,1063716
edited Nov 10 '18 at 22:59
kit
1,1063716
1,1063716
asked Nov 10 '18 at 13:14
Lorenz Klein
1
asked Nov 10 '18 at 13:14
Lorenz Klein
1
asked Nov 10 '18 at 13:14
Lorenz Klein
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 10 '18 at 17:47
MartinBA
7161213
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239307%2ftransparancy-on-image-not-working-together-well-with-box-shadow%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 10 '18 at 17:47
MartinBA
7161213
add a comment |
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.
answered Nov 10 '18 at 17:47
MartinBA
7161213
add a comment |
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.
answered Nov 10 '18 at 17:47
MartinBA
7161213
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.
answered Nov 10 '18 at 17:47
MartinBA
7161213
answered Nov 10 '18 at 17:47
MartinBA
7161213
answered Nov 10 '18 at 17:47
MartinBA
7161213
answered Nov 10 '18 at 17:47
MartinBA
7161213
7161213
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239307%2ftransparancy-on-image-not-working-together-well-with-box-shadow%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
