Skip to content

Instantly share code, notes, and snippets.

@SlashScreen

SlashScreen/deer.txt

Created February 17, 2023 20:05
Show Gist options
  • Save SlashScreen/3ad453cb4097b7e9cb4c39cdb458f792 to your computer and use it in GitHub Desktop.
Save SlashScreen/3ad453cb4097b7e9cb4c39cdb458f792 to your computer and use it in GitHub Desktop.
Download ZIP
drop shadow problem
Raw
deer.txt
the "deer.png" image is taken from here:
https://duckduckgo.com/?t=ffab&q=deer+png&atb=v342-1&iax=images&ia=images&iai=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Ff5%2F72%2F0c%2Ff5720c143faa8d11e3ab2ced3cefef59.png
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="drop-shadow"></div>
<p>hi</p>
</body>
</html>
Raw
main.css
.drop-shadow {
position: relative;
content: url("deer.png");
background-repeat: no-repeat;
width: 400px;
height: 400px;
}
.drop-shadow::before {
position: absolute;
content: url("deer.png");
transform: skewX(60deg);
filter: drop-shadow(0 0 0.5rem #000);
}
Raw
main.scss
.drop-shadow{
position: relative;
content: url("deer.png");
background-repeat: no-repeat;
width: 400px;
height: 400px;
&::before{
position: absolute;
content: url("deer.png");
//transform: rotateX(80deg);
transform: skewX(60deg);
filter: drop-shadow(0 0 0.5rem #000);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment