Show DevBest [HTML/CSS] Animated Signature Creator

[sumo]

A while ago, I designed a simple signature in HTML/CSS so that I wouldn't have to remake them with actual GFX each time. I've barely been using it, so I thought why not just give it out to others.

Spoiler: Things you'll need

• At least 7 brain cells.
• The Whitney font (which Discord uses) and can be found here:
  You must be registered for see links
  , or you can customize the font to whatever fonts you already possess (for first signature).
• The Arial Unicode MS Font which can be found here:
  You must be registered for see links
  (for second signature)
• LICEcap Screen Caster/Gif Maker, it can be found here:
  You must be registered for see links
  . You can either use this or a different screen caster/gif maker you already possess. I usually make the gifs 15fps, and 5-8 seconds long, then upload them to Imgur.

When looking for animated backgrounds, I usually just look for animated .gifs of anime action scenes. Despite me not even watching anime, they have some very aesthetic battle scenes.

Example of first Signature:

You must be registered for see links

Spoiler: Source Code

<div class="container">
  <div class="user-info">
    Username
  </div>
  <div>
  <div class="user-info-2">
   Motto | Motto | Motto
    </div>
  </div>
</div>

body {
  background-color: white;
}
.container {
  width: 455px;
  height: 60px;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 9px;
  background-image: url("https://i.gifer.com/4Ef4.gif");
  background-size: 455px;
  background-position: center;
  color: white;
  position: relative;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  border-color: white;
  border-style: outset;
  margin: auto;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
  text-align: center;
}

.user-info {
   font-family: "Calibri";
}
.user-info-2,
.award-info {
  font-family: "Whitney Medium";
}
.user-info {
  font-size: 1em;
  font-weight: bold;
  line-height: 19px;
  text-shadow: 0 2px 1px black;
}

.user-info-2 {
  font-size: 0.8em;
  color: white;
  text-shadow: 0 2px 1px black;
}

#icon {
  float: left;
  padding-right: 5px;
}

.award-info {
  float: right;
  position: absolute;
  line-height: 0.5px;
  text-align: right;
  font-weight: bold;
  right: 15px;
  top: 9px;
  font-size: 0.8em;
}

.award-info-2 {
  font-size: 0.8em;
  font-weight: normal;
}

Example of second signautre:

You must be registered for see links

Spoiler: Source Code

<div class="container">
  <span id="icon"><img src="https://cdn4.iconfinder.com/data/icons/PixeloPhilia_2/PNG/medal.png" alt="Award"></span>
<div class="award-info">
    <p>2019 Community Awards</p>
    <span class="award-info-2">DevBest.com</span>
  </div>
  <div class="user-info">
    Sumo
  </div>
  <div class="user-info-2">
    Most Inactive
  </div>
</div>

body {
  background-color: white;
}
.container {
  width: 455px;
  height: 60px;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 13px;
  background-image: url("https://i.gifer.com/4Ef4.gif");
  background-size: 455px;
  background-position: center;
  color: white;
  position: relative;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  border-color: white;
  border-style: outset;
  margin: auto;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.25);
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.user-info,
.user-info-2,
.award-info {
  font-family: "Arial Unicode MS";
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.user-info {
  font-size: 0.75em;
  font-weight: bold;
  line-height: 17px;
}

.user-info-2 {
  font-size: 0.6em;
}

#icon {
  float: left;
  padding-right: 5px;
}

.award-info {
  float: right;
  position: absolute;
  line-height: 0.5px;
  text-align: right;
  font-weight: bold;
  right: 15px;
  top: 9px;
  font-size: 0.8em;
}

.award-info-2 {
  font-size: 0.8em;
  font-weight: normal;
}