1

This doesn't have to do anything relating to make it a ticker related component, I've already done that already. I just wanted to polish the way it looked by adding a slash "/" contrast between the two colors. I want to avoid adding a separate div component just for the slash. I've added a picture of the example here (sorry to the colorblind people, it's probably difficult to tell):

Example Picture

tl;dr Basically, how do I add that slash (circled in red) without using a div box reserved for the slash?

Here's my current code:

.tickerv-wrap {
  background: #eee;
  box-sizing: content-box;
  height: 19px;
  /* container that only displays this height... correlate with tickerv-wrap ul li line-height, was 1px smaller than tickerv-wrap ul li line-height */
  overflow: hidden;
  /* Hide scrollbars */
  padding: 1px;
  /* watch for this as well... best to put as line-height - height */
}


/* TICKER ANIMATION */

@keyframes tickerv {
  0% {
    margin-top: 0;
  }
  /* Quite literally -ve height of wrapper */
  25% {
    margin-top: -19px;
  }
  /* 1 X tickerv-wrap height */
  50% {
    margin-top: -38px;
  }
  /* 2 X tickerv-wrap height px */
  75% {
    margin-top: -57px;
  }
  /* 3 X tickerv-wrap height px */
  100% {
    margin-top: 0;
  }
  /* Back to first line */
}

.tickerv-wrap ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  animation-name: tickerv;
  /* Loop through items */
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, .5, 0);
}

.tickerv-wrap ul:hover {
  /* Pause on mouse hover */
  animation-play-state: paused;
}


/* ITEMS */

.tickerv-wrap ul li {
  font-size: 18px;
  line-height: 20px/* Same as wrapper height */
}
<!Doctype HTML>
<html>

<head>
  <title>Vertical News Ticker</title>
  <link rel="stylesheet" href="newsTicker.css">
</head>

<body>
  <div class="tickerv-wrap">
    <ul>
      <li>Title 1</li>
      <li>Title 2</li>
      <li>Title 3</li>
      <li>Title 4</li>
    </ul>
  </div>
</body>

</html>
disinfor
  • 10,865
  • 2
  • 33
  • 44
PerplexingParadox
  • 1,196
  • 1
  • 7
  • 26
  • Method 1: use an SVG. Method 2: if it doesn't actually matter if you use another element, you can wrap the first half in an element and use transform: rotate on it. Method 3: use a gradient to cover the first half of the text. Then use a psuedoselector (such as ::after) and absolute position it to match up with the line. Use CSS rotate on the psuedoselector. – PiggyPlex Feb 02 '21 at 18:55
  • Quick question, I've inspected the site, and noticed the ::after element in it, so I was wondering how pseudoselectors work. Could you explain it briefly or provide some resources? – PerplexingParadox Feb 02 '21 at 19:03
  • More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements – Nathaniel Flick Feb 02 '21 at 19:04
  • Sorry, I meant skew in my comment. I've written an answer explaining 2 of my solutions. – PiggyPlex Feb 02 '21 at 19:13

1 Answers1

1

I hope I understand you correctly. If I understand you correctly, you're trying to add a slanted edge for the ticker. There's some materials here for creating slants:-

Method #1

Use pseudoselectors + transform (skew).

.tickerv-wrap::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100px;
  height: 100%;
  background: #ccc;
  transform: skew(-30deg);
  z-index: -1;
  margin-left: -10px;
}

.tickerv-wrap::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  z-index: -2;
}

.tickerv-wrap {
  position: relative;
  box-sizing: content-box;
  height: 19px;
  overflow: hidden;
  padding: 1px;
} 

@keyframes tickerv {
  0%   {margin-top: 0;}
  25%  {margin-top: -19px;}
  50%  {margin-top: -38px;}
  75%  {margin-top: -57px;}
  100% {margin-top: 0;}
}

.tickerv-wrap ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  animation-name: tickerv;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, .5, 0);
}

.tickerv-wrap ul:hover {
  animation-play-state: paused;
}

.tickerv-wrap ul li {
  font-size: 18px;
  line-height: 20px;
}
<!Doctype HTML>
<html>
<head>
    <title>Vertical News Ticker</title>
    <link rel="stylesheet" href="newsTicker.css">
</head>
<body>
    <div class="tickerv-wrap">
      <ul>
        <li>Title 1</li>
        <li>Title 2</li>
        <li>Title 3</li>
        <li>Title 4</li>
      </ul>
    </div>
</body>
</html>

Method #2

Use a gradient. Epic.

  • (shh...I used https://cssgradient.io <3) 
    .tickerv-wrap {
  background: rgb(204,204,204);
  background: -moz-linear-gradient(120deg, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 20%, rgba(238,238,238,1) 20%, rgba(238,238,238,1) 100%);
  background: -webkit-linear-gradient(120deg, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 20%, rgba(238,238,238,1) 20%, rgba(238,238,238,1) 100%);
  background: linear-gradient(120deg, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 20%, rgba(238,238,238,1) 20%, rgba(238,238,238,1) 100%);
  box-sizing: content-box;
  height: 19px;
  overflow: hidden;
  padding: 1px;
} 

@keyframes tickerv {
  0%   {margin-top: 0;}
  25%  {margin-top: -19px;}
  50%  {margin-top: -38px;}
  75%  {margin-top: -57px;}
  100% {margin-top: 0;}
}
.tickerv-wrap ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  animation-name: tickerv;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.tickerv-wrap ul:hover {
  animation-play-state: paused;
}

.tickerv-wrap ul li {
  font-size: 18px;
  line-height: 20px;
}
    <!Doctype HTML>
<html>
<head>
    <title>Vertical News Ticker</title>
    <link rel="stylesheet" href="newsTicker.css">
</head>
<body>
    <div class="tickerv-wrap"><ul>
        <li>Title 1</li>
        <li>Title 2</li>
        <li>Title 3</li>
        <li>Title 4</li>
    </ul></div>
</body>
</html>

Method #3

Use an SVG. I just uninstalled Adobe Illustrator so I can't make an SVG right now. I'm sure you could work it out with a Google search.

PiggyPlex
  • 631
  • 1
  • 4
  • 15