Editing an image in CSS

Here’s a revision of your code Ron, using borders on one pseudo::after :sunglasses:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test Page</title>
<style>
.wrap {
    display:table;
    width:500px;
    height:500px;
    background: #00B45A url(https://i.imgur.com/sC3tdOw.png);
    margin:0 auto;
}
.wrap::after {
    content:"";
    display:block;
    height:157px;
    margin-top:71px;
    border:100px solid #ccc;
    border-width:100px 0;
    opacity:.8;
}
</style>

</head>
<body>

<div class="wrap"></div>

</body>
</html>

Now Ron, you know we could do this with just the <body> element
if we really wanted to cheap out on code. :neutral_face:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test Page</title>
<style>
html {
    background:#fff;
}
body {
    display:table;
    width:500px;
    height:500px;
    background: #00B45A url(https://i.imgur.com/sC3tdOw.png);
    margin:10px auto;
}
body::after {
    content:"";
    display:block;
    height:157px;
    margin-top:71px;
    border:100px solid #ccc;
    border-width:100px 0;
    opacity:.8;
}
</style>

</head>
<body>

</body>
</html>
2 Likes

I love it, Rockin’ Ray.!!!.

I’m stuck on this.

How would I place this text:


.music {
  max-width: 968px;
  height: 157px;
  line-height: 1.4;
  font-weight: 900;
  font-style: normal;
  font-size: 129px;
  font-family: AR CARTER;
  text-align: center;
  margin: 0 auto;
  background-color: transparent;
  padding-top: 1px;
}
.hr3 {
  color: #96d5de;
}
.hr4 {
  color: #bca0da;
}
.hr5 {
  color: #96d5de;
}

<p class="music"> <span class="hr3">[</span> <span class="hr4">Text</span> <span class="hr5">]</span> </p>

Inside the 2 blocks:

So that when the blocks are moved, up or down, the text stays with it.

Give this a whirl asasass


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test Page</title>
<style>
.wrap {
  display: table;/*block format for .inner margin-top*/
  margin: 0 auto;
  width: 968px;
  height: 605px;
  background:#FF7C3A url(https://i.imgur.com/RpOuDNE.png);
  background-size: 968px 605px;
}
.inner {
  display:table;/*block format for "p" top margin*/
  width:100%;
  position: relative;
  margin-top: 50px; /*shift it all from here*/
  /*this margin shifts the entire block*/
  height: 357px;
}
.inner::after {
  content:"";
  position:absolute;
  top:0;
  width:100%;
  height:157px;
  border:100px solid #ccc;
  border-width:100px 0;
  /*opacity:.8; */
}
.inner p {
  position: relative;
  z-index:1;
  min-height:157px;
  margin:100px 0 0;
  font:900 8em/1.06em AR CARTER;
  text-align: center;
  color: #bca0da;
  /*background-color: transparent;*/
}
.inner p span {
  color: #96d5de;
  vertical-align:.1em;
}

</style>
</head>
<body>

<div class="wrap">
  <div class="inner">
    <p><span>[</span>Text<span>]</span></p>
  </div>
</div>

</body>
</html>

Update it with this text, so it’s positioned the same

This one the text is positioned in the middle of the black.

Both are positioned differently

This one the text is positioned in the middle of the black.

This one is position towards the top.

The black is 192 when it should be, 157px height.

Tell you what, Go back and study through the the code I posted above and try to learn something from it.

I had cleaned up all your <p> tag html & css,

Look closely at the changes I made on the .inner p and .inner p span
The html only uses 2 spans now and you can adjust to you liking by changing the values in the css.

Time for me to get some sleep now.

1 Like

It’s sticking outside the orange here:

Everything fits inside the black here:

How would I fit everything inside the orange space, like everything fits inside the black space?

Also:

My Text
[ TEXTT TTT TEXTT ]

Your Text:
[TEXTT TTT TEXTT]

Do you see the difference?

You need to realize a couple of things

Not everyone will have that font on their computer, I don’t

Here is what I see after you changed from [TEXT]

This is what people without that font will see. This is why we don’t set fixed heights on containers that hold text.

You can’t park a freight train in your garage and complain about it not fitting

4 Likes

Maybe someone who has that font will be able to better help me then.

How do I move the left and right bracket over 1 space?

[ TEXTT TTT TEXTT ]

Fixed:

What was the point of putting a color here?
#FF7C3A

I’m not entirely sure what purpose that serves at all.

Can you tell me why you put that there?

 background:#FF7C3A url(https://i.imgur.com/RpOuDNE.png);

Or maybe you could do as suggested, and take time to study the code, learn how it works and learn to adjust things to your own satisfaction. You can’t expect others to make every little change for you.

To add to what Ray said, it’s unlikely that others will have the font you have chosen. In the real world, you need to provide for that situation with a (common) fallback font, and ensure your code is flexible enough to accommodate it. Alternatively, you need to serve your fancy font as a web font, to make it available to all.

2 Likes

coothead

Then try deleting the rule and see what effect it has.

You can do this very simply by using developer tools. Just uncheck the relevant rule to see the effect of deleting it without altering the actual code. Use the checkbox again to reinstate the rule.

1 Like

At this point, I’ve no idea which of the fiddles I’m supposed to be looking at, and I’m not prepared to wade through them all to find out; life is just too short.

FIXED:

I removed
vertical-align:.1em;

We seem to have different ideas of what constitutes “fixed”, because this is what I see:

However, it’s your code and if that’s the way you want it to function, then so be it.

1 Like

I’ve got something similar

1 Like