Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Software Development
Programming
[HTML/CSS] Animated Signature Creator
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="sumo" data-source="post: 448247" data-attributes="member: 42057"><p>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.</p><p></p><p>[spoiler="Things you'll need"]</p><ul> <li data-xf-list-type="ul">At least 7 brain cells.</li> <li data-xf-list-type="ul">The Whitney font (which Discord uses) and can be found here: <a href="http://fontsgeek.com/fonts/Whitney-Medium" target="_blank">http://fontsgeek.com/fonts/Whitney-Medium</a>, or you can customize the font to whatever fonts you already possess (for first signature).</li> <li data-xf-list-type="ul">The Arial Unicode MS Font which can be found here: <a href="https://www.wfonts.com/font/arial-unicode-ms" target="_blank">https://www.wfonts.com/font/arial-unicode-ms</a> (for second signature)</li> <li data-xf-list-type="ul">LICEcap Screen Caster/Gif Maker, it can be found here: <a href="https://www.cockos.com/licecap/" target="_blank">https://www.cockos.com/licecap/</a>. 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.</li> </ul><p>[/spoiler]</p><p></p><p>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.</p><p style="text-align: center"></p> <p style="text-align: center">Example of first Signature:</p> <p style="text-align: center"><img src="https://i.imgur.com/hxey6TJ.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><a href="https://codepen.io/anon/pen/qwzNRB" target="_blank">https://codepen.io/anon/pen/qwzNRB</a></p> <p style="text-align: center">[SPOILER="Source Code"]</p> <p style="text-align: center">[CODE=html]</p> <p style="text-align: center"><div class="container"></p> <p style="text-align: center"> <div class="user-info"></p> <p style="text-align: center"> Username</p> <p style="text-align: center"> </div></p> <p style="text-align: center"> <div></p> <p style="text-align: center"> <div class="user-info-2"></p> <p style="text-align: center"> Motto | Motto | Motto</p> <p style="text-align: center"> </div></p> <p style="text-align: center"> </div></p> <p style="text-align: center"></div>[/CODE]</p> <p style="text-align: center">[CODE=css]</p> <p style="text-align: center">body {</p> <p style="text-align: center"> background-color: white;</p> <p style="text-align: center">}</p> <p style="text-align: center">.container {</p> <p style="text-align: center"> width: 455px;</p> <p style="text-align: center"> height: 60px;</p> <p style="text-align: center"> box-sizing: border-box;</p> <p style="text-align: center"> padding: 15px;</p> <p style="text-align: center"> padding-top: 9px;</p> <p style="text-align: center"> background-image: url("https://i.gifer.com/4Ef4.gif");</p> <p style="text-align: center"> background-size: 455px;</p> <p style="text-align: center"> background-position: center;</p> <p style="text-align: center"> color: white;</p> <p style="text-align: center"> position: relative;</p> <p style="text-align: center"> outline: 1px solid rgba(0, 0, 0, 0.1);</p> <p style="text-align: center"> border-color: white;</p> <p style="text-align: center"> border-style: outset;</p> <p style="text-align: center"> margin: auto;</p> <p style="text-align: center"> text-shadow: 1px 1px 0 rgba(0,0,0,0.35);</p> <p style="text-align: center"> box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);</p> <p style="text-align: center"> text-align: center;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.user-info {</p> <p style="text-align: center"> font-family: "Calibri";</p> <p style="text-align: center">}</p> <p style="text-align: center">.user-info-2,</p> <p style="text-align: center">.award-info {</p> <p style="text-align: center"> font-family: "Whitney Medium";</p> <p style="text-align: center">}</p> <p style="text-align: center">.user-info {</p> <p style="text-align: center"> font-size: 1em;</p> <p style="text-align: center"> font-weight: bold;</p> <p style="text-align: center"> line-height: 19px;</p> <p style="text-align: center"> text-shadow: 0 2px 1px black;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.user-info-2 {</p> <p style="text-align: center"> font-size: 0.8em;</p> <p style="text-align: center"> color: white;</p> <p style="text-align: center"> text-shadow: 0 2px 1px black;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">#icon {</p> <p style="text-align: center"> float: left;</p> <p style="text-align: center"> padding-right: 5px;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.award-info {</p> <p style="text-align: center"> float: right;</p> <p style="text-align: center"> position: absolute;</p> <p style="text-align: center"> line-height: 0.5px;</p> <p style="text-align: center"> text-align: right;</p> <p style="text-align: center"> font-weight: bold;</p> <p style="text-align: center"> right: 15px;</p> <p style="text-align: center"> top: 9px;</p> <p style="text-align: center"> font-size: 0.8em;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.award-info-2 {</p> <p style="text-align: center"> font-size: 0.8em;</p> <p style="text-align: center"> font-weight: normal;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">[/code]</p> <p style="text-align: center">[/spoiler]</p> <p style="text-align: center"></p> <p style="text-align: center">Example of second signautre:</p> <p style="text-align: center"><img src="https://i.imgur.com/3tMdWjB.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><a href="https://codepen.io/anon/pen/MRMedM" target="_blank">https://codepen.io/anon/pen/MRMedM</a></p> <p style="text-align: center">[spoiler="Source Code"]</p> <p style="text-align: center">[code="HTML"]</p> <p style="text-align: center"></p> <p style="text-align: center"><div class="container"></p> <p style="text-align: center"> <span id="icon"><img src="https://cdn4.iconfinder.com/data/icons/PixeloPhilia_2/PNG/medal.png" alt="Award"></span></p> <p style="text-align: center"><div class="award-info"></p> <p style="text-align: center"> <p>2019 Community Awards</p></p> <p style="text-align: center"> <span class="award-info-2">DevBest.com</span></p> <p style="text-align: center"> </div></p> <p style="text-align: center"> <div class="user-info"></p> <p style="text-align: center"> Sumo</p> <p style="text-align: center"> </div></p> <p style="text-align: center"> <div class="user-info-2"></p> <p style="text-align: center"> Most Inactive</p> <p style="text-align: center"> </div></p> <p style="text-align: center"></div></p> <p style="text-align: center">[/code]</p> <p style="text-align: center"></p> <p style="text-align: center">[code="CSS"]</p> <p style="text-align: center">body {</p> <p style="text-align: center"> background-color: white;</p> <p style="text-align: center">}</p> <p style="text-align: center">.container {</p> <p style="text-align: center"> width: 455px;</p> <p style="text-align: center"> height: 60px;</p> <p style="text-align: center"> box-sizing: border-box;</p> <p style="text-align: center"> padding: 15px;</p> <p style="text-align: center"> padding-top: 13px;</p> <p style="text-align: center"> background-image: url("https://i.gifer.com/4Ef4.gif");</p> <p style="text-align: center"> background-size: 455px;</p> <p style="text-align: center"> background-position: center;</p> <p style="text-align: center"> color: white;</p> <p style="text-align: center"> position: relative;</p> <p style="text-align: center"> outline: 1px solid rgba(0, 0, 0, 0.1);</p> <p style="text-align: center"> border-color: white;</p> <p style="text-align: center"> border-style: outset;</p> <p style="text-align: center"> margin: auto;</p> <p style="text-align: center"> text-shadow: 1px 1px 0 rgba(0,0,0,0.35);</p> <p style="text-align: center"> box-shadow: inset 0 0 0 1000px rgba(0,0,0,.25);</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.layer {</p> <p style="text-align: center"> background-color: rgba(248, 247, 216, 0.7);</p> <p style="text-align: center"> position: absolute;</p> <p style="text-align: center"> top: 0;</p> <p style="text-align: center"> left: 0;</p> <p style="text-align: center"> width: 100%;</p> <p style="text-align: center"> height: 100%;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.user-info,</p> <p style="text-align: center">.user-info-2,</p> <p style="text-align: center">.award-info {</p> <p style="text-align: center"> font-family: "Arial Unicode MS";</p> <p style="text-align: center"> text-shadow: 0 1px 2px rgba(0,0,0,0.6);</p> <p style="text-align: center">}</p> <p style="text-align: center">.user-info {</p> <p style="text-align: center"> font-size: 0.75em;</p> <p style="text-align: center"> font-weight: bold;</p> <p style="text-align: center"> line-height: 17px;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.user-info-2 {</p> <p style="text-align: center"> font-size: 0.6em;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">#icon {</p> <p style="text-align: center"> float: left;</p> <p style="text-align: center"> padding-right: 5px;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.award-info {</p> <p style="text-align: center"> float: right;</p> <p style="text-align: center"> position: absolute;</p> <p style="text-align: center"> line-height: 0.5px;</p> <p style="text-align: center"> text-align: right;</p> <p style="text-align: center"> font-weight: bold;</p> <p style="text-align: center"> right: 15px;</p> <p style="text-align: center"> top: 9px;</p> <p style="text-align: center"> font-size: 0.8em;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.award-info-2 {</p> <p style="text-align: center"> font-size: 0.8em;</p> <p style="text-align: center"> font-weight: normal;</p> <p style="text-align: center">}</p> <p style="text-align: center">[/code][/spoiler]</p></blockquote><p></p>
[QUOTE="sumo, post: 448247, member: 42057"] 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"] [LIST] [*]At least 7 brain cells. [*]The Whitney font (which Discord uses) and can be found here: [URL]http://fontsgeek.com/fonts/Whitney-Medium[/URL], 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: [URL]https://www.wfonts.com/font/arial-unicode-ms[/URL] (for second signature) [*]LICEcap Screen Caster/Gif Maker, it can be found here: [URL]https://www.cockos.com/licecap/[/URL]. 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. [/LIST] [/spoiler] 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. [CENTER] Example of first Signature: [IMG]https://i.imgur.com/hxey6TJ.gif[/IMG] [URL]https://codepen.io/anon/pen/qwzNRB[/URL] [SPOILER="Source Code"] [CODE=html] <div class="container"> <div class="user-info"> Username </div> <div> <div class="user-info-2"> Motto | Motto | Motto </div> </div> </div>[/CODE] [CODE=css] 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; } [/code] [/spoiler] Example of second signautre: [IMG]https://i.imgur.com/3tMdWjB.gif[/IMG] [URL]https://codepen.io/anon/pen/MRMedM[/URL] [spoiler="Source Code"] [code="HTML"] <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> [/code] [code="CSS"] 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; } [/code][/spoiler][/CENTER] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Software Development
Programming
[HTML/CSS] Animated Signature Creator
Top