How do you figure that out?
I had to do a lot of guessing.
I’ll think you find that will be incorrect as that will make the square a fraction and not whole integers.
The easiest way is to open devtools and then adjust the width in the css panel using the up and down arrows and if the cursor is on the heart div the measurements are shown on the screen. You can easily see when its a perfect fit.
These are the numbers that would allow even padding/borders on each side to add up nicely. The last column is the width to use.
- 20 → 9 x 20 + 32 = 212
- 22 → 9 x 22 + 32 = 230
- 24 → 9 x 24 + 32 = 248
- 26 → 9 x 26 + 32 = 266
- 28 → 9 x 28 + 32 = 284
- 30 → 9 x 30 + 32 = 302
- 32 → 9 x 32 + 32 = 320
- 34 → 9 x 34 + 32 = 338
- 36 → 9 x 36 + 32 = 356
- 38 → 9 x 38 + 32 = 374
- 40 → 9 x 40 + 32 = 392
- 42 → 9 x 42 + 32 = 410
- 44 → 9 x 44 + 32 = 428
- 46 → 9 x 46 + 32 = 446
- 48 → 9 x 48 + 32 = 464
- 50 → 9 x 50 + 32 = 482
- 52 → 9 x 52 + 32 = 500
- 54 → 9 x 54 + 32 = 518
- 56 → 9 x 56 + 32 = 536
- 58 → 9 x 58 + 32 = 554
- 60 → 9 x 60 + 32 = 572
- 62 → 9 x 62 + 32 = 590
- 64 → 9 x 64 + 32 = 608
- 66 → 9 x 66 + 32 = 626
- 68 → 9 x 68 + 32 = 644
- 70 → 9 x 70 + 32 = 662
- 72 → 9 x 72 + 32 = 680
- 74 → 9 x 74 + 32 = 698
- 76 → 9 x 76 + 32 = 716
- 78 → 9 x 78 + 32 = 734
- 80 → 9 x 80 + 32 = 752
- 82 → 9 x 82 + 32 = 770
- 84 → 9 x 84 + 32 = 788
- 86 → 9 x 86 + 32 = 806
- 88 → 9 x 88 + 32 = 824
- 90 → 9 x 90 + 32 = 842
- 92 → 9 x 92 + 32 = 860
- 94 → 9 x 94 + 32 = 878
- 96 → 9 x 96 + 32 = 896
- 98 → 9 x 98 + 32 = 914
- 100 → 9 x 100 + 32 = 932
- 102 → 9 x 102 + 32 = 950
- 104 → 9 x 104 + 32 = 968
- 106 → 9 x 106 + 32 = 986
- 108 → 9 x 108 + 32 = 1004
- 110 → 9 x 110 + 32 = 1022
- 112 → 9 x 112 + 32 = 1040
- 114 → 9 x 114 + 32 = 1058
- 116 → 9 x 116 + 32 = 1076
- 118 → 9 x 118 + 32 = 1094
- 120 → 9 x 120 + 32 = 1112
3 Likes
AI helped with this:
Corresponding font sizes:
Based off the default one:
302: 28px
212: ~19px
230: ~21px
248: ~23px
266: ~25px
284: ~26px
302: 28px
320: ~30px
338: ~31px
356: ~33px
374: ~35px
392: ~36px
410: ~38px
428: ~39px
446: ~41px
464: ~43px
482: ~44px
500: ~46px
518: ~48px
536: ~49px
554: ~51px
572: ~53px
590: ~54px
608: ~56px
626: ~58px
644: ~59px
662: ~61px
680: ~63px
698: ~64 px
716 :~66 px
734 :~68 px
752 :~70 px
770 :~71 px
788 :~73 px
806 :~75 px
824 :~76 px
842 :~78 px
860 :~80 px
878 :~81 px
896 :~83 px
914 :~85 px
932 :~86 px
950 :~88 px
968 :~90 px
986 :~91 px
1004 :~93 px
1022 :~95 px
1040 :~96 px
1058 :~98 px
1076 :~100 px
1094 :~101 px
1112 :~103 px
or with decimals:
| Width | Font Size (px) |
|---|---|
| 212 | 19.65 |
| 230 | 21.32 |
| 248 | 22.99 |
| 266 | 24.66 |
| 284 | 26.33 |
| 302 | 28.00 |
| 320 | 29.67 |
| 338 | 31.34 |
| 356 | 33.01 |
| 374 | 34.68 |
| 392 | 36.35 |
| 410 | 38.02 |
| 428 | 39.69 |
| 446 | 41.36 |
| 464 | 43.03 |
| 482 | 44.70 |
| 500 | 46.37 |
| 518 | 48.04 |
| 536 | 49.71 |
| 554 | 51.38 |
| 572 | 53.05 |
| 590 | 54.72 |
| 608 | 56.39 |
| 626 | 58.06 |
| 644 | 59.73 |
| 662 | 61.40 |
| 680 | 63.07 |
| 698 | 64.74 |
| 716 | 66.41 |
| 734 | 68.08 |
| 752 | 69.75 |
| 770 | 71.42 |
| 788 | 73.09 |
| 806 | 74.76 |
| 824 | 76.43 |
| 842 | 78.10 |
| 860 | 79.77 |
| 878 | 81.44 |
| 896 | 83.11 |
| 914 | 84.78 |
| 932 | 86.45 |
| 950 | 88.12 |
| 968 | 89.79 |
| 986 | 91.46 |
| 1004 | 93.13 |
| 1022 | 94.80 |
| 1040 | 96.47 |
| 1058 | 98.14 |
| 1076 | 99.81 |
| 1094 | 101.48 |
| 1112 | 103.15 |
No that’s wrong.
At 302px the square will be 30 x 30 as I already told you. It will not be 28 x 28. No one mentioned font-size anyway so I have no idea what those numbers refer to.
I have given you all the exact numbers you need based on your previous criteria.
1 Like
I’m referring to the font size.
The font size I have set at 302 width is 28px.
The font I have set for this is 28px.
AI was able to fill in the font sizes to go with all the other width sizes.
margin: auto;
width: 302px;
background: black;
color: white;
gap:4px;
border: 66px solid #000;
border-right-width: 49px;
border-left-width: 49px;
A post was split to a new topic: How to create curved text
1st question:
Why is the text not centered?
How do I fix that?
Centered:
not centered:
2nd Question:
I’m supposed to delete this then?
.shape2>*:not(:empty) {
background: var(--highlight-color)
}
The O, T, R background should be Green.
Because you used a silly value for the line-height that makes no sense.
p {
margin: 0;
line-height: 1px;
etc...
}
Use a value of 1 with no units to make it behave with the font-size.
p {
margin: 0;
line-height: 1;
}
Is that a question or a statement?
If you are not using it then remove it. (It was used in one of the examples to color any square that didn’t have text in it.)
1 Like
How do I place the text on top of the background?
.shape:before, .shape:after {
width: 100%;
height: 100%;
border-radius: 5px;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
display: block;
opacity: 0.3;
z-index: 1;
}
.shape:before {
background: repeating-linear-gradient(45deg, #000 2px, transparent 7px);
}
.shape:after {
background: repeating-linear-gradient(-45deg, #000 2px, transparent 7px);
}
Set position: relative and z-index: 2 on the p elements. That will raise the coloured squares and the text above the background.
However if you only wanted the text higher and not the coloured square you would need to add an inner element like a span to each letter and then apply the css I gave you above to them.
Like this?
<p class="edge"><span>E</span></p>
Then what do I do in the css?
span p {
position: relative;
z-index: 2;
}
Assuming you are not going to use spans for anything else then you can just do this:
span{position:relative;z-index:2;}
If you are using spans elsewhere then use a class on the span.
e.g.
<p class="edge"><span class="letter">E</span></p>
.letter{position:relative; z-index:2;}
1 Like
Create a stacking context for the black rather than the viewport.
e.g.
.back{position:relative;}
You know this you have done it lots of times.
I got it:
.shape3{position:relative;}
.shape3:before, .shape3:after {
width: 400px;
height: 400px;
border-radius: 5px;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
display: block;
opacity: 0.3;
z-index: 1;
}
.shape3:before {
background: repeating-linear-gradient(45deg, #000 2px, transparent 7px);
}
.shape3:after {
background: repeating-linear-gradient(-45deg, #000 2px, transparent 7px);
}
1 Like
In this version, how come the background isn’t filling up the the entire black area?
p {
margin: 0;
line-height: 1px;
font-size: 28px;
color: #ed1c24;
font-family: "Roboto", sans-serif;
z-index: 2;
}
.shape {
display: flex;
flex-wrap: wrap;
background-color: var(--bg-color);
color: white;
margin: 1rem auto;
gap: 4px;
width: 302px;
}
.shape{position:relative;}
.shape:before, .shape:after {
width: 100%;
height: 100%;
border-radius: 5px;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
display: block;
opacity: 0.3;
z-index: 1;
}
.shape:before {
background: repeating-linear-gradient(45deg, red 2px, transparent 7px);
}
.shape:after {
background: repeating-linear-gradient(-45deg, red 2px, transparent 7px);
}
This fixes it:
Am I supposed to do this?
.shape:before, .shape:after {
width: 400px;
height: 400px;
border-radius: 5px;
content: "";
position: absolute;
top: 0;
left: -50px;
bottom: 0;
margin: auto;
display: block;
opacity: 0.3;
z-index: 1;
}
Because the black background is on .wrap2 an not on .shape.
You need the stacking context on the element that holds the background.
.wrap2{position:relative;}
You will probably then need a z-index:2 on the pattern if you want it on top if the squares.
.shape:before, .shape:after {
width: 100%;
height: 100%;
border-radius: 5px;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
display: block;
opacity: 0.3;
z-index: 2;
}
2 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.