Chcę zbudować efekt "80's TRON Grid" za pomocą CSS, ale napotykam kilka problemów z uzyskaniem go tam, gdzie chcę.

Rzeczy takie jak to.

enter image description here

Moje wymagania:

  • Zniknij 1 stronę do przezroczystości
  • Zapakuj go w ładny .class, aby założyć dowolny <element> i po prostu działa

Zrobiłem 2 próby z 2 różnymi technikami.

Siatka nr 1 z lat 80. (pseudo selektory)
https://codepen.io/oneezy/pen/MPQWBE
Chociaż działa to doskonale, nie jest idealnym rozwiązaniem umieszczanie 10 <div> w moim html za każdym razem, gdy chcę uzyskać efekt.

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>

Siatka z lat 80. nr 2 (liniowy gradient)
https://codepen.io/oneezy/pen/OaQNPe
Ta technika jest idealna, ponieważ pozwala mi użyć 1 .class na 1 <element>, ale nie jestem pewien, jak to zrobić.

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>

Z góry dziękuję za sugestie :D

4
Oneezy 21 listopad 2018, 19:18

1 odpowiedź

Najlepsza odpowiedź

Możesz użyć mask-image z gradientem alfa, aby osiągnąć pożądany efekt.

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

Spójrz tutaj: https://codepen.io/JoahG/pen/QJQdJB

5
Joah Gerstenberg 21 listopad 2018, 20:49
Dokładnie to, czego szukałem. Dziękuję!
 – 
Oneezy
21 listopad 2018, 20:56