CSS 80's TRON Grid

I'm wanting to build an "80's TRON Grid" effect with CSS but I'm running into a few issues with getting it where I want it.

Stuff like this.

enter image description here

My Requirements:

Fade 1 side to transparent

Package it up into a nice .class to put on any <element> and it just work

I've made 2 attempts at this w/ 2 different techniques.

80's Grid #1 (pseudo selectors)
https://codepen.io/oneezy/pen/MPQWBE

Although this works perfectly, it's not ideal to put 10 <div>'s in my html every time I want the effect.

body { background: black; }



.grid-container { 

	position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; 

	transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);

	transform-origin: bottom;

	padding: 1px; 

	-webkit-background-clip: content-box; 

	-webkit-backface-visibility: hidden;

	outline: 1px solid transparent; 

	will-change: transform; 

}



.grid-line { height: 100%; width: 100%; position: absolute; }





.grid-line:before,

.grid-line:after  { content: ""; display: block; position: absolute; }

.grid-line:before { height: 5px; width: 100%; background: blue; }

.grid-line:after  { height: 100%; width: 5px; background-image: linear-gradient(transparent, blue); }



.grid-line:nth-child(1):before  { top: 0%;  opacity: 0; }

.grid-line:nth-child(2):before  { top: 10%; opacity: 0; }

.grid-line:nth-child(3):before  { top: 20%; opacity: .3; }

.grid-line:nth-child(4):before  { top: 30%; opacity: .4; }

.grid-line:nth-child(5):before  { top: 40%; opacity: .5; }

.grid-line:nth-child(6):before  { top: 50%; opacity: .6; }

.grid-line:nth-child(7):before  { top: 60%; opacity: .7; }

.grid-line:nth-child(8):before  { top: 70%; opacity: .8; }

.grid-line:nth-child(9):before  { top: 80%; opacity: .9; }

.grid-line:nth-child(10):before { top: 90%; opacity: 1; }

.grid-line:nth-child(11):before { top: calc(100% - 3px); }





.grid-line:nth-child(1):after  { left: 0%;  }

.grid-line:nth-child(2):after  { left: 10%; }

.grid-line:nth-child(3):after  { left: 20%; }

.grid-line:nth-child(4):after  { left: 30%; }

.grid-line:nth-child(5):after  { left: 40%; }

.grid-line:nth-child(6):after  { left: 50%; }

.grid-line:nth-child(7):after  { left: 60%; }

.grid-line:nth-child(8):after  { left: 70%; }

.grid-line:nth-child(9):after  { left: 80%; }

.grid-line:nth-child(10):after { left: 90%; }

.grid-line:nth-child(11):after { left: calc(100% - 3px); }

<section class="grid-container">

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div> 

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

</section>

80's Grid #2 (linear-gradient)
https://codepen.io/oneezy/pen/OaQNPe

This technique is ideal because it allows me to use 1 .class on 1 <element>, but I'm not sure how to make it fade out.

body { background: black; }



.grid-container { width: 100%; position: absolute; bottom: 0; left: 0; }



.grid-container:after { 

  

	transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);

  content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;

  padding: 1px; 

  -webkit-background-clip: content-box; 

  -webkit-backface-visibility: hidden;

  outline: 1px solid transparent;

  transform-origin: bottom center;

  will-change: transform; 

}



.grid-container:after {

  background-position: center bottom;

  background-size: 40px 40px;

  background-image: 

  linear-gradient(to right, blue 1px, transparent 0), 

  linear-gradient(to bottom, blue 3px, transparent 0);

}

<section class="grid-container">

</section>

Thanks in advance for your suggestions :D

edited Nov 21 '18 at 17:13

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

add a comment |

I'm wanting to build an "80's TRON Grid" effect with CSS but I'm running into a few issues with getting it where I want it.

Stuff like this.

enter image description here

My Requirements:

Fade 1 side to transparent

Package it up into a nice .class to put on any <element> and it just work

I've made 2 attempts at this w/ 2 different techniques.

80's Grid #1 (pseudo selectors)
https://codepen.io/oneezy/pen/MPQWBE

Although this works perfectly, it's not ideal to put 10 <div>'s in my html every time I want the effect.

body { background: black; }



.grid-container { 

	position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; 

	transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);

	transform-origin: bottom;

	padding: 1px; 

	-webkit-background-clip: content-box; 

	-webkit-backface-visibility: hidden;

	outline: 1px solid transparent; 

	will-change: transform; 

}



.grid-line { height: 100%; width: 100%; position: absolute; }





.grid-line:before,

.grid-line:after  { content: ""; display: block; position: absolute; }

.grid-line:before { height: 5px; width: 100%; background: blue; }

.grid-line:after  { height: 100%; width: 5px; background-image: linear-gradient(transparent, blue); }



.grid-line:nth-child(1):before  { top: 0%;  opacity: 0; }

.grid-line:nth-child(2):before  { top: 10%; opacity: 0; }

.grid-line:nth-child(3):before  { top: 20%; opacity: .3; }

.grid-line:nth-child(4):before  { top: 30%; opacity: .4; }

.grid-line:nth-child(5):before  { top: 40%; opacity: .5; }

.grid-line:nth-child(6):before  { top: 50%; opacity: .6; }

.grid-line:nth-child(7):before  { top: 60%; opacity: .7; }

.grid-line:nth-child(8):before  { top: 70%; opacity: .8; }

.grid-line:nth-child(9):before  { top: 80%; opacity: .9; }

.grid-line:nth-child(10):before { top: 90%; opacity: 1; }

.grid-line:nth-child(11):before { top: calc(100% - 3px); }





.grid-line:nth-child(1):after  { left: 0%;  }

.grid-line:nth-child(2):after  { left: 10%; }

.grid-line:nth-child(3):after  { left: 20%; }

.grid-line:nth-child(4):after  { left: 30%; }

.grid-line:nth-child(5):after  { left: 40%; }

.grid-line:nth-child(6):after  { left: 50%; }

.grid-line:nth-child(7):after  { left: 60%; }

.grid-line:nth-child(8):after  { left: 70%; }

.grid-line:nth-child(9):after  { left: 80%; }

.grid-line:nth-child(10):after { left: 90%; }

.grid-line:nth-child(11):after { left: calc(100% - 3px); }

<section class="grid-container">

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div> 

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

</section>

80's Grid #2 (linear-gradient)
https://codepen.io/oneezy/pen/OaQNPe

This technique is ideal because it allows me to use 1 .class on 1 <element>, but I'm not sure how to make it fade out.

body { background: black; }



.grid-container { width: 100%; position: absolute; bottom: 0; left: 0; }



.grid-container:after { 

  

	transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);

  content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;

  padding: 1px; 

  -webkit-background-clip: content-box; 

  -webkit-backface-visibility: hidden;

  outline: 1px solid transparent;

  transform-origin: bottom center;

  will-change: transform; 

}



.grid-container:after {

  background-position: center bottom;

  background-size: 40px 40px;

  background-image: 

  linear-gradient(to right, blue 1px, transparent 0), 

  linear-gradient(to bottom, blue 3px, transparent 0);

}

<section class="grid-container">

</section>

Thanks in advance for your suggestions :D

edited Nov 21 '18 at 17:13

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

add a comment |

I'm wanting to build an "80's TRON Grid" effect with CSS but I'm running into a few issues with getting it where I want it.

Stuff like this.

enter image description here

My Requirements:

Fade 1 side to transparent

Package it up into a nice .class to put on any <element> and it just work

I've made 2 attempts at this w/ 2 different techniques.

80's Grid #1 (pseudo selectors)
https://codepen.io/oneezy/pen/MPQWBE

Although this works perfectly, it's not ideal to put 10 <div>'s in my html every time I want the effect.

body { background: black; }



.grid-container { 

	position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; 

	transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);

	transform-origin: bottom;

	padding: 1px; 

	-webkit-background-clip: content-box; 

	-webkit-backface-visibility: hidden;

	outline: 1px solid transparent; 

	will-change: transform; 

}



.grid-line { height: 100%; width: 100%; position: absolute; }





.grid-line:before,

.grid-line:after  { content: ""; display: block; position: absolute; }

.grid-line:before { height: 5px; width: 100%; background: blue; }

.grid-line:after  { height: 100%; width: 5px; background-image: linear-gradient(transparent, blue); }



.grid-line:nth-child(1):before  { top: 0%;  opacity: 0; }

.grid-line:nth-child(2):before  { top: 10%; opacity: 0; }

.grid-line:nth-child(3):before  { top: 20%; opacity: .3; }

.grid-line:nth-child(4):before  { top: 30%; opacity: .4; }

.grid-line:nth-child(5):before  { top: 40%; opacity: .5; }

.grid-line:nth-child(6):before  { top: 50%; opacity: .6; }

.grid-line:nth-child(7):before  { top: 60%; opacity: .7; }

.grid-line:nth-child(8):before  { top: 70%; opacity: .8; }

.grid-line:nth-child(9):before  { top: 80%; opacity: .9; }

.grid-line:nth-child(10):before { top: 90%; opacity: 1; }

.grid-line:nth-child(11):before { top: calc(100% - 3px); }





.grid-line:nth-child(1):after  { left: 0%;  }

.grid-line:nth-child(2):after  { left: 10%; }

.grid-line:nth-child(3):after  { left: 20%; }

.grid-line:nth-child(4):after  { left: 30%; }

.grid-line:nth-child(5):after  { left: 40%; }

.grid-line:nth-child(6):after  { left: 50%; }

.grid-line:nth-child(7):after  { left: 60%; }

.grid-line:nth-child(8):after  { left: 70%; }

.grid-line:nth-child(9):after  { left: 80%; }

.grid-line:nth-child(10):after { left: 90%; }

.grid-line:nth-child(11):after { left: calc(100% - 3px); }

<section class="grid-container">

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div> 

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

</section>

80's Grid #2 (linear-gradient)
https://codepen.io/oneezy/pen/OaQNPe

This technique is ideal because it allows me to use 1 .class on 1 <element>, but I'm not sure how to make it fade out.

body { background: black; }



.grid-container { width: 100%; position: absolute; bottom: 0; left: 0; }



.grid-container:after { 

  

	transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);

  content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;

  padding: 1px; 

  -webkit-background-clip: content-box; 

  -webkit-backface-visibility: hidden;

  outline: 1px solid transparent;

  transform-origin: bottom center;

  will-change: transform; 

}



.grid-container:after {

  background-position: center bottom;

  background-size: 40px 40px;

  background-image: 

  linear-gradient(to right, blue 1px, transparent 0), 

  linear-gradient(to bottom, blue 3px, transparent 0);

}

<section class="grid-container">

</section>

Thanks in advance for your suggestions :D

edited Nov 21 '18 at 17:13

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

I'm wanting to build an "80's TRON Grid" effect with CSS but I'm running into a few issues with getting it where I want it.

Stuff like this.

enter image description here

My Requirements:

Fade 1 side to transparent

Package it up into a nice .class to put on any <element> and it just work

I've made 2 attempts at this w/ 2 different techniques.

80's Grid #1 (pseudo selectors)
https://codepen.io/oneezy/pen/MPQWBE

Although this works perfectly, it's not ideal to put 10 <div>'s in my html every time I want the effect.

body { background: black; }



.grid-container { 

	position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; 

	transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);

	transform-origin: bottom;

	padding: 1px; 

	-webkit-background-clip: content-box; 

	-webkit-backface-visibility: hidden;

	outline: 1px solid transparent; 

	will-change: transform; 

}



.grid-line { height: 100%; width: 100%; position: absolute; }





.grid-line:before,

.grid-line:after  { content: ""; display: block; position: absolute; }

.grid-line:before { height: 5px; width: 100%; background: blue; }

.grid-line:after  { height: 100%; width: 5px; background-image: linear-gradient(transparent, blue); }



.grid-line:nth-child(1):before  { top: 0%;  opacity: 0; }

.grid-line:nth-child(2):before  { top: 10%; opacity: 0; }

.grid-line:nth-child(3):before  { top: 20%; opacity: .3; }

.grid-line:nth-child(4):before  { top: 30%; opacity: .4; }

.grid-line:nth-child(5):before  { top: 40%; opacity: .5; }

.grid-line:nth-child(6):before  { top: 50%; opacity: .6; }

.grid-line:nth-child(7):before  { top: 60%; opacity: .7; }

.grid-line:nth-child(8):before  { top: 70%; opacity: .8; }

.grid-line:nth-child(9):before  { top: 80%; opacity: .9; }

.grid-line:nth-child(10):before { top: 90%; opacity: 1; }

.grid-line:nth-child(11):before { top: calc(100% - 3px); }





.grid-line:nth-child(1):after  { left: 0%;  }

.grid-line:nth-child(2):after  { left: 10%; }

.grid-line:nth-child(3):after  { left: 20%; }

.grid-line:nth-child(4):after  { left: 30%; }

.grid-line:nth-child(5):after  { left: 40%; }

.grid-line:nth-child(6):after  { left: 50%; }

.grid-line:nth-child(7):after  { left: 60%; }

.grid-line:nth-child(8):after  { left: 70%; }

.grid-line:nth-child(9):after  { left: 80%; }

.grid-line:nth-child(10):after { left: 90%; }

.grid-line:nth-child(11):after { left: calc(100% - 3px); }

<section class="grid-container">

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div> 

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

</section>

80's Grid #2 (linear-gradient)
https://codepen.io/oneezy/pen/OaQNPe

This technique is ideal because it allows me to use 1 .class on 1 <element>, but I'm not sure how to make it fade out.

body { background: black; }



.grid-container { width: 100%; position: absolute; bottom: 0; left: 0; }



.grid-container:after { 

  

	transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);

  content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;

  padding: 1px; 

  -webkit-background-clip: content-box; 

  -webkit-backface-visibility: hidden;

  outline: 1px solid transparent;

  transform-origin: bottom center;

  will-change: transform; 

}



.grid-container:after {

  background-position: center bottom;

  background-size: 40px 40px;

  background-image: 

  linear-gradient(to right, blue 1px, transparent 0), 

  linear-gradient(to bottom, blue 3px, transparent 0);

}

<section class="grid-container">

</section>

Thanks in advance for your suggestions :D

body { background: black; }



.grid-container { 

	position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; 

	transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);

	transform-origin: bottom;

	padding: 1px; 

	-webkit-background-clip: content-box; 

	-webkit-backface-visibility: hidden;

	outline: 1px solid transparent; 

	will-change: transform; 

}



.grid-line { height: 100%; width: 100%; position: absolute; }





.grid-line:before,

.grid-line:after  { content: ""; display: block; position: absolute; }

.grid-line:before { height: 5px; width: 100%; background: blue; }

.grid-line:after  { height: 100%; width: 5px; background-image: linear-gradient(transparent, blue); }



.grid-line:nth-child(1):before  { top: 0%;  opacity: 0; }

.grid-line:nth-child(2):before  { top: 10%; opacity: 0; }

.grid-line:nth-child(3):before  { top: 20%; opacity: .3; }

.grid-line:nth-child(4):before  { top: 30%; opacity: .4; }

.grid-line:nth-child(5):before  { top: 40%; opacity: .5; }

.grid-line:nth-child(6):before  { top: 50%; opacity: .6; }

.grid-line:nth-child(7):before  { top: 60%; opacity: .7; }

.grid-line:nth-child(8):before  { top: 70%; opacity: .8; }

.grid-line:nth-child(9):before  { top: 80%; opacity: .9; }

.grid-line:nth-child(10):before { top: 90%; opacity: 1; }

.grid-line:nth-child(11):before { top: calc(100% - 3px); }





.grid-line:nth-child(1):after  { left: 0%;  }

.grid-line:nth-child(2):after  { left: 10%; }

.grid-line:nth-child(3):after  { left: 20%; }

.grid-line:nth-child(4):after  { left: 30%; }

.grid-line:nth-child(5):after  { left: 40%; }

.grid-line:nth-child(6):after  { left: 50%; }

.grid-line:nth-child(7):after  { left: 60%; }

.grid-line:nth-child(8):after  { left: 70%; }

.grid-line:nth-child(9):after  { left: 80%; }

.grid-line:nth-child(10):after { left: 90%; }

.grid-line:nth-child(11):after { left: calc(100% - 3px); }

<section class="grid-container">

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div> 

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

</section>

body { background: black; }



.grid-container { 

	position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; 

	transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);

	transform-origin: bottom;

	padding: 1px; 

	-webkit-background-clip: content-box; 

	-webkit-backface-visibility: hidden;

	outline: 1px solid transparent; 

	will-change: transform; 

}



.grid-line { height: 100%; width: 100%; position: absolute; }





.grid-line:before,

.grid-line:after  { content: ""; display: block; position: absolute; }

.grid-line:before { height: 5px; width: 100%; background: blue; }

.grid-line:after  { height: 100%; width: 5px; background-image: linear-gradient(transparent, blue); }



.grid-line:nth-child(1):before  { top: 0%;  opacity: 0; }

.grid-line:nth-child(2):before  { top: 10%; opacity: 0; }

.grid-line:nth-child(3):before  { top: 20%; opacity: .3; }

.grid-line:nth-child(4):before  { top: 30%; opacity: .4; }

.grid-line:nth-child(5):before  { top: 40%; opacity: .5; }

.grid-line:nth-child(6):before  { top: 50%; opacity: .6; }

.grid-line:nth-child(7):before  { top: 60%; opacity: .7; }

.grid-line:nth-child(8):before  { top: 70%; opacity: .8; }

.grid-line:nth-child(9):before  { top: 80%; opacity: .9; }

.grid-line:nth-child(10):before { top: 90%; opacity: 1; }

.grid-line:nth-child(11):before { top: calc(100% - 3px); }





.grid-line:nth-child(1):after  { left: 0%;  }

.grid-line:nth-child(2):after  { left: 10%; }

.grid-line:nth-child(3):after  { left: 20%; }

.grid-line:nth-child(4):after  { left: 30%; }

.grid-line:nth-child(5):after  { left: 40%; }

.grid-line:nth-child(6):after  { left: 50%; }

.grid-line:nth-child(7):after  { left: 60%; }

.grid-line:nth-child(8):after  { left: 70%; }

.grid-line:nth-child(9):after  { left: 80%; }

.grid-line:nth-child(10):after { left: 90%; }

.grid-line:nth-child(11):after { left: calc(100% - 3px); }

<section class="grid-container">

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div> 

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

	<div class="grid-line"></div>

</section>

body { background: black; }



.grid-container { width: 100%; position: absolute; bottom: 0; left: 0; }



.grid-container:after { 

  

	transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);

  content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;

  padding: 1px; 

  -webkit-background-clip: content-box; 

  -webkit-backface-visibility: hidden;

  outline: 1px solid transparent;

  transform-origin: bottom center;

  will-change: transform; 

}



.grid-container:after {

  background-position: center bottom;

  background-size: 40px 40px;

  background-image: 

  linear-gradient(to right, blue 1px, transparent 0), 

  linear-gradient(to bottom, blue 3px, transparent 0);

}

<section class="grid-container">

</section>

body { background: black; }



.grid-container { width: 100%; position: absolute; bottom: 0; left: 0; }



.grid-container:after { 

  

	transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);

  content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;

  padding: 1px; 

  -webkit-background-clip: content-box; 

  -webkit-backface-visibility: hidden;

  outline: 1px solid transparent;

  transform-origin: bottom center;

  will-change: transform; 

}



.grid-container:after {

  background-position: center bottom;

  background-size: 40px 40px;

  background-image: 

  linear-gradient(to right, blue 1px, transparent 0), 

  linear-gradient(to bottom, blue 3px, transparent 0);

}

<section class="grid-container">

</section>

css grid background-image css-transforms linear-gradients

edited Nov 21 '18 at 17:13

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

edited Nov 21 '18 at 17:13

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

edited Nov 21 '18 at 17:13

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

asked Nov 21 '18 at 16:18

Oneezy

2,21853053

add a comment |

1 Answer
1

active

oldest

votes

You can use mask-image with an alpha gradient to achieve the effect you're looking for.

.grid-container:after { 

   -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

   mask-image: gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

Take a look here: https://codepen.io/JoahG/pen/QJQdJB

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

Exactly what I was looking for. Thanks!

– Oneezy
Nov 21 '18 at 17:56

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416334%2fcss-80s-tron-grid%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can use mask-image with an alpha gradient to achieve the effect you're looking for.

.grid-container:after { 

   -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

   mask-image: gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

Take a look here: https://codepen.io/JoahG/pen/QJQdJB

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

Exactly what I was looking for. Thanks!

– Oneezy
Nov 21 '18 at 17:56

add a comment |

You can use mask-image with an alpha gradient to achieve the effect you're looking for.

.grid-container:after { 

   -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

   mask-image: gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

Take a look here: https://codepen.io/JoahG/pen/QJQdJB

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

Exactly what I was looking for. Thanks!

– Oneezy
Nov 21 '18 at 17:56

add a comment |

You can use mask-image with an alpha gradient to achieve the effect you're looking for.

.grid-container:after { 

   -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

   mask-image: gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

Take a look here: https://codepen.io/JoahG/pen/QJQdJB

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

You can use mask-image with an alpha gradient to achieve the effect you're looking for.

.grid-container:after { 

   -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

   mask-image: gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

Take a look here: https://codepen.io/JoahG/pen/QJQdJB

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

answered Nov 21 '18 at 17:49

Joah Gerstenberg

35317

Exactly what I was looking for. Thanks!

– Oneezy
Nov 21 '18 at 17:56

add a comment |

Exactly what I was looking for. Thanks!

– Oneezy
Nov 21 '18 at 17:56

Exactly what I was looking for. Thanks!

– Oneezy
Nov 21 '18 at 17:56

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk

CSS 80's TRON Grid

1 Answer
1

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

Post as a guest

Popular posts from this blog

鏡平學校

Why https connections are so slow when debugging (stepping over) in Java?

CSS 80's TRON Grid

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

鏡平學校

Why https connections are so slow when debugging (stepping over) in Java?

1 Answer
1

1 Answer
1

1 Answer
1