CSS - drop-shadow issue
up vote
0
down vote
favorite
I'm working with the drop-shadow property. It is working fine in browsers except internet explorer. Its important this works in internet explorer 11 for me. What can I do? Thanks in advance.
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
filter: drop-shadow(5px 5px 5px #222);
-webkit-filter: drop-shadow(5px 5px 5px #222);
-ms-filte: drop-shadow(5px 5px 5px #222);
}<div class="nb-view-project-image"></div>css internet-explorer-11 dropshadow
edited Nov 7 at 9:38
Syfer
2,52421023
asked Nov 7 at 8:48
Bst_coder
11
add a comment |
up vote
0
down vote
favorite
I'm working with the drop-shadow property. It is working fine in browsers except internet explorer. Its important this works in internet explorer 11 for me. What can I do? Thanks in advance.
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
filter: drop-shadow(5px 5px 5px #222);
-webkit-filter: drop-shadow(5px 5px 5px #222);
-ms-filte: drop-shadow(5px 5px 5px #222);
}<div class="nb-view-project-image"></div>css internet-explorer-11 dropshadow
edited Nov 7 at 9:38
Syfer
2,52421023
asked Nov 7 at 8:48
Bst_coder
11
3
Maybe it's the typographical error on -ms-filte: ?
– Jeremiah Cabigting
Nov 7 at 8:51
Hey Jeremiah Cabigting, I edited and tried again. But not working...
– Bst_coder
Nov 7 at 8:52
@JeremiahCabigting. It is not to remove, it is to add the "r" at the end, so-ms-filter.
– Serge Inácio
Nov 7 at 8:55
Yeah Jeremiah Cabigting , I edited and tried, but not working..:)
– Bst_coder
Nov 7 at 8:56
filteris not supported in IE11 (that includes-ms-filter). Instead usebox-shadow
– lumio
Nov 7 at 8:58
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm working with the drop-shadow property. It is working fine in browsers except internet explorer. Its important this works in internet explorer 11 for me. What can I do? Thanks in advance.
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
filter: drop-shadow(5px 5px 5px #222);
-webkit-filter: drop-shadow(5px 5px 5px #222);
-ms-filte: drop-shadow(5px 5px 5px #222);
}<div class="nb-view-project-image"></div>css internet-explorer-11 dropshadow
edited Nov 7 at 9:38
Syfer
2,52421023
asked Nov 7 at 8:48
Bst_coder
11
I'm working with the drop-shadow property. It is working fine in browsers except internet explorer. Its important this works in internet explorer 11 for me. What can I do? Thanks in advance.
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
filter: drop-shadow(5px 5px 5px #222);
-webkit-filter: drop-shadow(5px 5px 5px #222);
-ms-filte: drop-shadow(5px 5px 5px #222);
}<div class="nb-view-project-image"></div>.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
filter: drop-shadow(5px 5px 5px #222);
-webkit-filter: drop-shadow(5px 5px 5px #222);
-ms-filte: drop-shadow(5px 5px 5px #222);
}<div class="nb-view-project-image"></div>.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
filter: drop-shadow(5px 5px 5px #222);
-webkit-filter: drop-shadow(5px 5px 5px #222);
-ms-filte: drop-shadow(5px 5px 5px #222);
}<div class="nb-view-project-image"></div>css internet-explorer-11 dropshadow
css internet-explorer-11 dropshadow
edited Nov 7 at 9:38
Syfer
2,52421023
asked Nov 7 at 8:48
Bst_coder
11
edited Nov 7 at 9:38
Syfer
2,52421023
asked Nov 7 at 8:48
Bst_coder
11
edited Nov 7 at 9:38
Syfer
2,52421023
edited Nov 7 at 9:38
Syfer
2,52421023
edited Nov 7 at 9:38
Syfer
2,52421023
2,52421023
asked Nov 7 at 8:48
Bst_coder
11
asked Nov 7 at 8:48
Bst_coder
11
asked Nov 7 at 8:48
Bst_coder
11
11
3
Maybe it's the typographical error on -ms-filte: ?
– Jeremiah Cabigting
Nov 7 at 8:51
Hey Jeremiah Cabigting, I edited and tried again. But not working...
– Bst_coder
Nov 7 at 8:52
@JeremiahCabigting. It is not to remove, it is to add the "r" at the end, so-ms-filter.
– Serge Inácio
Nov 7 at 8:55
Yeah Jeremiah Cabigting , I edited and tried, but not working..:)
– Bst_coder
Nov 7 at 8:56
filteris not supported in IE11 (that includes-ms-filter). Instead usebox-shadow
– lumio
Nov 7 at 8:58
add a comment |
3
Maybe it's the typographical error on -ms-filte: ?
– Jeremiah Cabigting
Nov 7 at 8:51
Hey Jeremiah Cabigting, I edited and tried again. But not working...
– Bst_coder
Nov 7 at 8:52
@JeremiahCabigting. It is not to remove, it is to add the "r" at the end, so-ms-filter.
– Serge Inácio
Nov 7 at 8:55
Yeah Jeremiah Cabigting , I edited and tried, but not working..:)
– Bst_coder
Nov 7 at 8:56
filteris not supported in IE11 (that includes-ms-filter). Instead usebox-shadow
– lumio
Nov 7 at 8:58
3
3
Maybe it's the typographical error on -ms-filte: ?
– Jeremiah Cabigting
Nov 7 at 8:51
Maybe it's the typographical error on -ms-filte: ?
– Jeremiah Cabigting
Nov 7 at 8:51
Hey Jeremiah Cabigting, I edited and tried again. But not working...
– Bst_coder
Nov 7 at 8:52
Hey Jeremiah Cabigting, I edited and tried again. But not working...
– Bst_coder
Nov 7 at 8:52
@JeremiahCabigting. It is not to remove, it is to add the "r" at the end, so
-ms-filter.– Serge Inácio
Nov 7 at 8:55
@JeremiahCabigting. It is not to remove, it is to add the "r" at the end, so
-ms-filter.– Serge Inácio
Nov 7 at 8:55
Yeah Jeremiah Cabigting , I edited and tried, but not working..:)
– Bst_coder
Nov 7 at 8:56
Yeah Jeremiah Cabigting , I edited and tried, but not working..:)
– Bst_coder
Nov 7 at 8:56
filter is not supported in IE11 (that includes -ms-filter). Instead use box-shadow– lumio
Nov 7 at 8:58
filter is not supported in IE11 (that includes -ms-filter). Instead use box-shadow– lumio
Nov 7 at 8:58
add a comment |
3 Answers
3
active
oldest
votes
up vote
1
down vote
Try this css:
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
box-shadow: 5px 5px 5px #222;
}
answered Nov 7 at 8:55
Szymon Zakiewicz
516
add a comment |
up vote
0
down vote
Try using:
-moz-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
Or:
-webkit-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
answered Nov 7 at 8:55
user3710372
135
Why would you need-*-box-shadowhere?box-shadowalone is good enough
– lumio
Nov 7 at 9:00
Just adds extra support for older browsers
– user3710372
Nov 7 at 9:04
Ok, but then you should write them beforebox-shadowas they might overwrite it. Always write the property without the prefix last. ;)
– lumio
Nov 7 at 9:08
Very true, amended it now, thanks! ^-^
– user3710372
Nov 7 at 9:11
add a comment |
up vote
0
down vote
You could also try to use the following code:
.nb-view-project-image {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
answered Nov 8 at 6:56
Dillion
29913
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
Try this css:
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
box-shadow: 5px 5px 5px #222;
}
answered Nov 7 at 8:55
Szymon Zakiewicz
516
add a comment |
up vote
1
down vote
Try this css:
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
box-shadow: 5px 5px 5px #222;
}
answered Nov 7 at 8:55
Szymon Zakiewicz
516
add a comment |
up vote
1
down vote
up vote
1
down vote
Try this css:
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
box-shadow: 5px 5px 5px #222;
}
answered Nov 7 at 8:55
Szymon Zakiewicz
516
Try this css:
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
box-shadow: 5px 5px 5px #222;
}
answered Nov 7 at 8:55
Szymon Zakiewicz
516
answered Nov 7 at 8:55
Szymon Zakiewicz
516
answered Nov 7 at 8:55
Szymon Zakiewicz
516
answered Nov 7 at 8:55
Szymon Zakiewicz
516
516
add a comment |
add a comment |
up vote
0
down vote
Try using:
-moz-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
Or:
-webkit-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
answered Nov 7 at 8:55
user3710372
135
Why would you need-*-box-shadowhere?box-shadowalone is good enough
– lumio
Nov 7 at 9:00
Just adds extra support for older browsers
– user3710372
Nov 7 at 9:04
Ok, but then you should write them beforebox-shadowas they might overwrite it. Always write the property without the prefix last. ;)
– lumio
Nov 7 at 9:08
Very true, amended it now, thanks! ^-^
– user3710372
Nov 7 at 9:11
add a comment |
up vote
0
down vote
Try using:
-moz-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
Or:
-webkit-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
answered Nov 7 at 8:55
user3710372
135
Why would you need-*-box-shadowhere?box-shadowalone is good enough
– lumio
Nov 7 at 9:00
Just adds extra support for older browsers
– user3710372
Nov 7 at 9:04
Ok, but then you should write them beforebox-shadowas they might overwrite it. Always write the property without the prefix last. ;)
– lumio
Nov 7 at 9:08
Very true, amended it now, thanks! ^-^
– user3710372
Nov 7 at 9:11
add a comment |
up vote
0
down vote
up vote
0
down vote
Try using:
-moz-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
Or:
-webkit-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
answered Nov 7 at 8:55
user3710372
135
Try using:
-moz-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
Or:
-webkit-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
answered Nov 7 at 8:55
user3710372
135
edited Nov 7 at 9:10
answered Nov 7 at 8:55
user3710372
135
answered Nov 7 at 8:55
user3710372
135
answered Nov 7 at 8:55
user3710372
135
135
Why would you need-*-box-shadowhere?box-shadowalone is good enough
– lumio
Nov 7 at 9:00
Just adds extra support for older browsers
– user3710372
Nov 7 at 9:04
Ok, but then you should write them beforebox-shadowas they might overwrite it. Always write the property without the prefix last. ;)
– lumio
Nov 7 at 9:08
Very true, amended it now, thanks! ^-^
– user3710372
Nov 7 at 9:11
add a comment |
Why would you need-*-box-shadowhere?box-shadowalone is good enough
– lumio
Nov 7 at 9:00
Just adds extra support for older browsers
– user3710372
Nov 7 at 9:04
Ok, but then you should write them beforebox-shadowas they might overwrite it. Always write the property without the prefix last. ;)
– lumio
Nov 7 at 9:08
Very true, amended it now, thanks! ^-^
– user3710372
Nov 7 at 9:11
Why would you need
-*-box-shadow here? box-shadow alone is good enough– lumio
Nov 7 at 9:00
Why would you need
-*-box-shadow here? box-shadow alone is good enough– lumio
Nov 7 at 9:00
Just adds extra support for older browsers
– user3710372
Nov 7 at 9:04
Just adds extra support for older browsers
– user3710372
Nov 7 at 9:04
Ok, but then you should write them before
box-shadow as they might overwrite it. Always write the property without the prefix last. ;)– lumio
Nov 7 at 9:08
Ok, but then you should write them before
box-shadow as they might overwrite it. Always write the property without the prefix last. ;)– lumio
Nov 7 at 9:08
Very true, amended it now, thanks! ^-^
– user3710372
Nov 7 at 9:11
Very true, amended it now, thanks! ^-^
– user3710372
Nov 7 at 9:11
add a comment |
up vote
0
down vote
You could also try to use the following code:
.nb-view-project-image {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
answered Nov 8 at 6:56
Dillion
29913
add a comment |
up vote
0
down vote
You could also try to use the following code:
.nb-view-project-image {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
answered Nov 8 at 6:56
Dillion
29913
add a comment |
up vote
0
down vote
up vote
0
down vote
You could also try to use the following code:
.nb-view-project-image {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
answered Nov 8 at 6:56
Dillion
29913
You could also try to use the following code:
.nb-view-project-image {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
answered Nov 8 at 6:56
Dillion
29913
answered Nov 8 at 6:56
Dillion
29913
answered Nov 8 at 6:56
Dillion
29913
answered Nov 8 at 6:56
Dillion
29913
29913
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
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%2f53186051%2fcss-drop-shadow-issue%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
3
Maybe it's the typographical error on -ms-filte: ?
– Jeremiah Cabigting
Nov 7 at 8:51
Hey Jeremiah Cabigting, I edited and tried again. But not working...
– Bst_coder
Nov 7 at 8:52
@JeremiahCabigting. It is not to remove, it is to add the "r" at the end, so
-ms-filter.– Serge Inácio
Nov 7 at 8:55
Yeah Jeremiah Cabigting , I edited and tried, but not working..:)
– Bst_coder
Nov 7 at 8:56
filteris not supported in IE11 (that includes-ms-filter). Instead usebox-shadow– lumio
Nov 7 at 8:58