Is it possible to add an image as a window shadow using css?
Is it possible to add an image as a window shadow, for example to place an image with dots instead of a standard shadow?
https://i.stack.imgur.com/DOJGh.png
or somehow replace the shadow from the image with dots?
to get an effect similar to the image below.
+3
source to share
4 answers
Do you need something like this? It's not accurate box-shadow
, but it simulates. You can set any image you like as background
for .image::after
.
html, body {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.contain {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.image{
position: relative;
width: 200px;
height: 200px;
background-image: url(http://via.placeholder.com/200x200);
}
.image::after {
content: '';
background: linear-gradient(to bottom, #333, red);
position: absolute;
width: 100%;
height: 100%;
bottom: -10px;
right: -10px;
z-index: -1;
}
<div class="contain">
<div class="image"></div>
</div>
+3
source to share
I think this is exactly what you are looking for:
<div id="logo">
<img src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-
shadow/256/User-icon.png" alt=""/>
</div>
And CSS
body {
background: black;
}
#logo {
width: 200px;
height: 200px;
display: block;
position: relative;
}
#logo::after {
content: "";
background: url("https://rfclipart.com/image/big/3f-a9-1a/red-dotted-halftone-background-Download-Royalty-free-Vector-File-EPS-183199.jpg");
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 50%;
z-index: -1;
}
img {
width: 90%;
height: 90%;
padding: 5%;
display: block;
float: left;
border-radius: 50%;
box-shadow: 0px 0px 40px #ccc;
-moz-box-shadow: 0px 0px 40px #ccc;
-webkit-box-shadow: 0px 0px 40px #ccc;
}
+2
source to share
Like this one ?
.image_carousel img {
margin-right: 14px;
display: block;
float: left;
box-shadow: 3px 3px 1px #ccc;
-webkit-box-shadow: 3px 3px 1px #ccc;
-moz-box-shadow: 3px 3px 1px #ccc;
}
<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt=""/></div>
Credit goes to Joseph Marikle .
0
source to share
Like this?
span {
border: 2px dotted red;
display: inline-block;
}
img {
padding: 0;
margin: 0;
display: block;
}
<span class="dotted-border"><img src="http://placehold.it/200"/></span>
0
source to share