پیشنمایش زنده
کد HTML
<div class="matrix-container">
<div class="matrix">
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
</div>
<div class="col-matrix">
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
</div>
<div class="col-matrix">
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
</div>
<div class="matrix">
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
</div>
</div>
کد CSS
.matrix,
.col-matrix {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
border-radius: 5px;
overflow: hidden;
width: 300px;
height: 300px;
gap: -1px;
box-shadow:
inset -1px -1px 0px #ffffff,
inset 1px 1px 0px #ffffff,
inset -1px 1px 0px #ffffff,
/*4 smth u wont rly notice*/ inset 1px -1px 0px #ffffff;
}
.matrix-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 1px;
width: max-content;
border-radius: 15px;
overflow: hidden;
}
.button {
all: unset;
background: #ffffff;
border-radius: 1.5px;
cursor: cell;
transition: background 2s;
transition-delay: 15s;
}
.button:active {
background: #555;
transition: 0.1s;
}
/*rainbow scratchpad vv*/
.col-matrix button:nth-child(5n + 1):active {
background: #e74c3c;
transition: 0.1s;
}
.col-matrix button:nth-child(5n + 2):active {
background: #f1c40f;
transition: 0.1s;
}
.col-matrix button:nth-child(5n + 3):active {
background: #2ecc71;
transition: 0.1s;
}
.col-matrix button:nth-child(5n + 4):active {
background: #3498db;
transition: 0.1s;
}
.col-matrix button:nth-child(5n + 5):active {
background: #9b59b6;
transition: 0.1s;
}