How would I create this image?

Motorola g pure

How would I add this:

div {
  width: 215px;
  height: 1px; /* adjust as needed */
  background: linear-gradient(to right, blue 0px, blue 79px, black 79px, black 136px, blue 136px, blue 215px);
}

to this?

.btn-wrap {
  position: relative;
  z-index: 0;
  padding: 0 0;
  margin: 20px 0 0;
  display: flex;
  align-items: center;
}

.btn-wrap:before,
.btn-wrap:after {
  content: "";
  flex: 1 0 0;
  height: 1px;
  background: #0059dd;
  transform: translatey(1px);
}

.btn-wrap:before {
  margin-right: 5px;
}

.btn-wrap:after {
  margin-left: 5px;
}

.playButtonB {
  position: relative;
  z-index: auto;
  margin: 0 auto;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: transparent;
  border-radius: 50%;
  border: 5px solid #0059dd;
  display: flex;
  cursor: pointer;
}

.playButtonB:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -11px;
  top: -11px;
  width: 57px;
  height: 30px;
  border: 1px solid #0059dd;
  border-bottom: transparent;
  border-radius: 30px 30px 0 0;
  pointer-events: none;
}

Does it look like that on the screen before (i.e. when its not disabled)?

Does it happen with this demo?

It looks like a rounding error with that device.

Maybe 29 should be used here instead of 30?

https://jsfiddle.net/zwrye5kc/1/

 height: 30px;
  border-radius: 30px 30px 0 0;

29

The 2nd one looks fine.

You’ll just have to try it and see.

These rounding errors sometimes have no rhyme or reason.

Here is what I see via mobile.

what i see

What does that tell you?

the bottom line on the 2nd one looks the same size as the arc.

But the circle is not in the middle.

Try 28.5 and see what happens?

I think the two elements are being rounded at different rates.

It may be that the button should not have absolute elements to it but designed in a different way.

1 Like

Here’s a method that doesn’t use absolute positioning for the half circle.

It does use rotate though which may make the half circle more anti-aliased than the previous versions.

1 Like

Why is mobile off by 2 px?

https://jsfiddle.net/zac7vm2g/

Most of the html is removed here: https://jsfiddle.net/9unbL48k/

Easier to test.

Desktop 10px
desktop

Mobile: 19px top 17px bottom.
1917

When I take a pic with my mobile it blows everything up.

720 x 1600

full

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
}

.blue-margin-bottom {
  margin-bottom: 16px;
  background: none;
}

.orange-margin {
  margin-left: 12px;
  margin-right: 12px;
  background: none;
}

.title-text {
  margin: 0;
  color: #0059dd;
  font-size: 20px;
  line-height: 1.5;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.yellow-padding-margin {
  margin-top: 4px;
  padding-left: 40px;
  padding-right: 40px;
  background: none;
}

.center-text {
  padding: 0;
  margin: 0;
  text-align: center;
  color: #0059dd;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: normal;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-style: normal;
  background: none;
}

.playbuttonB {
  position: relative;
  margin: 7px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: black;
  border-radius: 50%;
  border: 5px solid #0059dd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button:disabled {
  background-image: linear-gradient(135deg, #ff6bff 0%, #00e6e6 100%);
  cursor: not-allowed;
}

.my-footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  text-align: center;
  word-wrap: break-word;
  padding: 22px 8px 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 13.33px;
  line-height: 1.5;
  vertical-align: baseline;
  margin-top: auto;
}

.margin-top {
  margin-top: 10px;
}

.my-footer a {
  text-decoration: none;
}

.divider::before,
.divider::after {
  content: "";
  position: relative;
  top: 4px;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 13px;
  padding: 0;
  list-style: none;
}

.footer-top li {
  display: flex;
}

.footer-top a {
  color: #0059dd;
  font-weight: 700;
}

.my-footer .green-text {
  color: #38761d;
  font-weight: 400;
}

.orange-text {
  color: #b45f06;
  font-weight: 700;
}

.footer-mid {
  margin-bottom: 49px;
  color: #0059dd;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.footer-base {
  color: #0059dd;
  padding: 0;
}


<div class="containerC ">
			<div class="inner-container">
				<div class="flex">
					<div class="blue-margin-bottom">
						<svg width="136" height="136" viewBox="0 0 136 136">
							<rect x="0" y="0" width="136" height="136" fill="#0059dd" />
							<rect x="4" y="4" width="128" height="128" fill="black" />
							<rect x="8" y="8" width="120" height="120" fill="#0059dd" />
							<rect x="12" y="12" width="112" height="112" fill="black" />
							<rect x="16" y="16" width="104" height="104" fill="#0059dd" />
							<rect x="20" y="20" width="96" height="96" fill="black" />
							<rect x="24" y="24" width="88" height="88" fill="#0059dd" />
							<rect x="28" y="28" width="80" height="80" fill="black" />
							<rect x="32" y="32" width="72" height="72" fill="#0059dd" />
							<rect x="36" y="36" width="64" height="64" fill="black" />
							<rect x="40" y="40" width="56" height="56" fill="#0059dd" />
							<rect x="44" y="44" width="48" height="48" fill="black" />
							<rect x="48" y="48" width="40" height="40" fill="#0059dd" />
							<rect x="52" y="52" width="32" height="32" fill="black" />
							<rect x="56" y="56" width="24" height="24" fill="#0059dd" />
							<rect x="60" y="60" width="16" height="16" fill="black" />
							<rect x="64" y="64" width="8" height="8" fill="#0059dd" />
						</svg>
					</div>
					<div class="orange-margin">
						<h1 class="title-text">text</h1>
					</div>
					<div class="yellow-padding-margin">
						<h2 class="center-text">[ Enjoy The Music ]</h2>
					</div>
				</div>
				<button data-destination="#ba" class="playbuttonB" type="button" title="Open" aria-label="Open"></button>
				<div id="ba" class="modalB">
					<div class="inner-modalB">
						<div class="ratio-keeper">
							<div class="video buttonA"></div>
							<div class="buttonA"></div>
							<div class="curtain curtainB">
								<div class="flex-container">
									<div class="heart">
										<div class="heart-piece-0 heartB"></div>
										<div class="heart-piece-1 heartB"></div>
										<div class="heart-piece-2 heartB"></div>
										<div class="heart-piece-3 heartB"></div>
										<div class="heart-piece-4 heartB"></div>
										<div class="heart-piece-5 heartB"></div>
										<div class="heart-piece-6 heartB"></div>
										<div class="heart-piece-7 heartB"></div>
										<div class="heart-piece-8 heartB"></div>
									</div>
								</div>
							</div>
						</div>
						<button class="closeB" type="button" title="Close" aria-label="Close">&times</button>
					</div>
				</div>
				<footer class="margin-top my-footer">
            <ul class="footer-top">
              <li><a href="#" target="_blank">text</a></li>
              <li class="divider"><a href="#" target="_blank">text</a></li>
              <li><a href="#" target="_blank"><span class="green-text">text</span><span class="orange-text">text</span></a></li>
            </ul>
            <div class="footer-mid">text</div>
            <div class="footer-base">text</div>
        
				</footer>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="script.js"></script>
</body>

</html>

You can’t measure anything from the bottom of a glyph lie a y or j. All fonts are different and the half leading is down to the font construction itself and the height of glpyhs will vary between system.

How much so you think your measurement would be out if there wasn’t a ‘j’ or a ‘y’ in that sentence?

Add a background color to that ‘Enjoy the music’ text to see where the element actually starts and finishes and measure from the true finish of that elements box.

jsfiddle.net_9unbL48k_

It willbe7px on top of the circle and 10px on bottom of the circle to the line.

I was referring to the bottom, not the top though.

Is this accurate via mobile:

.margin-top {
  margin-top: 10px;
}

6px desktop would be equivalent to

14px mobile?

screen size of the image from phone:

720 x 1600

when you take a picture of your screen, why is it made bigger than the actual size of the phone screen?

Motorola Moto g Pure, 32GB, 6.5 Inches Screen Size,

when these images come downloaded at 720 x 1600

6px desktop would be equivalent to

14px mobile?

How does the math get worked out for that?

if the margin is: 14px mobile

that means on my actual phone screen size, that would be the same as 6px?

But, how is that figured out?

That depends of the density of your device.

My iphone SE is 375px css pixels but its resolution is 750px and screenshots will come out at 750px wide. Each css pixel is mapped into 2 device pixels but when you take a screenshot you get 750px wide photo.

As least that’s how I understand it :slight_smile:

Yes that will be 10px css pixels on mobile. A screenshot is not a mobile view and so will be whatever the density of your device is. On a screenshot on my device that would equal 20px.

1 Like

On mine it is 27px

From Bing AI:

The Motorola G Pure has a screen resolution of 1600 x 720 pixels and a pixel density of 270 PPI (Pixels Per Inch).

However, the Device Pixel Ratio (DPR) isn’t determined solely by these values. DPR is the ratio of physical pixels to CSS pixels. Without knowing the CSS pixel resolution, it’s difficult to calculate the exact DPR.

That said, most smartphones have a DPR between 2 and 3. This means that each CSS pixel is represented by 2 to 3 physical pixels on the device’s screen. This ratio ensures that content is displayed crisply and at the correct size, regardless of the device’s physical screen resolution.

That makes sense then with a pixel density of 270 PPI you are getting 2.7 x 10 = 27px screenshot

1 Like

How do you explain this: https://jsfiddle.net/xyvzagju/1/

13px top
17px bottom.

10px is given to both:

       <div class="wrapper">
         <div class="vertical-lineA"></div>
       </div>
       <button data-destination="#ba" class="playbuttonB" type="button" title="Open" aria-label="Open"></button>
       <div class="wrapper">
         <div class="vertical-lineB"></div>
       </div>

oh, it says 7 there.

.wrapper {
  display: flex;
  justify-content: center;
}

.vertical-lineA {
  position: relative;
  border-left: 10px solid red;
  /* Adjust the color as needed */
  height: 7px;
  /* Adjust the height as needed */


}

.vertical-lineB {
  position: relative;
  border-left: 10px solid red;
  /* Adjust the color as needed */
  height: 10px;
  /* Adjust the height as needed */
}

1317

How do you explain this?

17px top
18px bottom.

10px is given to both:

https://jsfiddle.net/n6eyadqx/

1718

.vertical-lineA {
  position: relative;
  border-left: 10px solid red;
  /* Adjust the color as needed */
  height: 10px;
  /* Adjust the height as needed */
}

.vertical-lineB {
  position: relative;
  border-left: 10px solid red;
  /* Adjust the color as needed */
  height: 10px;
  /* Adjust the height as needed */
}

Desktop is 10 px top and bottom:

desktop12

Are you noticing this also?

Where the bottom would be 17 or the top should be 18.

17px top
18px bottom.

Where height is set to 10px on both.

.vertical-lineA {
  position: relative;
  border-left: 10px solid red;
  height: 10px;
}

.vertical-lineB {
  position: relative;
  border-left: 10px solid red;
  height: 10px;
}

Do you have a stand alone version anywhere as jsfiddle doesn’t fit on my phone screen (unlike codepen). JSfiddle is badly designed for mobile.

The mile version image is from codepen.

https://jsfiddle.net/xyvzagju/1/

You can paste the code from that into there.

Here is the non JavaScript version: https://jsfiddle.net/3y6fgrks/1/