Skip to content

Instantly share code, notes, and snippets.

@davidaurelio
Last active April 16, 2023 15:50
Show Gist options
  • Save davidaurelio/b09420c3cc0f2dc38be031b349aea0b2 to your computer and use it in GitHub Desktop.
Save davidaurelio/b09420c3cc0f2dc38be031b349aea0b2 to your computer and use it in GitHub Desktop.
Pixel-perfect scale
/**
* Pixel-perfect scale
*/
.frame {
position: relative;
margin: 48px;
}
.rocketship {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABt0lEQVR4AWOgPrh78dKi7UdKV15t2v6kavpOfErvnDgxOb+43d1v7aSZC09dX3bjY1DDGpyqLx440JmSJa+hJ8/AdKm98/3vr4v3Hi3sX4td9alLV9d2T46WkhdlYGgUE3t3YM+t5/fL6muxq941Z0njurP59ROn+gTv8PB8uWTBuduXZi+eW93YiFD0bfWqH8FB3729duvqR+VNtuo+4dq5c9ZOoMF3D18+M33BrMyCfITqX5cufjVU+8/H8oWZoUZQUil9tnXnkZyNT5ccPLlzx+yJMybFpaWhuOFns9//WK4fbszHraX9Td18Jx0tW3tldd3EhoQq26xGv4hoFNVf93f+2yL7f7nIq5XpkzqbgzLqK2bt6IpKqbP1kvcr1vIvxBmO727Oq+6KMfMITZGQmiwsYqtul69oiFP1+6vT/34offakqMJedYmf6RZnwytMLG81NbGrfn1u7ZdrVv/+Tjw6JWxjgcHFZe03tNT/MzJ81MalYW/B/19O399knphuA/JVg/9/YYZvfLwfmxqxa3izTPP7dtXn2+Mh3P9TXd85qX/Ztg2nB17snYjMfXVwKZ4UCQAMSsgcb3SdewAAAABJRU5ErkJggg==) no-repeat;
width: 16px;
height: 16px;
position: absolute;
transform-origin: 0 0;
}
.rs1 {
zoom: 3;
}
.rs2 {
transform: scale(3);
left: 96px;
}
.rs3 {
transform: scale(3);
image-rendering: pixelated;
left: 192px;
}
.rs4 {
transform: scale(3);
image-rendering: crisp-edges;
left: 288px;
}
@keyframes bgcol {
0% { background-color: hsl(60, 75%, 95%); }
33.333% { background-color: hsl(180, 75%, 95%); }
66.667% { background-color: hsl(300, 75%, 95%); }
100% { background-color: hsl(420, 75%, 95%); }
}
body {
animation: bgcol 5s infinite linear;
}
<div class=frame>
<div class="rocketship rs1"></div>
<div class="rocketship rs2"></div>
<div class="rocketship rs3"></div>
<div class="rocketship rs4"></div>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment