Is there any way on how I can do further testing on these two different code styles?
Would there be a way to put obstacles in the way of each to see how they perform/deal with them under different types of environments/stress levels?
Using left/right Borders as lines:
.wrapa {
position: relative;
width: 606px;
height: 50px;
cursor: pointer;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapa::before,
.wrapa::after {
content: "";
position: absolute;
width: 201px;
height: 100%;
box-sizing: border-box;
}
.wrapa::before {
left: 0;
border-right: 3px solid #0059dd;
}
.wrapa::after {
right: 0;
border-left: 3px solid #0059dd;
}
.activea {
background: #ffffff;
}
.activea::before {
background-color: #00ffff;
}
.activea::after {
background-color: #ff00ff;
}
.playa,
.pausea {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
cursor: pointer;
}
.wrapb {
position: relative;
width: 266px;
height: 266px;
cursor: pointer;
background: url("https://i.imgur.com/xmdldMK.png") no-repeat 0 0;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 266px;
height: 266px;
background: url("https://i.imgur.com/xmdldMK.png") no-repeat -260px 0;
opacity: 0;
border: 3px solid #0059dd;
box-sizing: border-box;
transition: all 2s;
}
.activeb::before {
opacity: 1;
border: 3px solid #e77d19;
}
.colorb::before {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 88px;
height: 100%;
background: black;
opacity: 1;
transition: all 2s;
}
.activeb .colorb::before {
opacity: 0;
}
.initialb,
.pauseb,
.playb,
.speakerb {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.initialb {
stroke: #e77d19;
stroke-width: 3px;
fill: transparent;
}
.pauseb,
.playb {
stroke: #e77d19;
stroke-width: 3px;
fill: transparent;
}
.speakerb {
fill: #1ed760;
}
.linesb::before,
.linesb::after {
content: "";
position: absolute;
width: 86px;
height: 100%;
box-sizing: border-box;
transition: all 2s;
}
.linesb::before {
left: 0;
border-right: 3px solid #0059dd;
}
.linesb::after {
right: 0;
border-left: 3px solid #0059dd;
}
.activeb .linesb::before {
left: 0;
border-right: 3px solid #e77d19;
}
.activeb .linesb::after {
right: 0;
border-left: 3px solid #e77d19;
}
.wrapc {
position: relative;
width: 266px;
height: 50px;
overflow: hidden;
cursor: pointer;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.playButtonc {
float: left;
width: 83px;
height: 44px;
position: relative;
}
.svoefm {
fill: #aaff00;
}
.soundpark {
width: 94px;
fill: #ffaa00;
}
.cavoparadisoclub {
fill: #ff00aa;
}
.playca,
.playcc {
margin: 15px 36px;
}
.pauseca,
.pausecc {
margin: 15px 37px;
}
.playcb {
margin: 15px 41px;
}
.pausecb {
margin: 15px 42px;
}
.linesc::before,
.linesc::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
.linesc::after {
left: 174px;
}
.wrapd {
position: relative;
width: 266px;
height: 200px;
cursor: pointer;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.imgd::before,
.imgd::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;
}
.imgd::after {
background: url("https://i.imgur.com/4HJbzEq.png") no-repeat;
width: 180px;
height: 180px;
}
.stackd {
position: relative;
stroke-width: 2;
stroke: lime;
fill: transparent;
}
.playd,
.paused {
position: absolute;
top: -4px;
right: 0;
bottom: 0;
left: 4px;
margin: auto;
fill: #0059dd;
}
.paused {
left: 0;
}
.linesd::before,
.linesd::after {
content: "";
position: absolute;
width: 86px;
height: 100%;
box-sizing: border-box;
}
.linesd::before {
left: 0;
border-right: 3px solid #0059dd;
}
.linesd::after {
right: 0;
border-left: 3px solid #0059dd;
}
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.wrape a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: rgba(0, 0, 0, .2);
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape a:hover {
border: 3px solid red;
}
.wrape li:nth-of-type(5n) a {
margin-right: 0;
}
.wrape li:nth-of-type(8) a {
opacity: 0;
}
.wrape li:nth-of-type(15) a {
position: relative;
background: #ffffff;
border: 3px solid #0059dd;
}
.wrape li:nth-of-type(15) a::before,
.wrape li:nth-of-type(15) a::after {
content: '';
position: absolute;
top: 0;
width: 15px;
height: 44px;
box-sizing: border-box;
}
.wrape li:nth-of-type(15) a::before {
left: 0;
background: #00ffff;
border-right: 3px solid #0059dd;
}
.wrape li:nth-of-type(15) a::after {
right: 0;
background: #ff00ff;
border-left: 3px solid #0059dd;
}
.inactivee .covere a {
display: none;
}
.inactivee .playButtone {
display: none;
}
.covere {
width: 266px;
height: 174px;
background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.covere {
display: none;
}
.inactivee .covere {
display: block;
}
.covere::before,
.covere::after {
content: "";
position: absolute;
width: 89px;
height: 100%;
box-sizing: border-box;
}
.covere::before {
left: 0;
border-right: 3px solid #0059dd;
}
.covere::after {
right: 0;
border-left: 3px solid #0059dd;
}
.nave {
margin: 0;
padding: 0;
list-style: none;
}
.nave li {
float: left;
}
.activee .playButtone {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, .7);
cursor: pointer;
fill: #aaff00;
}
.activee {
background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}
.playe,
.pausee {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 6px;
margin: auto;
}
.pausee {
left: 0;
}
.wrapf {
position: relative;
width: 266px;
height: 251px;
cursor: pointer;
background: url("https://i.imgur.com/qaEvk4G.png") no-repeat;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.linesf::before,
.linesf::after {
content: "";
position: absolute;
width: 86px;
height: 100%;
box-sizing: border-box;
}
.linesf::before {
left: 0;
border-right: 3px solid #0059dd;
}
.linesf::after {
right: 0;
border-left: 3px solid #0059dd;
}
.stackf {
position: relative;
stroke-width: 6;
stroke: #89cff0;
}
.playf,
.pausef {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 14px;
margin: auto;
fill: #0059dd;
}
.pausef {
left: 10px;
}
.hide {
display: none;
}
Using Background as lines:
.wrapa {
position: relative;
width: 606px;
height: 50px;
cursor: pointer;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.activea {
background: #ffffff;
}
.activea::before,
.activea::after {
content: "";
position: absolute;
width: 198px;
height: 100%;
}
.activea::before {
left: 0;
background-color: #00ffff;
}
.activea::after {
right: 0;
background-color: #ff00ff;
}
.playa,
.pausea {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
cursor: pointer;
}
.linesa::before,
.linesa::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.linesa::after {
left: 399px;
}
.wrapb {
position: relative;
width: 266px;
height: 266px;
cursor: pointer;
background: url("https://i.imgur.com/xmdldMK.png") no-repeat 0 0;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 266px;
height: 266px;
background: url("https://i.imgur.com/xmdldMK.png") no-repeat -260px 0;
opacity: 0;
border: 3px solid #0059dd;
box-sizing: border-box;
transition: all 2s;
}
.activeb::before {
opacity: 1;
border: 3px solid #e77d19;
}
.colorb::before {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 88px;
height: 100%;
background: black;
opacity: 1;
transition: all 2s;
}
.activeb .colorb::before {
opacity: 0;
}
.initialb,
.pauseb,
.playb,
.speakerb {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.initialb {
stroke: #e77d19;
stroke-width: 3px;
fill: transparent;
}
.pauseb,
.playb {
stroke: #e77d19;
stroke-width: 3px;
fill: transparent;
}
.speakerb {
fill: #1ed760;
}
.linesb::before,
.linesb::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
transition: all 2s;
}
.linesb::after {
left: 174px;
}
.activeb .linesb::before,
.activeb .linesb::after {
background: #e77d19;
}
.wrapc {
position: relative;
width: 266px;
height: 50px;
overflow: hidden;
cursor: pointer;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.playButtonc {
float: left;
width: 83px;
height: 44px;
position: relative;
}
.svoefm {
fill: #aaff00;
}
.soundpark {
width: 94px;
fill: #ffaa00;
}
.cavoparadisoclub {
fill: #ff00aa;
}
.playca,
.playcc {
margin: 15px 36px;
}
.pauseca,
.pausecc {
margin: 15px 37px;
}
.playcb {
margin: 15px 41px;
}
.pausecb {
margin: 15px 42px;
}
.linesc::before,
.linesc::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
.linesc::after {
left: 174px;
}
.wrapd {
position: relative;
width: 266px;
height: 200px;
cursor: pointer;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.imgd::before,
.imgd::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;
}
.imgd::after {
background: url("https://i.imgur.com/4HJbzEq.png") no-repeat;
width: 180px;
height: 180px;
}
.stackd {
position: relative;
stroke-width: 2;
stroke: lime;
fill: transparent;
}
.playd,
.paused {
position: absolute;
top: -4px;
right: 0;
bottom: 0;
left: 4px;
margin: auto;
fill: #0059dd;
}
.paused {
left: 0;
}
.linesd::before,
.linesd::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
.linesd::after {
left: 174px;
}
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.wrape a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: rgba(0, 0, 0, .2);
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape a:hover {
border: 3px solid red;
}
.wrape li:nth-of-type(5n) a {
margin-right: 0;
}
.wrape li:nth-of-type(8) a {
opacity: 0;
}
.wrape li:nth-of-type(15) a {
position: relative;
background: #ffffff;
border: 3px solid #0059dd;
}
.wrape li:nth-of-type(15) a::before,
.wrape li:nth-of-type(15) a::after {
content: '';
position: absolute;
top: 0;
width: 15px;
height: 44px;
box-sizing: border-box;
}
.wrape li:nth-of-type(15) a::before {
left: 0;
background: #00ffff;
border-right: 3px solid #0059dd;
}
.wrape li:nth-of-type(15) a::after {
right: 0;
background: #ff00ff;
border-left: 3px solid #0059dd;
}
.inactivee .covere a {
display: none;
}
.inactivee .playButtone {
display: none;
}
.covere {
width: 266px;
height: 174px;
background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.covere {
display: none;
}
.inactivee .covere {
display: block;
}
.covere::before,
.covere::after {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 3px;
height: 100%;
background: #0059dd;
}
.covere::after {
left: 177px;
}
.nave {
margin: 0;
padding: 0;
list-style: none;
}
.nave li {
float: left;
}
.activee .playButtone {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, .7);
cursor: pointer;
fill: #aaff00;
}
.activee {
background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}
.playe,
.pausee {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 6px;
margin: auto;
}
.pausee {
left: 0;
}
.wrapf {
position: relative;
width: 266px;
height: 251px;
cursor: pointer;
background: url("https://i.imgur.com/qaEvk4G.png") no-repeat;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.linesf::before,
.linesf::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
.linesf::after {
left: 174px;
}
.stackf {
position: relative;
stroke-width: 6;
stroke: #89cff0;
}
.playf,
.pausef {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 14px;
margin: auto;
fill: #0059dd;
}
.pausef {
left: 10px;
}
.hide {
display: none;
}