CSS title code animation

Question

INFO: The CSS code is basically showing a name with a small line below and one you hover on it, the line starts completing to a full rectangle. When you hover out, it transitions back to being a line below the name.

The issue I am having is that, when I try changing the size of the text (in the rectangle), I have a ton of issues such as: - the rectangle needs adjusting for the new text height and width - the rectangle needs re-centring (for some reason it does not stay centred) - when the text is something like a name: e.g. John Smith, when the size is too big, the bottom of John, would start touching the top of Smith

QUESTION: How can I make the code a bit better, such that when I change the size of the text, everything fits automatically without a ton of re-adjustments?

HTML CODE

    <header id="header">

      <div class="svg-wrapper">
        <svg class="svg-name" xmlns="http://www.w3.org/2000/svg">
          <rect class="shape" />
          <div class="text">John Smith</div>
        </svg>
      </div>

    </header>

CSS CODE

    header {
      height: 450px;
      background-image: url(/assets/img/logo.svg), url(/assets/img/background.jpe);
      background-position: 20px 20px, bottom;
    }

    header nav {
      float: right;
      margin: 30px 30px 0 0;
    }

    header nav a {
      display: inline-block;
      margin-left: 20px;
      color: rgba(0, 0, 0, 0.7);
    }

    header nav a:hover {
      color: black;
    }

    header .svg-wrapper {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin: 0 auto;
      width: 360px;
    }

    header .svg-wrapper:hover .shape {
      stroke-width: 2px;
      stroke-dashoffset: 0;
      stroke-dasharray: 960;
    }

    header .svg-name {
      height: 120px;
      width: 360px;
    }

    header .shape {
      height: 120px;
      width: 360px;
      stroke-dasharray: 140 940;
      stroke-dashoffset: -674;
      stroke-width: 8px;
      fill: transparent;
      stroke: black;
      border-bottom: 5px solid black;
      transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
    }

    header .text {
      text-transform: uppercase;
      font-size: 132px;
      line-height: 32px;
      letter-spacing: 8px;
      color: black;
      top: -100px;
      position: relative;
      text-align: center;
    }

FIDDLE URL

https://jsfiddle.net/snenkov/kshawbg5/6/

CODEPEN URL

http://codepen.io/anon/pen/MwXbVM

There's a bit more to do besides what you have here. Check out the first answer to this question: http://stackoverflow.com/questions/6725288/svg-text-inside-rect. Right now, the text is always outside the rectangle. To change the box size, you need to get the size of the text and change the box to match that. This applies to both `font-size` and `line-height`. `line-height` will affect how close the letters are spaced when they wrap (top to bottom) — jonmrich, Jul 14 '15 at 12:02

score 0 · Answer 1 · answered Jul 14 '15 at 11:49

0

Change the line height to

header .text {
   line-height:1;
}

or remove the line height from "header .text" class.

answered Jul 14 '15 at 11:49

Prachi Gharde

74
2

Unfortunately, both solutions don't work. The rectangular box moves around and still does not wrap the text within it. – Newskooler Jul 14 '15 at 11:51

CSS title code animation

1 Answers1