News

Canna Sprite

Canna-Sprite

Are you looking for the perfect emoji for your cannabis website? Do you have the technical know-how to implement your styles and update your code?

Look no further! I have done all of the work for you. Just save the image below to your website and update the paths to the image location.

Then you are set! Your New Canna Emoji’s

A┬ásprite sheet is an image that consists of several smaller images (sprites) and/or animations. Combining the small images in one big image improves the site’s performance, reduces memory usage, and speeds up the loading time of the website.

Save the original image to your image folder and update the CSS

<style>

.emoji{ display: inline-block; width: 99px; height: 99px; opacity:.25; }

.emoji:hover{ opacity:1; }
.e-1 { background: url(https://i.imgur.com/d2X4L01.png) 0 0; }
.e-2 { background: url(https://i.imgur.com/d2X4L01.png) 50% 0; }

.e-3 { background: url(https://i.imgur.com/d2X4L01.png) 100% 0; }
.e-4 { background: url(https://i.imgur.com/d2X4L01.png) 0 20%; }
.e-5 { background: url(https://i.imgur.com/d2X4L01.png) 50% 20%; }

.e-6 { background: url(https://i.imgur.com/d2X4L01.png) 100% 20%; }
.e-7 { background: url(https://i.imgur.com/d2X4L01.png) 0 40%; }
.e-8 { background: url(https://i.imgur.com/d2X4L01.png) 50% 40%; }

.e-9 { background: url(https://i.imgur.com/d2X4L01.png) 100% 40%; }
.e-10 { background: url(https://i.imgur.com/d2X4L01.png) 0 60%; }
.e-11 { background: url(https://i.imgur.com/d2X4L01.png) 50% 60%; }

.e-12 { background: url(https://i.imgur.com/d2X4L01.png) 100% 60%; }
.e-13 { background: url(https://i.imgur.com/d2X4L01.png) 0 80%; }
.e-14 { background: url(https://i.imgur.com/d2X4L01.png) 50% 80%; }

.e-15 { background: url(https://i.imgur.com/d2X4L01.png) 100% 80%; }
.e-16 { background: url(https://i.imgur.com/d2X4L01.png) 0 100%; }
.e-17 { background: url(https://i.imgur.com/d2X4L01.png) 50% 100%; }

.e-18 { background: url(https://i.imgur.com/d2X4L01.png) 100% 100%; }

</style>

<b class=”emoji e-1″></b>
<b class=”emoji e-2″></b>
<b class=”emoji e-3″></b>

<b class=”emoji e-4″></b>
<b class=”emoji e-5″></b>
<b class=”emoji e-6″></b>

<b class=”emoji e-7″></b>
<b class=”emoji e-8″></b>
<b class=”emoji e-9″></b>

<b class=”emoji e-10″></b>
<b class=”emoji e-11″></b>
<b class=”emoji e-12″></b>

<b class=”emoji e-13″></b>
<b class=”emoji e-14″></b>
<b class=”emoji e-15″></b>

<b class=”emoji e-16″></b>
<b class=”emoji e-17″></b>
<b class=”emoji e-18″></b>