Open in app

Sign in

Write

Sign in

Make a cool emoji display box

Imagineee
5 min readJan 7, 2021

--

demo of the project

Do you want to make the above with html, css, JavaScript. Then get ready because we are going to make this in less than 150 lines of code.

first lets setup the html. Make a file named ‘emoji-icons.html’, open in your favorite text editor and pastes the code bellow into it.

<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="Emoji Icons">
<title>Emoji Icons</title>
<style>
</style>
</head>
<body>
</body>
</html>

This is our basic html now we are going to add the styling and content to this.

Now let's add out content, which are the emoji holders.

add the bellow to the body of the html

<div class='grid'>
  <div class='cell'>
    <div class='text'>🔮</div>
    <div class='blur'>🔮</div>
  </div>
  <div class='cell'>
    <div class='text'>🎉</div>
    <div class='blur'>🎉</div>
  </div>
  <div class='cell'>
    <div class='text'>🎆</div>
    <div class='blur'>🎆</div>
  </div>
  <div class='cell'>
    <div class='text'>✨</div>
    <div class='blur'>✨</div>
  </div>
  <div class='cell'>
    <div class='text'>🎇</div>
    <div class='blur'>🎇</div>
  </div>
  <div class='cell'>
    <div class='text'>💖</div>
    <div class='blur'>💖</div>
  </div>
  <div class='cell'>
    <div class='text'>👾</div>
    <div class='blur'>👾</div>
  </div>
  <div class='cell'>
    <div class='text'>🦜</div>
    <div class='blur'>🦜</div>
  </div>
  <div class='cell'>
    <div class='text'>🍒</div>
    <div class='blur'>🍒</div>
  </div>
  <div class='cell'>
    <div class='text'>😅</div>
    <div class='blur'>😅</div>
  </div>
  <div class='cell'>
    <div class='text'>🧊</div>
    <div class='blur'>🧊</div>
  </div>
  <div class='cell'>
    <div class='text'>🚀</div>
    <div class='blur'>🚀</div>
  </div>
  <div class='cell'>
    <div class='text'>🌌</div>
    <div class='blur'>🌌</div>
  </div>
  <div class='cell'>
    <div class='text'>🌊</div>
    <div class='blur'>🌊</div>
  </div>
  <div class='cell'>
    <div class='text'>📦</div>
    <div class='blur'>📦</div>
  </div>
  <div class='cell'>
    <div class='text'>🧀</div>
    <div class='blur'>🧀</div>
  </div>
  <div class='cell'>
    <div class='text'>🍕</div>
    <div class='blur'>🍕</div>
  </div>
  <div class='cell'>
    <div class='text'>🥯</div>
    <div class='blur'>🥯</div>
  </div>
  <div class='cell'>
    <div class='text'>🥐</div>
    <div class='blur'>🥐</div>
  </div>
  <div class='cell'>
    <div class='text'>🧇</div>
    <div class='blur'>🧇</div>
  </div>
  <div class='cell'>
    <div class='text'>🥞</div>
    <div class='blur'>🥞</div>
  </div>
  <div class='cell'>
    <div class='text'>🧈</div>
    <div class='blur'>🧈</div>
  </div>
  <div class='cell'>
    <div class='text'>🥨</div>
    <div class='blur'>🥨</div>
  </div>
  <div class='cell'>
    <div class='text'>🍪</div>
    <div class='blur'>🍪</div>
  </div>
  <div class='cell'>
    <div class='text'>🍩</div>
    <div class='blur'>🍩</div>
  </div>
</div>

A recommendation is to use a windows computer as the emojis are a lot pleasant to look at.

I’ll explain what's happening in the above now

first, we have the div with a class of ‘grid’ for holding emojis; next, if we take one of the div's from inside the grid, it should look like:

<div class='cell'>
 <div class='text'>🍩</div>
 <div class='blur'>🍩</div>
</div>

So, we have a div with a class of ‘cell’ which is the card to hold the emoji; inside we have a div, named text, which holds the emoji, and a div, named blur, which holds an emoji to get the blurry background effect

Now let's add the styling so it looks like some thing

add the bellow to the head of the html

<style>
body {
  display: grid;
  place-content: center;
  height: 100vh;
  -webkit-user-select: none;
  transition-duration: .2s;
}
* {
  transition-duration: .2s;
}
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1rem;
}
.grid .cell {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  border: lightgrey solid 2px;
  box-shadow: 3px 3px 10px lightgrey;
  transform-style: preserve-3d;
  transform: perspective(2000px);
}
.cell:hover {
  box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
}
.grid .cell .text {
  font-size: 50px;
  position: relative;
  z-index: 1;
  transform: translateZ(200px);
}
.grid .cell .blur {
  font-size: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(20px) opacity(0.2);
  border-radius: 12px;
}
</style>

this is quite large, so I will explain the key bits

The ‘body’ is there for applying the center effect; the ‘.grid’ is for setting the grid; the ‘.grid .cell’ is the set up the cards to act cards; ‘.cell:hover’ is there to add a shadow effect; ‘.grid .cell .text’ just makes the text look good.; ‘.grid .cell .blur’ is to apply the blur effect.

by now it should look like this

halfway through the demo

Now let's add the tilt effect

Add the this to the bottom of the body

<script src="https://cdn.jsdelivr.net/gh/micku7zu/vanilla-tilt.js/dist/vanilla-tilt.min.js"></script>

This is a link to the Vanilla-tilt.js, a JavaScript library for adding tilt effect.

Now add this to the bottom of the body

<script id="rendered-js" >
VanillaTilt.init(document.querySelectorAll(".cell"), {
  max: 50,
  speed: 500,
  perspective: 1000,
  reverse: true,
  scale: 1.25,
  glare: true,
  "max-glare": 0.8,
  gyroscope: true
});
</script>

This is the code to setup the cards for the tilt.

And there you go.

Demo of the project

you can customize it by adding this to the div with a class of grid

<div class='cell'>
  <div class='text'>-->your emoji<--</div>
  <div class='blur'>-->your emoji<--</div>
</div>

the whole code:

<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="Emoji Icons">
<title>Emoji Icons</title>
<style>
body {
  display: grid;
  place-content: center;
  height: 100vh;
  -webkit-user-select: none;
  transition-duration: .2s;
}
* {
  transition-duration: .2s;
}
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1rem;
}
.grid .cell {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  border: lightgrey solid 2px;
  box-shadow: 3px 3px 10px lightgrey;
  transform-style: preserve-3d;
  transform: perspective(2000px);
}
.cell:hover {
  box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
}
.grid .cell .text {
  font-size: 50px;
  position: relative;
  z-index: 1;
  transform: translateZ(200px);
}
.grid .cell .blur {
  font-size: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(20px) opacity(0.2);
  border-radius: 12px;
}
</style>
</head>
<body>
  <div class='grid'>
  <div class='cell'>
    <div class='text'>🔮</div>
    <div class='blur'>🔮</div>
  </div>
  <div class='cell'>
    <div class='text'>🎉</div>
    <div class='blur'>🎉</div>
  </div>
  <div class='cell'>
    <div class='text'>🎆</div>
    <div class='blur'>🎆</div>
  </div>
  <div class='cell'>
    <div class='text'>✨</div>
    <div class='blur'>✨</div>
  </div>
  <div class='cell'>
    <div class='text'>🎇</div>
    <div class='blur'>🎇</div>
  </div>
  <div class='cell'>
    <div class='text'>💖</div>
    <div class='blur'>💖</div>
  </div>
  <div class='cell'>
    <div class='text'>👾</div>
    <div class='blur'>👾</div>
  </div>
  <div class='cell'>
    <div class='text'>🦜</div>
    <div class='blur'>🦜</div>
  </div>
  <div class='cell'>
    <div class='text'>🍒</div>
    <div class='blur'>🍒</div>
  </div>
  <div class='cell'>
    <div class='text'>😅</div>
    <div class='blur'>😅</div>
  </div>
  <div class='cell'>
    <div class='text'>🧊</div>
    <div class='blur'>🧊</div>
  </div>
  <div class='cell'>
    <div class='text'>🚀</div>
    <div class='blur'>🚀</div>
  </div>
  <div class='cell'>
    <div class='text'>🌌</div>
    <div class='blur'>🌌</div>
  </div>
  <div class='cell'>
    <div class='text'>🌊</div>
    <div class='blur'>🌊</div>
  </div>
  <div class='cell'>
    <div class='text'>📦</div>
    <div class='blur'>📦</div>
  </div>
  <div class='cell'>
    <div class='text'>🧀</div>
    <div class='blur'>🧀</div>
  </div>
  <div class='cell'>
    <div class='text'>🍕</div>
    <div class='blur'>🍕</div>
  </div>
  <div class='cell'>
    <div class='text'>🥯</div>
    <div class='blur'>🥯</div>
  </div>
  <div class='cell'>
    <div class='text'>🥐</div>
    <div class='blur'>🥐</div>
  </div>
  <div class='cell'>
    <div class='text'>🧇</div>
    <div class='blur'>🧇</div>
  </div>
  <div class='cell'>
    <div class='text'>🥞</div>
    <div class='blur'>🥞</div>
  </div>
  <div class='cell'>
    <div class='text'>🧈</div>
    <div class='blur'>🧈</div>
  </div>
  <div class='cell'>
    <div class='text'>🥨</div>
    <div class='blur'>🥨</div>
  </div>
  <div class='cell'>
    <div class='text'>🍪</div>
    <div class='blur'>🍪</div>
  </div>
  <div class='cell'>
    <div class='text'>🍩</div>
    <div class='blur'>🍩</div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/gh/micku7zu/vanilla-tilt.js/dist/vanilla-tilt.min.js"></script>
<script id="rendered-js" >
VanillaTilt.init(document.querySelectorAll(".cell"), {
  max: 50,
  speed: 500,
  perspective: 1000,
  reverse: true,
  scale: 1.25,
  glare: true,
  "max-glare": 0.8,
  gyroscope: true
});
</script>
</body>
</html>

view it on Emoji Icons

Js
Htm
CSS

--

--

Imagineee

Written by Imagineee

0 Followers

A small developer with big ambitious dreams

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams