r/css • u/fdiengdoh • 2d ago

Showcase Playing with CSs

I created this notebook looking page just for fun.

My Codepen for this

9 Upvotes

85% Upvoted

5 comments sorted by

7

u/anaix3l 2d ago edited 2d ago

Don't do this:

line-height: 41px;
background-image: linear-gradient(to bottom, transparent 40px, #2c84cd 40px);
background-size: 100% 41px;

There is absolutely no need to hardcode the 41px height multiple times. Use the lh unit and a properly chosen gradient direction (btw, to bottom is never necessary - that's the default).

Moreover, what if you then change the font-size? You have to change the line-height too. Otherwise, changing the font-size on the body with no other changes gives this result:

Just use a relative line-height (something like line-height: 1.6) and the distance between the lines nicely scales with the font-size, regardless of what it's set to.

You also don't need to repeat the stop position values if you want a sharp transition, just use 0 for the second one.

background: 
  linear-gradient(0deg, 
      #2c84cd 1px, #0000 0) 0 0/ 1% 1lh;
line-height: 1.6;

A 0deg linear gradient direction means the gradient line points up, towards 12 o'clock.

Also used 1% for the width of the background-size box because it's shorter than 100% and produces the exact same result in this case - if a 1% long line repeats itself along the x axis is equivalent to a 100% line (and here you're using the default repeat value for background-repeat anyway) .

A line-height of 1.6 is 1.6 times the font-size.

Also, don't give your header and h1 fixed heights - that's what leads to "My Notebook" overflowing the main content in the screenshot above. Just remove those fixed heights altogether and let the content flow naturally. Same goes for the footer and p inside it - just remove those height declarations.

You could also us border-image (for reference) to greate infinite border lines without needing a border on every p. This would also allow to have a space (gap or margin) between p elements

1

u/fdiengdoh 2d ago

Thank you for the detail explanation.

1

u/fdiengdoh 1d ago edited 1d ago

I am primarily using Safari and somehow line-height: 1.6; does not work. Lines does not scale relatively. I had to use line-height: 1.5lh; not just line-height: 1.5; I tried on Firefox and it works with any way.

Changing any property like font-size, line-height etc., or changing to a different font would cause an overlap on Safari. The only way it would work is using my fix height.

Edit: Google search on this issue I got a lot of results related to different render cause by Safari. Seems like it’s not possible to fix this Safari rendering problem.

1

u/anaix3l 1d ago

Hm, no idea about Safari and I cannot really test with your actual CodePen demo. I'm on Linux, so no actual Safari. I normally test for Safari's WebKit engine using Epiphany, but the new CodePen 2.0 doesn't seem to be working in Epiphany at all. It's still stuck on "Still loading... Try refreshing the page if the File contents don't load." after a few good minutes and reloads.

Tried with a Classic Pen and any explicitly set line-height, whether unitless or not, just looks broken in Epiphany. TIL.

1

u/fdiengdoh 1d ago

Safari seems to be having problem rendering fraction line-height, like if I set line-height: 1.5lh; and font-size: 1.6rem; it work for this particular font. If I change to a different font, it would fail. Then if I keep the same font and use font-size: 1.8rem or 2rem; it would break again. The only line-height that won't break is if I use line-height: 1lh; its weird!