<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 5px;
display: grid;
grid-column-gap: 5px;
grid-row-gap: 60px;
grid-template-columns: repeat(auto-fill, minmax(calc((100vw - 140px) / 7), 1fr));
}
div {
height: 0;
padding-top: 100%;
background-color: #000;
position: relative;
&::after {
content: 'background-color:#000';
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: calc(100% + 10px);
font-size: 14px;
color: #000;
}
&:nth-child(2) {
filter: invert(60%);
&::after {
content: 'filter: invert(60%)'
}
}
&:nth-child(3) {
filter: invert(60%) sepia(93%);
&::after {
content:'filter: invert(60%) sepia(93%)';
}
}
&:nth-child(4) {
filter: invert(60%) sepia(93%) saturate(6477%);
&::after {
content: 'filter: invert(60%) sepia(93%) saturate(6477%)';
}
}
&:nth-child(5) {
filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg);
&::after {
content: 'filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) ';
}
}
&:nth-child(6) {
filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%);
&::after {
content: 'filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%) ';
}
}
&:nth-child(7) {
filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%) contrast(101%);
&::after {
content: 'filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%) contrast(101%);'
}
}
&:nth-child(8) {
background-color: #f36;
&::after {
content: 'background-color: #f36;'
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.