After positioning is a technique used to strategically place elements on

Question

After positioning is a technique used to strategically place elements on

During the hours of 11:30 to 16:00, I tuned in to a video on frontend development. This period of time led me to explore different design elements and coding techniques.

    <div class="title-wrapper">
        <h2 class="title title--purple"><span>Live Auctions</span></h2>
    </div>

    .title {
        font-family: 'Oxanium',
        font-weight: 700;
        font-size: 64px;
        line-height: 130px;
        color: #F5FBF2;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%) translateX(-40%);
          background: #8613A5;
          width: 110px;
          height: 110px;
          border-radius: 50%;           
        }

        span {
          text-align: center;
          position: relative;
          z-index: 2;   
        }
    }

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

This exploration resulted in an image capture showcasing the Live Auctions title.

Click here to view the screenshot.

How can CSS properties such as "top: 50%;", "left: 0;", and "transform: translateY(-50%) translateX(-40%);" be used creatively to emphasize specific elements like the letter L with a lilac circle?

I am looking for assistance in implementing this layout effectively. Can someone lend a hand?

html css web layout position

Answer 1

Answer №1

At first, the top left corner of the circle aligns with the top left corner of the highlighted text block. Keep in mind that using line-height: 130px significantly increases the height of the block compared to the text.

.title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    /* top: 50%; */
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

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

<div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>

Once top: 50% is applied (relative to the block's height), the circle shifts vertically so its upper point intersects with the middle of the text block.

.title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

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

<div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>

Applying transform: translateY(-50%) (relative to the circle's height) moves the circle vertically so its center aligns with the previous upper point.
translateX(-40%) shifts the circle horizontally to the left by 40% of its width.

Answer 2

At first, the top left corner of the circle aligns with the top left corner of the highlighted text block. Keep in mind that using line-height: 130px significantly increases the height of the block compared to the text.

.title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    /* top: 50%; */
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

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

<div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>

Once top: 50% is applied (relative to the block's height), the circle shifts vertically so its upper point intersects with the middle of the text block.

.title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

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

<div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>

Applying transform: translateY(-50%) (relative to the circle's height) moves the circle vertically so its center aligns with the previous upper point.
translateX(-40%) shifts the circle horizontally to the left by 40% of its width.

Answer 3

Answer №2

There seems to be a syntax error in the title class of your code. I have included the code below for us to visually inspect the output using the run snippet feature. What exactly is your goal with this code?

body {
  background-color: gray;
  font-size: 14px;
  font-family: Arial;
}
.title {
     font-family: 'Oxanium';
     font-weight: 700;
     font-size: 64px;
     line-height: 130px;
     color: #f5fbf2;
     position: relative;
}
 .title:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%) translateX(-40%);
     background: #8613a5;
     width: 110px;
     height: 110px;
     border-radius: 50%;
}
 .title span {
     text-align: center;
     position: relative;
     z-index: 2;
}
 .title-wrapper {
     display: flex;
     justify-content: center;
}

 <div class="title-wrapper">
        <h2 class="title title--purple"><span>Live Auctions</span></h2>
    </div>

Answer 4

There seems to be a syntax error in the title class of your code. I have included the code below for us to visually inspect the output using the run snippet feature. What exactly is your goal with this code?

body {
  background-color: gray;
  font-size: 14px;
  font-family: Arial;
}
.title {
     font-family: 'Oxanium';
     font-weight: 700;
     font-size: 64px;
     line-height: 130px;
     color: #f5fbf2;
     position: relative;
}
 .title:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%) translateX(-40%);
     background: #8613a5;
     width: 110px;
     height: 110px;
     border-radius: 50%;
}
 .title span {
     text-align: center;
     position: relative;
     z-index: 2;
}
 .title-wrapper {
     display: flex;
     justify-content: center;
}

 <div class="title-wrapper">
        <h2 class="title title--purple"><span>Live Auctions</span></h2>
    </div>

After positioning is a technique used to strategically place elements on

Answer №1

Answer №2

Similar questions

the optimal approach to determine character spacing in SCSS

Is there a way to prevent an inline SVG from appearing at a random height without specifying its height or the height of its parent element?

Add a <span> element to the header element in the CSS using jQuery

What steps can I take to stop my Details element from moving a nearby Div?

Unique design for circular checkbox inside Bootstrap popover

Encountering an error of "undefined is not iterable, cannot read property Symbol(Symbol.iterator)"

Transform a dropdown menu into an inverted footer

Add a new division to a component when a specific event handler is triggered by another component using React and the reduce method

unexpected issue when trying to append a child element after creating its innerHTML

Using a JavaScript if statement to check the height of a specific HTML element

I am unable to view the input appearing inside the input box on my React/HTML application

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Center align the text inside a table cell of a span that is floated to the right and has a varying

The margin property in jQuery does not seem to be functioning properly when trying to send

Is there a way to customize the default settings for a blueprint’s menu item?

Issues with web display on Android devices

Having trouble retrieving information from the Label text input field

Encoding URLs in C#

Transferring items between containers with stylish animations in AngularJS

Unexplained failure of Angular2's FileReader component