CODEWITHSUNDEEP
htmlcss
ZiiMakc
ZiiMakc

Reputation: 36856

Totally same linear-gradient lines looks different

Why is it like this? enter image description here

Codepen example: https://codepen.io/bofemptiness/pen/PxGePa?page=1&

The problem is more about why same lines are different, not a scale.

css:

.hr{
  width: 100%;
  margin:10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 65%), rgba(0, 0, 0, 0));
  border: 0;
  height: 1px;
  padding: 0;
  font-size: 16px;
   display: inline-block;
 }

If I make height: 0.8px; with normal PC scale 100% some lines will just disappear..

P.S. Laptops is scaled 125% by default: enter image description here

Upvotes: 0

Views: 65

Answers (1)

Codo
Codo

Reputation: 78845

On my machine (MacBook with Retina display) it looks ok as long as I have set the browser's scaling to 100%. The Retina scaling is 200%. Therefore, the lines will be exactly 2 physical pixels high and exactly fit on them.

When I modify the browser scaling, I get similar results like you. No the lines are 1.8 pixels high (at 90% scaling), 37.8 pixels apart and no longer fit on the grid of the physical pixels.

So what you're seeing is an aliasing effect that's difficult to avoid when you're close to the screens resolution. You'll have to find a different design, e.g. use wider lines and a lighter color.

Upvotes: 1

Related Questions