Linear-gradient questions

HTML & CSS
1

Can this linear-gradient be made without calc?

.wrap {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  border:3px solid red;
  background-color:red;
  overflow: hidden;
  border-radius: 25px;
  box-sizing: border-box;
  background: 
    linear-gradient(red,red) calc(100%/3 - 1px) 0% /3px 100%,
    linear-gradient(red,red) calc(2*100%/3 + 1px) 0% /3px 100%,
    linear-gradient(red,red) 0% calc(100%/3 - 1px) /100% 3px,
    linear-gradient(red,red) 0% calc(2*100%/3 + 1px) /100% 3px,
    url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
  background-repeat:no-repeat;
}
2

Is there a problem with using calc?

Why do you need to remove it?

3

I wanted to know if it could be done without the use of calc.

4

Assuming you are keeping the element a fixed width and height then you can work out the measurements you need without using calc.

e.g.


  background: 
    linear-gradient(red,red) 198px 0% /3px 100%,
    linear-gradient(red,red) 399px 0% /3px 100%,
    linear-gradient(red,red) 0% 198px /100% 3px,
    linear-gradient(red,red) 0% 399px /100% 3px,
    url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
  background-repeat:no-repeat;
}
1 Like
5

How would I replace the 2 lines going down here with linear gradient?

I don’t think this would be possible.

  background: linear-gradient(red, red) 83px 0% /3px 100%, 
  linear-gradient(red, red) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;
6

What have you tried so far?

Compare the working code you have for your other version, see how the gradient has been applied there (and which element it has been applied to) and then work out how to use the same approach in the new code.

There is no point in us simply giving you working code, as you will not learn that way. You need to think and experiment for yourself.

1 Like
7

I tried adding this to every part of the CSS.
Nothing worked.

  background: linear-gradient(red, red) 83px 0% /3px 100%, 
  linear-gradient(red, red) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;

.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/UzRn6Qx.png") no-repeat 0 0;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background-position: 0 -260px;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

.wrapb.activated::before {
  opacity: 1;
  border: 3px solid #0059dd;
}

.wrapb .color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 88px;
  height: 100%;
  background: black;
  opacity: 1;
  transition: all 2s;
}

.wrapb.activated .color::before {
  opacity: 0;
}

.wrapb .play,
.wrapb .pause,
.wrapb .speaker {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.wrapb .play,
.wrapb .pause {
  stroke: #1da1f2;
  stroke-width: 3px;
  fill: transparent;
}

.wrapb .speaker {
  fill: #1ed760;
}

.wrapb .lines::before,
.wrapb .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 260px;
  background: #0059dd;
  transition: all 2s;
}

.wrapb .lines::after {
  left: 174px;
}

.wrapb.activated .lines::before,
.wrapb.activated .lines::after {
  background: #0059dd;
}

.hide{
  display:none;
}
8

That rather suggests that you don’t understand what the code is doing, or how it works, and you’re just hoping to stumble upon a fix. You need to look at your code and work things out logically.

I’d start by finding the code which creates the blue lines you want to replace, and comment it out.

9

I did that in this example, no lines are showing:

.wrapb .lines::before,
.wrapb .lines::after {
  background: linear-gradient(red, red) 83px 0% /3px 100%, 
  linear-gradient(red, red) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;
  transition: all 2s;
}

.wrapb.activated .lines::before,
.wrapb.activated .lines::after {
   background: linear-gradient(red, red) 83px 0% /3px 100%, 
  linear-gradient(red, red) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;
}
10

You’re adding the gradient to the wrong place.

Look again at the working example you have from Paul, and see where the gradient is added.

11

I removed this:

But it needs to be added back in:

.wrapb .lines::before,
.wrapb .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 260px;
  background: #0059dd;
  transition: all 2s;
}

.wrapb .lines::after {
  left: 174px;
}

.wrapb.activated .lines::before,
.wrapb.activated .lines::after {
  background: #0059dd;
}
12

Why does it need to be added back in?

13

There’s no lines showing after it is clicked:

14

That’s true, but to me, those lines make no sense after the play button has been clicked. You no longer have a three-part background. They just add to the visual confusion.

15

I want the lines to be able to be a different color if I choose to.

Like it works here:

.wrapb.activated .lines::before,
.wrapb.activated .lines::after {
  background: red;
}
16

You can do that with your original code so I don’t know why you want to change to a gradient?

If you want the gradient applied to the element called .lines then you need to make it the size of the whole block and not 3px wide.

e.g.

.wrapb .lines::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background: linear-gradient(red, red) 83px 0% /3px 100%, 
  linear-gradient(red, red) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;
  transition: all 2s;
}
.wrapb.activated .lines::before {
   background: linear-gradient(green, green) 83px 0% /3px 100%, 
  linear-gradient(green, green) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;
}

You don’t need :after and indeed you don;t really need :before either.

i.e.

.wrapb .lines{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background: linear-gradient(red, red) 83px 0% /3px 100%, 
  linear-gradient(red, red) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;
  transition: all 2s;
}
.wrapb.activated .lines {
   background: linear-gradient(green, green) 83px 0% /3px 100%, 
  linear-gradient(green, green) 174px 0% / 3px 100% ;
  background-repeat: no-repeat;
}

Of course you lose the transition because gradients can’t be animated unlike background-color and you will probably run into issues of trying to click through the panel now that it sits completely over the top of the whole thing rather than just a 3px line.

Why don’t you just change the background-color of the lines using your activated class as you have just done here?

2 Likes
18

This way would have worked well also:

It’s just the long form way of doing it.

  background: 
  linear-gradient(to right, transparent 0, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px,  transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px),

  linear-gradient(to bottom, transparent 0, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px),
 url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
}

Compared to this which is the short form way of doing it.

  background: 
    linear-gradient(red,red) 198px 0% /3px 100%,
    linear-gradient(red,red) 399px 0% /3px 100%,
    linear-gradient(red,red) 0% 198px /100% 3px,
    linear-gradient(red,red) 0% 399px /100% 3px,
    url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
  background-repeat:no-repeat;
}
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.