Why does one translate differently from the other?

HTML & CSS
21

I’m not the one who made the original code, I just found it and started tinkering with it.

22

Does that matter?

We never know who wrote the code that you ask about. :wink:

3 Likes
23

How come css uses box sizing and the html one doesn’t?

24

I have a question.

Is there a way to make the black part transparent?

And then put a picture behind it.

25

Using this as an example where you put a picture behind a linear gradient that uses transparency.

Can you do that with the Box with the X?

26

I would use this right?
rgba(225, 225, 225, 0.0);

27

Am I doing something wrong?



<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(0,255,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), 
    linear-gradient(to top right, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(255,230,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), url(\'http://via.placeholder.com/260x260\');">
</div>
28

Got it!!!

<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(0,255,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), 
    linear-gradient(to top right, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(255,230,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), url('http://via.placeholder.com/260x260');">
</div>
1 Like
29

The box-sizing CSS at the top of the page acts on both HTML elements, the <div> with the inline CSS and the <div class="crossed">

30

Good for you!

1 Like
31

How would I remove calc, and only use percentage here?

image {
  transform: translate(calc(50% - 90px), calc(50% - 90px));
}

calc(50% - 3px),

converts to this:

49.25%,

so

50% - 90px

would convert to?

How do you do the math on this so I know how to do this on my own?

Can someone show me?

32 
I think I'll use this instead.
transform: translate(50px, 50px);

But you can still show me the math for future reference.

33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.