OnClick transition effects, and understanding the markup code

To get the two lines in you would need another element to hook new pseudos to

hmm…

Maybe I should just keep it like this then.

.img1 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}

Do you mean like this?

.img::before  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img::after {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}

Is this what you mean?

Version 2 Combined

.playButtond {
  position: relative;
  border: 3px solid #0059dd;
  width: 260px;
  height: 194px;
  cursor: pointer;
}

.img::before,
.img::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png")no-repeat center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img::after {
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}

I would probably do it this way though:

.playButtond {
  position: relative;
  border: 3px solid #0059dd;
  width: 260px;
  height: 194px;
  cursor: pointer;
}

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png")no-repeat center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

.lines::before,
.lines::after {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.lines::after {
  left: 174px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>I Don't Know</title>
<style>

.wrap,
.playButtond {
  position: relative;
  width: 266px;
  height: 202px;
}
.playButtond {
  border: 3px solid #0059dd;
  cursor: pointer;
  width: 260px;
  height: 194px;
}
  .playButtond::before,
  .playButtond::after  {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: url("https://i.imgur.com/ZmbeHHW.png")no-repeat center;
    border-radius: 50%;
    width: 170px;
    height: 170px;
  }
  .playButtond::after {
    background: url("https://i.imgur.com/4HJbzEq.png") no-repeat center;
    width: 180px;
    height: 180px;
  }
  .wrap::before,
  .wrap::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;  bottom: 3px;
    left: 83px;
    width: 3px;
    background: #0059dd;
  }
  .wrap::after {
    left: 174px;
  }
.buttond div {
  position: absolute;
  top: 76px;
  left: 111px;
  width: 38px;
  height: 38px;
  background-color: transparent;
  background-size: 14px 18px;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.playd {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==");
  background-position: 58% 50%;
}

.paused {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==");
  background-position: 50%;
}

.hided {
  display: none;
}

</style>
</head>
<body>

<div class="wrap">
  <div class="playButtond" data-audio="http://hi5.1980s.fm/;">
    <div class="buttond">
      <div class="playd" title="PLAY"></div>
      <div class="paused hided" title="PAUSE"></div>
    </div>
  </div>
</div>

</body>
</html>

EDIT: fixed center lines hanging out

Yours:

Also:
Javascript
doesn’t work:
Music doesn’t play.

This one:
https://jsfiddle.net/nkvf38r5/69/

No, that’s not mine

Look back at the .wrap styles on mine

.wrap,
.playButtond {
  position: relative;
  width: 266px;
  height: 202px;
}
.playButtond { /*override height width*/
  border: 3px solid #0059dd;
  cursor: pointer;
  width: 260px;
  height: 194px;
}

And yes, you can add the line div like you did if it keeps your js & audio working

1 Like

I added lines so it would go:

So, there was a flow to it.

.playButtond

.playButtond
.playButtond
.playButtond

.lines
.lines
.lines

And not:


.playButtond

.img
.img
.img

.playButtond
.playButtond
.playButtond
1 Like

Now, I will try to do this to the CSS in my 7 other players.

What did I do wrong here?

What would work in this situation?

How it should look:

The 2 lines going down are both spaced out exactly the same.

Why is one 86 / 77. and the other is, 83 / 174?

1.)
left: 86px; / left: 177px;

.initiale::before,
.initiale::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.initiale::after {
  left: 177px;
}

2.)

left: 83px; / left: 174px;
.playButtonb::before,
.playButtonb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtonb::after {
  left: 174px;
}

You’ll have to adjust the left: coordinates where you need them

Some of your players are 260px wide plus borders
Some of them are 260px wide

It’s important that you learn basic CSS first or you’ll always be dependent on others

You got to learn the alphabet before you can write words :slight_smile:

1 Like

I got it, but how come 100% height on the lines won’t work on it like it does with the other players?

Because you have not established a containing block
(Hint: As it is now the <body> is your containing block)

When you work your way through Intro to CSS

You will eventually get to Positioning

3 Likes

Like this:

.playButtonsc {
  position: relative;
  width: 266px;
  height: 50px;
  overflow: hidden;
}

.playButtonc {
  float: left;
  width: 83px;
  height: 44px;
  cursor: pointer;
  background-color: black;
  border-top: 3px solid #0059dd;
  border-bottom: 3px solid #0059dd;
}

.playButtonc::before,
.playButtonc::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtonc::after {
  left: 177px;
}

I’m stuck getting the 2 lines behind the SVG

What would work in this situation?

.playButtonf {
  position: relative;
  width: 260px;
  height: 245px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background: url("https://i.imgur.com/qaEvk4G.png");
}

.playButtonf::before,
.playButtonf::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtonf::after {
  left: 177px;
}

It should look like this:

That is discussed in the Positioning link I posted above. As I am absolutely sure you ARE reading through it, you must have mistakenly overlooked the Introducing z-index section.

In that critical section you would have learned about the Stacking Order that can be controlled by the use of z-index

Can you change the stacking order? Yes, you can, by using the z-index property. “z-index” is a reference to the z-axis. You may recall from previous points in the source where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets. (0,0) is at the top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.)

Web pages also have a z-axis — an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen). z-index values affect where positioned elements sit on that axis — positive values move them higher up the stack, and negative values move them lower down the stack. By default, positioned elements all have a z-index of auto, which is effectively 0.

So if your svg needs to be on top of the 2 lines then you need to tell it to get on top.

Put a new class on the svg -

<svg class="stack" width="260" height="245" viewbox="0 0 260 245" aria-hidden="true">

Then tell it what to do in the CSS -

svg.stack {
  position:relative;
  z-index:1
}
3 Likes

Doing that now hides the play buttons, how do I prevent that from happening?

.buttonf div {
  position: absolute;
  top: 100px;
  left: 113px;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.playf {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4=");
  background-position: 58% 50%;
}

.pausef {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+");
  background-position: 50%;
}

It gets done the same way, except you just raise the stacking order

.playf,.pausef {
  position: relative;
  z-index: 2;  /*layer above the svg*/  
}

EDIT: My last 2 posts have given you another hint to the answer you are seeking from post #34
Along with what I said about the containing block in post #35

1 Like