I am trying to make it see-through. https://jsfiddle.net/jrf8pm46/
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
I’ma be honest, I looked at that background-image and… immediately decided to call on a CSS professional, because i can’t read it without going crosseyed.
I’m not sure what you want but if you want some transparency then don’t use a solid color!
rgba(17, 85, 204, 0.5)
Use rgba() or one of the newer transparent methods.
https://www.w3.org/TR/css-color-3/#rgba-color
I’m not sure if that was what you were asking though.
It should be:
Blue
transparent
blue
transparent
In this image:
I can’t figure out how to do that in the code.
That’s not the same question?
Post the code for just that blue image.
(along with an answer for “why not just use an SVG. Or a PNG, for that matter, if you’re fixing the size.”)
I don’t think you can do that because those aren’t borders as such. Think of them as solid squares getting smaller and smaller and you overlay a solid color on each.
It would be simpler to do it with an svg as mentioned above and then the transparent bits will show through
Roughly like this:
The svg can be drawn like this:
<svg width="165" height="165" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="155" height="155" style="fill:#0000;stroke-width:5;stroke:red" />
<rect x="15" y="15" width="135" height="135" style="fill:#0000;stroke-width:5;stroke:blue" />
<rect x="25" y="25" width="115" height="115" style="fill:#0000;stroke-width:5;stroke:red" />
<rect x="35" y="35" width="95" height="95" style="fill:#0000;stroke-width:5;stroke:blue" />
<rect x="45" y="45" width="75" height="75" style="fill:#0000;stroke-width:5;stroke:red" />
<rect x="55" y="55" width="55" height="55" style="fill:#0000;stroke-width:5;stroke:blue" />
<rect x="65" y="65" width="35" height="35" style="fill:#0000;stroke-width:5;stroke:red" />
<rect x="75" y="75" width="15" height="15" style="fill:#0000;stroke-width:5;stroke:blue" />
</svg>
To convert into a background data uri you can just paste in here:
https://yoksel.github.io/url-encoder/
The benefit of svg is that you can scale them nicely quite easily.
It can’t be done using a gradient?
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
background-size: 165px 165px;
}
I don’t think its possible but why would you bother when the svg version is more readable and half the code? As I said the method you are using is basically solid colour squares stacked on top of each other just rubbing the colour out each time.
You could probably build that design for one square only using multiple background-positions and background-sizes but is a lot of work and can’t be repeated.
Here’s the first few horizontal lines as a guide.
You’d need to follow that through for every line to fill the square and then do exactly the same but at 90 degrees. However you end up with one only non repeatable square.
As I said why would you want to do that when the svg is so easy.
Can this be converted to css background image?
Will transparent work with this?
https://jsfiddle.net/L6fvonrq/2/
svg {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
<svg width='165' height='165' viewBox='0 0 165 165'>
<rect x='0' y='0' width='165' height='165' fill="var(--color-a)" />
<rect x='5' y='5' width='160' height='160' fill="var(--color-b)" />
<rect x='10' y='10' width='150' height='150' fill="var(--color-c)" />
<rect x='15' y='15' width='140' height='140' fill="var(--color-d)" />
<rect x='20' y='20' width='130' height='130' fill="var(--color-a)" />
<rect x='25' y='25' width='120' height='120' fill="var(--color-b)" />
<rect x='30' y='30' width='110' height='110' fill="var(--color-c)" />
<rect x='35' y='35' width='100' height='100' fill="var(--color-d)" />
<rect x='40' y='40' width='90' height='90' fill="var(--color-a)" />
<rect x='45' y='45' width='80' height='80' fill="var(--color-b)" />
<rect x='50' y='50' width='70' height='70' fill="var(--color-c)" />
<rect x='55' y='55' width='60' height='60' fill="var(--color-d)" />
<rect x='60' y='60' width='50' height='50' fill="var(--color-a)" />
<rect x='65' y='65' width='40' height='40' fill="var(--color-b)" />
<rect x='70' y='70' width='30' height='30' fill="var(--color-c)" />
<rect x='75' y='75' width='20' height='20' fill="var(--color-d)" />
<rect x='80' y='80' width='10' height='10' fill="var(--color-a)" />
</svg>
If b and d will always be transparent, why put them in at all?
well for starters your width and heights are wrong here? Unless you’re trying to build it slightly off down in the bottom right?
<svg width='165' height='165' viewBox='0 0 165 165'>
<path d="M0 0 h165 v165 h-165 v-165 M5 5 v155 h155 v-155 h-155 M20 20 h125 v125 h-125 v-125 M25 25 v115 h115 v-115 h-115 M40 40 h85 v85 h-85 v-85 M45 45 v75 h75 v-75 h-75 M60 60 h45 v45 h-45 v-45 M65 65 v35 h35 v-35 h-35 M80 80 h5 v5 h-5 v-5" fill="var(--color-a)"/>
<path d="M5 5 h155 v155 h-155 v-155 M10 10 v145 h145 v-145 h-145 M25 25 h115 v115 h-115 v-115 M30 30 v105 h105 v-105 h-105 M45 45 h75 v75 h-75 v-75 M50 50 v65 h65 v-65 h-65 M65 65 h35 v35 h-35 v-35 M70 70 v25 h25 v-25 h-25" fill="var(--color-b)"/>
<path d="M10 10 h145 v145 h-145 v-145 M15 15 v135 h135 v-135 h-135 M30 30 h105 v105 h-105 v-105 M35 35 v95 h95 v-95 h-95 M50 50 h65 v65 h-65 v-65 M55 55 v55 h55 v-55 h-55 M70 70 h25 v25 h-25 v-25 M75 75 v15 h15 v-15 h-15" fill="var(--color-c)"/>
<path d="M15 15 h135 v135 h-135 v-135 M20 20 v125 h125 v-125 h-125 M35 35 h95 v95 h-95 v-95 M40 40 v85 h85 v-85 h-85 M55 55 h55 v55 h-55 v-55 M60 60 v45 h45 v-45 h-45 M75 75 h15 v15 h-15 v-15 M80 80 v5 h5 v-5 h-5" fill="var(--color-d)"/>
</svg>
Hint: Give that pen a try, and replace some of the colors, especially with transparencies. See what happens.
How would I convert this to transparent then set as a repeated background image?
https://jsfiddle.net/qnefhdr0/4/
svg {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
<svg width='165' height='165' viewBox='0 0 165 165'>
<path d="M0 0h165v165H0z" fill="var(--color-a)" />
<path d="M5 5h160v160H5z" fill="var(--color-b)" />
<path d="M10 10h150v150H10z" fill="var(--color-c)" />
<path d="M15 15h140v140H15z" fill="var(--color-d)" />
<path d="M20 20h130v130H20z" fill="var(--color-a)" />
<path d="M25 25h120v120H25z" fill="var(--color-b)" />
<path d="M30 30h110v110H30z" fill="var(--color-c)" />
<path d="M35 35h100v100H35z" fill="var(--color-d)" />
<path d="M40 40h90v90H40z" fill="var(--color-a)" />
<path d="M45 45h80v80H45z" fill="var(--color-b)" />
<path d="M50 50h70v70H50z" fill="var(--color-c)" />
<path d="M55 55h60v60H55z" fill="var(--color-d)" />
<path d="M60 60h50v50H60z" fill="var(--color-a)" />
<path d="M65 65h40v40H65z" fill="var(--color-b)" />
<path d="M70 70h30v30H70z" fill="var(--color-c)" />
<path d="M75 75h20v20H75z" fill="var(--color-d)" />
<path d="M80 80h10v10H80z" fill="var(--color-a)" />
</svg>
Can this be turned into a repeated background image using javascript, or any other method/way?
https://jsfiddle.net/hdf2y8j7/
.box7 {
width: 165px;
height: 165px;
margin: 5px 5px 0 0;
}
.color1 {
border-top: 5px solid teal;
border-left: 5px solid teal;
}
.color2 {
border: 5px solid black;
}
.color3 {
border: 5px solid orange;
}
.color4 {
border: 5px solid black;
}
.color5 {
border: 5px solid teal;
}
.color6 {
border: 5px solid black;
}
.color7 {
border: 5px solid orange;
}
.color8 {
border: 5px solid black;
}
.color9 {
border: 5px solid teal;
}
.color10 {
border: 5px solid black;
}
.color11 {
border: 5px solid orange;
}
.color12 {
border: 5px solid black;
}
.color13 {
border: 5px solid teal;
}
.color14 {
border: 5px solid black;
}
.color15 {
border: 5px solid orange;
}
.color16 {
border: 5px solid black;
}
.color17 {
border: 5px solid teal;
}
<div class="box7">
<div class="color1">
<div class="color2">
<div class="color3">
<div class="color4">
<div class="color5">
<div class="color6">
<div class="color7">
<div class="color8">
<div class="color9">
<div class="color10">
<div class="color11">
<div class="color12">
<div class="color13">
<div class="color14">
<div class="color15">
<div class="color16">
<div class="color17">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
From AI:
I was able to do this if this accomplished anything: https://jsfiddle.net/qnefhdr0/11/
<script>
// Define the CSS classes
const classes = [
'box7', 'color1', 'color2', 'color3', 'color4', 'color5', 'color6', 'color7',
'color8', 'color9', 'color10', 'color11', 'color12', 'color13', 'color14',
'color15', 'color16', 'color17'
];
// Create the outermost div
let outerDiv = document.createElement('div');
outerDiv.className = classes[0];
// Create the nested divs
let currentDiv = outerDiv;
for (let i = 1; i < classes.length; i++) {
let newDiv = document.createElement('div');
newDiv.className = classes[i];
currentDiv.appendChild(newDiv);
currentDiv = newDiv;
}
// Append the outermost div to the body
document.body.appendChild(outerDiv);
</script>
2nd Attempt: https://jsfiddle.net/qnefhdr0/15/
<script>
// Define the CSS classes
const classes = [
'box7', 'color1', 'color2', 'color3', 'color4', 'color5', 'color6', 'color7',
'color8', 'color9', 'color10', 'color11', 'color12', 'color13', 'color14',
'color15', 'color16', 'color17'
];
// Function to create a single structure
function createStructure() {
// Create the outermost div
let outerDiv = document.createElement('div');
outerDiv.className = classes[0];
// Create the nested divs
let currentDiv = outerDiv;
for (let i = 1; i < classes.length; i++) {
let newDiv = document.createElement('div');
newDiv.className = classes[i];
currentDiv.appendChild(newDiv);
currentDiv = newDiv;
}
return outerDiv;
}
// Calculate the number of structures that can fit in the viewport
const boxSize = 165; // The size of the box in pixels
const structuresPerRow = Math.floor(window.innerWidth / boxSize);
const structuresPerColumn = Math.floor(window.innerHeight / boxSize);
const totalStructures = structuresPerRow * structuresPerColumn;
// Create the structures and append them to the body
for (let i = 0; i < totalStructures; i++) {
document.body.appendChild(createStructure());
}
</script>
This script calculates the number of structures that can fit in the viewport based on the size of the box and the size of the viewport, and creates that many structures. Please note that this will only fill the initial viewport, and if the user scrolls, they will see blank space. If you want to fill the entire page even when the user scrolls, you would need a more complex solution that listens for scroll events and adds more structures as needed.
Remember, this is a simplified example and actual implementation might require more complex solutions depending on the exact requirements and the environment in which you are working. If you’re working in a complex application or need more advanced features, you might want to look into libraries or services that can help with this.
Third Attempt: https://jsfiddle.net/qnefhdr0/19/
<script>
// Define the CSS classes
const classes = [
'box7', 'color1', 'color2', 'color3', 'color4', 'color5', 'color6', 'color7',
'color8', 'color9', 'color10', 'color11', 'color12', 'color13', 'color14',
'color15', 'color16', 'color17'
];
// Function to create a single structure
function createStructure() {
// Create the outermost div
let outerDiv = document.createElement('div');
outerDiv.className = classes[0];
// Create the nested divs
let currentDiv = outerDiv;
for (let i = 1; i < classes.length; i++) {
let newDiv = document.createElement('div');
newDiv.className = classes[i];
currentDiv.appendChild(newDiv);
currentDiv = newDiv;
}
return outerDiv;
}
// Function to add structures to the body
function addStructures() {
// Calculate the number of structures that can fit in the viewport
const boxSize = 165; // The size of the box in pixels
const structuresPerRow = Math.floor(window.innerWidth / boxSize);
const structuresPerColumn = Math.floor(window.innerHeight / boxSize);
const totalStructures = structuresPerRow * structuresPerColumn;
// Create the structures and append them to the body
for (let i = 0; i < totalStructures; i++) {
document.body.appendChild(createStructure());
}
}
// Add structures when the page loads
addStructures();
// Add more structures when the user scrolls near the bottom of the page
window.addEventListener('scroll', function() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
addStructures();
}
});
</script>
In this script, the addStructures function is called when the page loads and also when the user scrolls near the bottom of the page. This gives the appearance of an infinite number of structures. The number 500 in the scroll event listener is the distance from the bottom of the page in pixels at which more structures will be added. You can adjust this number as needed.
Removing bottom scroll and filling viewport?
How do I do that?
Boxes to continue horizontally and vertically without wrapping and fill the entire viewport.
https://jsfiddle.net/7z948o0v/1/
html,
body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-wrap: nowrap;
overflow: visible;
}
.box7 {
width: 165px;
height: 165px;
margin: 0 0 0 0;
display: inline-block;
}
An SVG can be put into a dataURI:
background-image: url('data:image/svg+xml,<svg here>')
I want to be able to do this:
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black
js is most likely not the best way.
I… dont know what you’re trying to do at this point. We’ve shown you a SVG way of doing what you want, two different ways. Paul’s shown you how to tile it. I dont know where this mess of divs is coming from or where it’s going. I’d suggest not doing that.
I want to be able to set custom color properties that include transparent.
And we’ve shown you that you can do that. What next?