Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Day 9 - Stamps #30DaysOfCSSGirls

Day 9 - Stamps #30DaysOfCSSGirls

Change one of your favourite images from into Stamp Collection. As anyone wants to be a stamp collector, anyone must be love to collect a lot of Stamp from everywhere and also every bit of Stamp has own story to share with everyone to know behind the scenes for the creation of the Stamp.

A Pen by Jia Qian Koh on CodePen.

License.

<div class="stamp">
<img src="https://swiftystar13.files.wordpress.com/2019/03/eeveewithbangs-e1552364506263.jpg"/>
</div>
<!--
https://stackoverflow.com/questions/21044525/how-can-i-create-a-postage-stamp-border
https://codepen.io/orhanveli/pen/tbGJL
https://twitter.com/Ribbonfiddle/status/1067493197545394183
--!>
body {
background: #b46a5e;
padding: 100px;
text-align: center;
}
.stamp {
width: 400px;
height: 450px;
display: inline-block;
padding: 10px;
background: white;
position: relative;
background: radial-gradient(
transparent 5px,
transparent 5px,
black 5px,
black
);
background-size: 20px 20px;
background-position: -10px -10px;
}
.stamp:before {
content: 'Image Credits: Purpleninfy';
position: absolute;
bottom: 0; left: 0;
font: 5px Corbel;
color: black;
opacity: 0.50;
line-height: 15%;
padding: 20px;
}
.stamp img {
}
/*
https://stackoverflow.com/questions/21044525/how-can-i-create-a-postage-stamp-border
https://codepen.io/orhanveli/pen/tbGJL
https://twitter.com/Ribbonfiddle/status/1067493197545394183
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment