Ray.H
December 10, 2017, 6:14pm
64
asasass:
How come the lines were put at the bottom, instead of towards the top of the code?
Is there a particular reason for this?
I put it at the bottom since it is essentially an empty div that is used for decoration only. It has no real content so it has no need to be part of the document flow.[quote=“asasass, post:60, topic:283388”]
I now see that, doing that wouldn’t work on every code, some need to be towards the top.
[/quote]
It only contains pseudo elements and they are absolute positioned (removed from the page flow)
Yes, elements lower in the page source have a higher stacking order. If you don’t want to deal with z-index you can move it to the top. That way it would not interfere with play buttons in some cases.
As you’ve seen though, there will be times you need z-index
2 Likes
Ray.H
December 10, 2017, 6:23pm
65
You don’t need 2 pseudos for one vertical line, the use of ::before
is enough
.color::before {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 88px;
height: 100%;
background: black;
}
.activated .color::before {
display:none; /*remove on click*/
}
2 Likes
asasass
December 10, 2017, 6:44pm
66
Is there any possible way to do this, or it’s not possible?
#62
asasass
December 10, 2017, 6:57pm
67
How would I do this, where cursor:pointer is only set on the image so that, after you click the image, it goes away?
.linkse::before {
content: "";
cursor: pointer;
}
.activated .linkse::before {
cursor: none; /*remove on click*/
}
Ray.H
December 10, 2017, 7:21pm
68
You need to keep up with what’s going on!
Those are NOT borders
They are pseudo elements at 3px wide with background colors
You must target the background
We had that working way back on post #4
EDIT:
I think I see what your saying now.
You want the borders & pseudo borders transitioning at a different speed than the background-position of the sprite
Then you would need to group your different delay speeds in one transition
.playButtonb {
position: relative;
width: 260px;
height: 260px;
cursor: pointer;
background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
border: 3px solid #0059dd;
transition: background-position 2s, border 5s; /*group properties and speeds together*/
}
.playButtonb.activated {
border: 3px solid #e77d19;
background-position: 0 -260px;
}
.playButtonb::before,
.playButtonb::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
transition:background 5s;/*pseudo borders*/
}
.playButtonb::after {
left: 174px;
}
.playButtonb.activated::before,
.playButtonb.activated::after {
background: #e77d19;
}
asasass
December 10, 2017, 8:59pm
69
This works with the two lines going down:
transition-delay: 3s;
How would you add that effect to the border also?
transition-delay: border 3s;
Ray.H
December 10, 2017, 9:43pm
70
Transitions inherit to children so there was a little confusion going on with the background property. It was inheriting to the pseudo borders since they are really backgrounds.
It’s best to group the transitions together and use the shorthand transition property, just use commas to separate the rules
See transition shorthand for detailed examples of grouping and the order of duration, function, delay
For example…
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
Now, with your code and the best I can understand what you are wanting try this and adjust to your liking …
.playButtonb {
position: relative;
width: 260px;
height: 260px;
cursor: pointer;
transition: background 2s 0s, border 3s 2s;
/* border duration & delay must match ::pseudo background duration & delay below*/
background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
border: 3px solid #0059dd;
}
.playButtonb.activated {
border: 3px solid #e77d19;
background-position: 0 -260px;
}
.playButtonb::before,
.playButtonb::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
transition: background 3s 2s; /* duration & delay must match border duration & delay above*/
}
So this …
transition: background 2s 0s, border 3s 2s;
would translate to…
background | with 2s duration | and 0s delay border | with 3s duration | and 2s delay
Your pseudo :before and :after background duration & delay needs to be the same as the border duration & delay in the .playButtonb
ruleset
EDIT: Comments added to the CSS
3 Likes
asasass
December 10, 2017, 10:15pm
71
I fixed it by removing cursor:pointer from linkse, and added it to initiale.
1 Like
asasass
December 11, 2017, 3:31am
72
I have this code here:
.colors {
height: 44px;
width: 44px;
border: 3px solid #0059dd;
position: relative;
background: #ffffff;
}
.colors::before,
.colors::after {
content: '';
position: absolute;
top: 0;
width: 14px;
height: 44px;
}
.colors::before {
left: 0;
background-color: #00ffff;
}
.colors::after {
right: 0;
background-color: #ff00ff;
}
<div class="colors"></div>
How would I hook that up to:
The last link
.linkse a:nth-of-type(15) {
}
asasass
December 11, 2017, 3:33am
73
I just did it.
.linkse a:nth-of-type(15) {
height: 44px;
width: 44px;
border: 3px solid #0059dd;
position: relative;
background: #ffffff;
}
.linkse a:nth-of-type(15)::before,
.linkse a:nth-of-type(15)::after {
content: '';
position: absolute;
top: 0;
width: 14px;
height: 44px;
}
.linkse a:nth-of-type(15)::before {
left: 0;
background-color: #00ffff;
}
.linkse a:nth-of-type(15)::after {
right: 0;
background-color: #ff00ff;
}
asasass
December 11, 2017, 4:21am
74
Why is there white space at the end of this code?
I put the code in the same as the bottom.
198px
Is there a way to get it to work on 198px?
198px
I think it has something to do with this code that is interfering with it.
.playButtona::before,
.playButtona::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.playButtona::after {
left: 399px;
}
asasass
December 11, 2017, 5:12am
75
Look at this:
.playButtona::before,
.playButtona::after {
content: "";
position: absolute;
background: #0059dd;
}
.playButtona::after {
}
asasass
December 11, 2017, 5:15am
76
How do I add this code:
.playButtona::before,
.playButtona::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.playButtona::after {
left: 399px;
}
Back into here:
So the lines are over both images.
asasass
December 11, 2017, 5:28am
77
Fixed:
.playButtona {
position: relative;
width: 600px;
height: 44px;
cursor: pointer;
border: 3px solid #0059dd;
}
.playButtona.active {
background: #ffffff;
}
.playButtona.active::before,
.playButtona.active::after {
content: "";
position: absolute;
width: 198px;
height: 44px;
}
.playButtona.active::before {
left: 0;
background-color: #00ffff;
}
.playButtona.active::after {
right: 0;
background-color: #ff00ff;
}
.lines::before,
.lines::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.lines::after {
left: 399px;
}
asasass
December 11, 2017, 6:25am
78
How would I include this code in with the transition, removing display:none;
?
So the whole thing transitions together.
With display none, that removes it right away, and there’s no transition.
I’m actually confused on this one, can you add a transition, from something, to none?
I’m stuck on this one.
.color::before {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 88px;
height: 100%;
background: black;
}
.activated .color::before {
display:none; /*re
move on click*/
}
asasass
December 11, 2017, 6:40am
79
Something like this, testing it.
Can you add a transition, from something, to none?
.color::before {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 88px;
height: 100%;
background: black;
transition: all 5s;
}
.activated .color::before {
display:none; /*re
move on click*/
}
Ray.H
December 11, 2017, 6:52am
80
That’s the one using opacity for the fade in effect.
You need to do the same using opacity, instead of removing it with display:none
But you need to reverse the opacity values around for fade out
Try this…
.color::before {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 88px;
height: 100%;
/*transitions*/
background: black;
opacity: 1;
transition: all 2s;
}
.activated .color::before {
opacity: 0; /*for fade out effect*/
background: transparent; /*remove background color*/
}
1 Like
asasass
December 11, 2017, 6:57am
81
I don’t think this is needed:
background: transparent; /*remove background color*/
Would I be right?
1 Like
Ray.H
December 11, 2017, 7:00am
82
Yeah, it looks like you can do away with it.
Had that in there before I reversed the opacity values
1 Like
asasass
December 11, 2017, 7:02am
83
I see it would work like this too:
.activated .color::before {
background: transparent;
}