Border lines vs. Background lines

asasass · January 2, 2018, 1:16am

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;
}

asasass · January 2, 2018, 6:56am

If my initial question can’t be answered, here’s another one:

Which players should use

Border Lines, and which should use Background Lines

asasass · January 2, 2018, 7:45am

Character Count:

Border lines
6807

Background lines
6479

TechnoBear · January 2, 2018, 12:16pm

I don’t know that I understand your initial question, but JSFiddle is just giving me 500 errors, so I can’t take a look. You’ve only posted the CSS and not the accompanying HTML for each version, so I can’t reconstruct the page to do it that way.

Let me ask a question.

What is the function of these lines?

In three of your examples, the lines look out of place to me, and only serve to make things visually confusing, so I would like to know why you have chosen to add them. What purpose do they serve?

You’ve been told before that a smaller number of characters is not the be all and end all of coding. There are other considerations, such as clarity and ease of maintenance.

asasass · January 2, 2018, 5:46pm

All the code are in the jsfiddles.

Using left/right Borders as lines:

Using Background as lines:

What errors are you seeing?

I’m not seeing any errors.

The lines look even to me:

asasass · January 2, 2018, 6:03pm

Is jsfiddle still giving you errors?

TechnoBear · January 2, 2018, 6:03pm

As I said earlier, I was unable to see the Fiddles because when I visited the links, I got a 500 server error. I was not commenting on your code, beyond stating that I couldn’t see it. (The site seems to be fixed now.)

They may look even, but “out of place” is not the same as “misplaced”. In the last three instances, it seems to me that those lines do not fit with the rest of the design. They look wrong; out of place. I would like to know why you have included them in the design - what part do you think that they play?

coothead · January 2, 2018, 6:04pm

Hi there asasass,

I would suggest that this question boils down to personal preference.

Use the code which most suits your temperament.

This has consistently been your approach to past coding dilemmas.

coothead

asasass · January 2, 2018, 6:05pm

I just wanted them all to match really, that’s all.

Stay with the same theme style.

asasass · January 2, 2018, 6:06pm

What’s your personal preference if I may kindly ask?

Border lines or Background lines

coothead · January 2, 2018, 6:31pm

Your question does not have a simple “this or that” answer.

This is because our coding methodology is rather different.

If forced to make a choice though, then I would say neither.

I would not have used your code at all, so the problem would
not have arisen.

coothead

system · April 4, 2018, 1:31am

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

Topic		Replies	Views
I'm having trouble giving this a border-radius 50px HTML & CSS	6	925	January 14, 2019
Simplifying a code HTML & CSS	129	8323	April 10, 2018
Using ::before, and ::after HTML & CSS	28	978	March 19, 2019
Possitioning CSS Classes according to the HTML HTML & CSS	2	1750	April 8, 2018
I was told to use less code rather than more code, so which of these codes is better? HTML & CSS	12	2352	October 7, 2016

Border lines vs. Background lines

Related topics