Basic Signature Code (tutorial)

[dohtml]<style>:root{ --ht1: #B296BC; --ht2: #CAC426; } #hanie-text{ position: relative; width: 600px; background: #ffffff; padding: 50px; } #hanie-text .txt{ position: relative; text-align: justify; font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 400; line-height: 18px; color: #222222; letter-spacing: 0.01em; } #hanie-text h2{ color: var(--ht1); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 22px; } #hanie-text h3{ color: #000; font-weight: 700; font-size: 12px; font-style: italic; border-bottom: 1px solid #ddd; text-transform: uppercase; letter-spacing: 0.1em; } #hanie-text b{ color: var(--ht2); font-weight: 500; } #hanie-text i{ color: #99A3A4; }</style>

<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">

<center>
<div id="hanie-text">
  <div class="txt">
    <h2>Before We Start!</h2><p>
    Hey guys! Please be informed that I am assuming the followers of this tutorial are beginners and people who are just getting started with coding. I am well aware that some of the things I am about to show might have been written and shown in other tutorials, but this one is specifically for a signature code as request by @[peter parker.]! I may or may not explain everything in the code, but I will try to show you as much as I can to give you the basic idea of what a signature code is. Also, my way of coding might differ from others and of course there are no right or wrong way of doing things, but this is just a heads-up. So, let's get started! :)
    <br><br>

    <h2>What are we gonna code?</h2><p>
    This is what we are going to code! A really basic <b>500x200px</b> signature code with <i>hover, icon, short title, links</i> and a scrollable<i>textbox</i>.
    <p>
<style>#sig-tuto{ position: relative; overflow: hidden; margin: 0px auto; width: 500px; height: 200px; background: url(https://i.imgur.com/cP2ll2n.gif); outline: 2px solid #ddd; } #sig-tuto ::-webkit-scrollbar { width: 4px; } #sig-tuto ::-webkit-scrollbar-track { background: transparent; } #sig-tuto ::-webkit-scrollbar-thumb { background: #B3A1BA; border-top: 3px solid #fff; } #sig-tuto .content{ position: relative; top: 0px; width: 500px; height: 200px; } #sig-tuto .left-content{ position: absolute; width: 180px; height: 200px; top: -200px; left: 0px; background: #111; opacity: 0.95; transition: 0.4s; } #sig-tuto:hover .left-content{ top: 0px; transition: 0.4s; } #sig-tuto .right-content{ position: absolute; width: 320px; height: 200px; right: 0px; bottom: -200px; background: #ddd; transition: 0.4s; } #sig-tuto:hover .right-content{ bottom: 0px; transition: 0.4s; } #sig-tuto .icon img{ position: relative; width: 85px; height: 85px; top: 30px; border-radius: 100px; } #sig-tuto .title{ position: relative; top: 51px; left: 50px; font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; text-align: left; line-height: 17px; color: #FFF844; } #sig-tuto .links-bg{ position: relative; width: 320px; height: 60px; background: #B3A1BA; } #sig-tuto .links{ position: relative; width: 320px; height: 60px; top: 14px; } #sig-tuto .links a{ display: inline-block; text-decoration: none; margin: 10px; font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 9px; line-height: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; } #sig-tuto .links a:hover{ font-style: italic; border-bottom: 1px solid #FFF844; } #sig-tuto .text-bg{ position: relative; width: 245px; height: 80px; top: 30px; background: #fff; } #sig-tuto .textbox{ position: relative; width: 200px; height: 50px; top: 15px; overflow: auto; font-family: 'Rubik', sans-serif; font-size: 9px; font-weight: 400; text-align: justify; line-height: 13px; padding-right: 10px; color: #000; }</style> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet"> <center> <div id="sig-tuto"> <div class="content"> <div class="left-content"> <div class="icon"><img src="https://i.imgur.com/hI2DljH.gif"></div> <div class="title">Bury <br>A Friend</div> </div> <div class="right-content"> <div class="links-bg"> <div class="links"> <a href="#" title="graphic">Graphic</a> <a href="#" title="writing">Writing</a> <a href="#" title="coding">Coding</a> <a href="#" title="coming soon">Etc.</a> </div> </div> <div class="text-bg"> <div class="textbox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed massa malesuada, cursus purus nec, posuere ipsum. Aliquam tellus metus, ultrices vel semper nec, mattis nec ligula. Curabitur sollicitudin, ipsum vitae auctor mollis, magna ex ultrices arcu, a posuere sem erat sit amet elit. </div> </div> </div> </div> </div> </center>
<p>
[code][dohtml]<style>#sig-tuto{ position: relative; overflow: hidden; margin: 0px auto; width: 500px; height: 200px; background: url(https://i.imgur.com/cP2ll2n.gif); outline: 2px solid #ddd; } #sig-tuto ::-webkit-scrollbar { width: 4px; } #sig-tuto ::-webkit-scrollbar-track { background: transparent; } #sig-tuto ::-webkit-scrollbar-thumb { background: #B3A1BA; border-top: 3px solid #fff; } #sig-tuto .content{ position: relative; top: 0px; width: 500px; height: 200px; } #sig-tuto .left-content{ position: absolute; width: 180px; height: 200px; top: -200px; left: 0px; background: #111; opacity: 0.95; transition: 0.4s; } #sig-tuto:hover .left-content{ top: 0px; transition: 0.4s; } #sig-tuto .right-content{ position: absolute; width: 320px; height: 200px; right: 0px; bottom: -200px; background: #ddd; transition: 0.4s; } #sig-tuto:hover .right-content{ bottom: 0px; transition: 0.4s; } #sig-tuto .icon img{ position: relative; width: 85px; height: 85px; top: 30px; border-radius: 100px; } #sig-tuto .title{ position: relative; top: 51px; left: 50px; font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; text-align: left; line-height: 17px; color: #FFF844; } #sig-tuto .links-bg{ position: relative; width: 320px; height: 60px; background: #B3A1BA; } #sig-tuto .links{ position: relative; width: 320px; height: 60px; top: 14px; } #sig-tuto .links a{ display: inline-block; text-decoration: none; margin: 10px; font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 9px; line-height: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; } #sig-tuto .links a:hover{ font-style: italic; border-bottom: 1px solid #FFF844; } #sig-tuto .text-bg{ position: relative; width: 245px; height: 80px; top: 30px; background: #fff; } #sig-tuto .textbox{ position: relative; width: 200px; height: 50px; top: 15px; overflow: auto; font-family: 'Rubik', sans-serif; font-size: 9px; font-weight: 400; text-align: justify; line-height: 13px; padding-right: 10px; color: #000; }</style> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet"> <center> <div id="sig-tuto"> <div class="content"> <div class="left-content"> <div class="icon"><img src="https://i.imgur.com/hI2DljH.gif"></div> <div class="title">Bury <br>A Friend</div> </div> <div class="right-content"> <div class="links-bg"> <div class="links"> <a href="#" title="graphic">Graphic</a> <a href="#" title="writing">Writing</a> <a href="#" title="coding">Coding</a> <a href="#" title="coming soon">Etc.</a> </div> </div> <div class="text-bg"> <div class="textbox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed massa malesuada, cursus purus nec, posuere ipsum. Aliquam tellus metus, ultrices vel semper nec, mattis nec ligula. Curabitur sollicitudin, ipsum vitae auctor mollis, magna ex ultrices arcu, a posuere sem erat sit amet elit. </div> </div> </div> </div> </div> </center>[/dohtml][/code]
<p>
      For this one, we are implementing the '<b>split-kind</b>' hover. Of course, there are several ways (<i>which I could think of right now</i>) to pop your things up in the signature, which I will explain further in this tutorial.
      <br><br>

    <h2>Let's break-down the code</h2><p>
    <h3>STEP 1 - ID Declaration</h3>
    First of all, you need to declare a unique name for your template, so that it won't mess up other things in the board.
    <p>
    For the HTML part, use <i>id selector</i> (<b>id</b>= "TEMPLATE NAME"), like this
    <p>
[code]<center>
<p>
<div id="sig-tuto"></div>[/code]
      and for the CSS part, put a <i>hash character</i> (<b>#</b>) at the beginning of the name like this,
    <p>
[code]#sig-tuto{ }[/code]
<p>
     Then, you have to put all these *<b>mandatory</b> properties inside the CSS part
     <p>
[code]#sig-tuto{
  position: relative;
  overflow: hidden;
  margin: 0px auto;
  width: 500px;
  height: 200px;
  background: url(https://i.imgur.com/cP2ll2n.gif);
  outline: 2px solid #fff;
}[/code]
<p>
     <b>position: relative;</b> - to make sure that the signature is positioned at its normal position and is centered automatically<br>
     <b>overflow: hidden;</b> - to hide the elements that are positioned beyond the signature boundaries. (This is the most important property when you want to hide and show elements in your template without changing the <i>opacity</i>)<br>
      <b>margin: 0px auto;</b> - to horizontally center the elements in your signature<br>
      <b>width:</b> and <b>height:</b> - to specify the size of the signature<br>
      <b>background: url(IMAGE LINK);</b> - this is where your signature image link is located<br>
      <b>outline:</b> - the main border of the signature
       <br><br>
    <h3>Step 2 - Class declaration</h3>
    Put all the necessary contents inside your HTML part by using <i>class selector</i> (<b>class</b>="CLASS NAME"). Please make sure that everything is declared with <b>different classes</b>. So that, it is easier to adjust the positioning later for the CSS part.
    <p>
    Put the classes that you want to group together inside one parent group. For example, we want to put '<b>icon</b>' and '<b>title</b>' classes together, so we put them inside a parent class called '<b>left-content</b>' like this,
     <p>
[code]<div class="left-content">
    <div class="icon"><img src="https://i.imgur.com/hI2DljH.gif"></div>
    <div class="title">Bury <br><i>A Friend</i></div>
  </div>[/code]
<p>
      and the same thing is done to other elements you want to include inside your signature. Always remember to <b>group them</b>! To make it easier to hide and show the grouped elements later in the CSS part.
      <br><br>
    <h3>Step 3 - Positioning</h3>
    In your CSS part, position your elements by using <b>relative</b> so, it stays at its normal position and stick to the parent class. For example, '<b>icon</b>' class is put inside a parent class called '<b>left-content</b>' so, without adding any other properties, the icon is automatically positioned at the center of the parent class horizontally.
    <p>
[code]#sig-tuto .left-content{
  position: absolute;
  width: 180px;
  height: 200px;
  top: -200px;
  left: 0px;
  background: #111;
  opacity: 0.95;
  transition: 0.4s;
}

#sig-tuto .icon img{
  position: relative;
  width: 85px;
  height: 85px;
  top: 30px;
  border-radius: 100px;
}[/code]
<p>
      and this is what happen when you use <b>absolute</b> instead of <b>relative</b> positioning. The '<b>icon</b>' class will override any automatic position that has been assigned to the parent class and starts at default which is <b>0px</b> vertically and horizontally (<i>it will be automatically position at the top left corner</i>).
      <p>
      As mentioned before, the same thing is applied for every elements that are included inside the signature. There is no right or wrong in positioning, just position your elements accordingly. Use <b>relative</b> position if you want your element to stick to the parent class (<i>which is more neat and manageable</i>) or <b>absolute</b> position if you want to go wild with your elements (<i>like I always did</i>).
      <br><br>
      <h3>Step 4 - Styling</h3>
     This part is entirely based on your preference, really. From the <i>colors, padding, size, font choices, etc.</i> But I will show you some basic and decent looking styling which are suitable for a signature code, given the size restriction.
    <p>
      For example, let's have a look at how I style the '<b>link</b>' class.
      <p>
[code]#sig-tuto .links a{
  display: inline-block;
  text-decoration: none;
  margin: 10px;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
}[/code]
<p>
      <b>display: inline-block;</b> - this property is important to include, especially when you are working with a serie of tiny elements like the links! it allows you to apply width and height values to the element<br>
  <b>text-decoration: none;</b> - to disable the default styling for a link! which is blue colored text with a thin underline (<i>ewww! hahah</i>)<br>
   <b>margin:</b> - to <i>space out</i> each of the elements! so they are not tightly positioned next to each other like normal text
     <p>
      and the rest are the common <b>text</b> related styling, like the font size, letter-spacing, text-transform and color (<i>which all can be changed according to your preferences</i>).
      <br><br>
      Now, let's style the <b>textbox</b>!
      <p>
[code]#sig-tuto .textbox{
  position: relative;
  width: 200px;
  height: 50px;
  top: 15px;
  overflow: auto;
  font-family: 'Rubik', sans-serif;
  font-size: 9px;
  font-weight: 400;
  text-align: justify;
  line-height: 13px;
  padding-right: 10px;
  color: #000;
}[/code]
<p>
      These two are the only important properties to make your textbox scrollable. The rest are the common properties which have been explained previously.
      <p>
       <b>overflow: auto;</b> - to enable the default scrollbar (<i>which can be customized! and later be explained in this tutorial</i>)<br>
      <b>padding-right:</b> - to space out the text and the scrollbar
      <br><br>
      Here is how you can customized your scrollbar. There are a few other available scrollbar properties, but these are the ones that are most important to me.
      <p>
[code]#sig-tuto ::-webkit-scrollbar {
  width: 4px;
}

#sig-tuto ::-webkit-scrollbar-track {
  background: transparent;
}

#sig-tuto ::-webkit-scrollbar-thumb {
  background: #B3A1BA;
  border-top: 3px solid #fff;
}
[/code]
<p>
      <b>::-webkit-scrollbar</b> - the main element of the scrollbar, where you can assign the size.<br>
      <b>::-webkit-scrollbar-track</b> - the fixed background of the scrollbar <br>
       <b>::-webkit-scrollbar-thumb</b> - the scrollable part of the scrollbar
       <br><br>
       <h3>Step 5 - Hover</h3>
       Finally, the most interesting part of all! I will show you the most basic and common signature code hover styles. I only animate the '<b>left-content'</b> and '<b>right-content</b>' classes, just to give you the idea of things. So, let's go!
    <p>
     <h2>Top and Bottom split</h2> <p>
[code]#sig-tuto .left-content{
  position: absolute;
  width: 180px;
  height: 200px;
  top: -200px;
  left: 0px;
  background: #111;
  transition: 0.4s;
}
#sig-tuto:hover .left-content{
  top: 0px;
  transition: 0.4s;
}[/code]
<p>
      Assign negative values to the <b>top</b> and <b>bottom</b> properties based on the height. For example, if the height is 200px, then assign it to (<i>top: -200px;</i>) for the '<b>.left-content</b>' class and (<i>top: 200px;</i>) for the '<b>:hover .left-content</b>' class. And the same thing is done for the '<b>.right-content</b>' class, but change the <i>top:</i> property to <i>bottom:</i> .
    <p>
     <h2>Left and Right split</h2> <p>
[code]#sig-tuto .left-content{
  position: absolute;
  width: 180px;
  height: 200px;
  top: 0px;
  left: -180px;
  background: #111;
  transition: 0.4s;
}
#sig-tuto:hover .left-content{
  left: 0px;
  transition: 0.4s;
}[/code]
<p>
      Assign negative values to the <b>left</b> and <b>right</b> properties based on the width. For example, if the width is 180px, then assign it to (<i>left: -180px;</i>) for the '<b>.left-content</b>' class and (<i>left: 180px;</i>) for the '<b>:hover .left-content</b>' class. And the same thing is done for the '<b>.right-content</b>' class, but change the <i>left:</i> property to <i>right:</i> .
      <p>
     <h2>Basic Opacity</h2> <p>
[code]#sig-tuto .left-content{
  position: absolute;
  width: 180px;
  height: 200px;
  top: 0px;
  left: 0px;
  background: #111;
  opacity: 0;
  transition: 0.4s;
}
#sig-tuto:hover .left-content{
  opacity: 1;
  transition: 0.4s;
}[/code]
<p>
      Assign the <b>opacity</b> property to the classes for the content to fade in and out. For example, assign (<i>opacity: 0;</i>) for the '<b>.left-content</b>' class and (<i>opacity: 1;</i>) for '<b>:hover .left-content</b>' class. Do the same thing for '<b>.right-content</b>' as well.
     <p>
     <h2>Zoom Out</h2> <p>
[code]#sig-tuto .left-content{
  position: absolute;
  width: 180px;
  height: 200px;
  top: 0px;
  left: 0px;
  background: #111;
  transform: scale(0);
  transition: 0.4s;
}
#sig-tuto:hover .left-content{
  transform: scale(1);
  transition: 0.4s;
}[/code]
<p>
       Assign the <b>transform</b> property to the classes for the content to zoom out and in. For example, assign (<i>transform: scale(0);</i>) for the '<b>.left-content</b>' class and (<i>transform: scale(1);</i>) for '<b>:hover .left-content</b>' class. Do the same thing for '<b>.right-content</b>' as well.
     <p>
      Also, include the <b>transition</b> properties for smooth animation. For example, <i>0.4s</i> for both '<b>.left-content</b>' and '<b>:hover .left-content</b>' classes.
  <br><br>
    <h2>Bottomline</h2><p>
    So, I guess that's all for the basic of the basics in making a signature code! Do let me know if you tried this out, I'd love to see your codes! And don't hesitate to poke me if have any question or confusion (<i>bare in mind that I write this tutorial at 2 am. lol</i>) I'll help you every chance I could! So, have fun coding! :wub:
  </div>
</div>
</center>
[/dohtml]