What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS:

So far, this is what I have achieved:

.container{
  height: 30px;
  margin-bottom: 10px;  
}
.redLine{
  background-color: red;
  opacity: 0.5;
  height: 20px;  
  border-radius: 5px;
  text-align: center;      
}
.centered{  
  font-size: 30px;  
}
<div class="container">
    <div class="redLine">
        <h2 class="centered">Streaming</h2>    
    </div>                        
</div>

How do I achieve this CSS effect?

css

Answer №1

To achieve the desired effect of cutting the upper and lower part, you can use the clip-path property without the need for extra elements or pseudoelements.

h2 {
   background: #f16c73;
   color: #fff;
   font: 2.4em Arial;
   font-style: italic;
   font-weight: 800;
   text-align: center;
   letter-spacing: 2px;
   clip-path: polygon(20% 33%, 20% 70%, 80% 70%, 80% 33%);
 }
<h2>STREAMING</h2>

Answer №2

Consider exploring the use of line-height in this creative idea:

h2 {
   background: #f16c73;
   color: #fff;
   font: 2.4em Arial;
   font-style: italic;
   font-weight: 800;
   text-align: center;
   letter-spacing: 2px;
   line-height:0.45; 
   /*overflow:hidden; uncomment this if you want to hide the overflow */
 }
<h2>STREAMING</h2>

Here's another suggestion to customize the background:

h2 {
   color: #fff;
   font: 2.4em Arial;
   font-style: italic;
   font-weight: 800;
   text-align: center;
   letter-spacing: 2px;
   background: 
    linear-gradient(#f16c73,#f16c73) center
    /100% 45%  /* Adjust this value */
    no-repeat;
 }
<h2>STREAMING</h2>

Answer №3

To achieve the desired effect, I recommend using white text with a white background instead of opacity. To vertically position the text, you can utilize the position: relative property along with the bottom setting to fine-tune its placement.

.container {
  height: 30px;
  margin-bottom: 10px;
}
.redLine {
  background-color: red;
  height: 24px;
  border-radius: 5px;
  text-align: center;
}
.centered {
  font-family: sans-serif;
  font-style: oblique;
  font-size: 50px;
  color: white;
  position: relative;
  bottom: 8px;
}
<div class="container">
  <div class="redLine">
    <h2 class="centered">STREAMING</h2>
  </div>
</div>

Answer №4

Another approach is to use the transform property in CSS to reposition the text.

.container {
  height: 30px;
}

.redLine {
  background-color: rgba(255, 0 ,0, 0.5);
  opacity: 0.5;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
}

.centered {
  font-size: 70px;
  line-height: 70px;
  color: white;
  margin: 0;
  padding: 0;
  transform: translateY(-40%);
}
<div class="container">
  <div class="redLine">
    <h2 class="centered">Streaming</h2>
  </div>
</div>

Answer №5

Adjust the text color to transparent and apply an italic font style.

    
    .centreado{  
      font-size: 60px;  
      color: transparent;
      font-style: italic;
    }

Shift the position of the div downwards.


.contenedor{
  height: 30px;
  margin-bottom: 10px;  
  transform: translateY(20px); /*Modify this value as needed */
}

Answer №6

Sample HTML code: 

<div class="container">
  <div class="redLine">
    <h2 class="centered">Streaming</h2>
  </div>
</div>

Corresponding CSS:

.container {
  height: 30px;
  margin-bottom: 10px;
}

.redLine {
  position: relative;
  background-color: red;
  opacity: 0.5;
  height: 20px;
  border-radius: 5px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 38px;
  text-transform: uppercase;
  font-style: italic;
  margin: 0
}

Link to view on JSfiddle: https://jsfiddle.net/hansfelix50/q0zxh9ku/

Answer №7

One trick to note is setting overflow: hidden; on the red line element, which will clip any content that overflows it.

.container {
  height: 30px;
  margin-bottom: 10px;
}

.redLine {
  background-color: red;
  opacity: 0.5;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.centeredText {
  font-size: 55px;
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}
<div class="container">
  <div class="redLine">
    <h2 class="centeredText">Streaming</h2>
  </div>
</div>

Answer №8

To achieve this effect easily, utilize css flexbox.

Instructions:

  1. Remove the opacity: 0.5; and text-align: center; from .lineaRoja
  2. Add background-color: #f36167; to .lineaRoja
  3. Add 
    display: flex; align-items: center; justify content: center;
    to .lineaRoja
  4. Customize the h1 style accordingly; for example: 
    letter-spacing: 2px; font-size: 55px; font-family: arial; font-style: italic; color: white;

Below is a simple illustration:

body {
  background-color: grey;
  padding-top: 50px;
}
.lineaRoja {
  background-color: #f36167;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centreado {
  letter-spacing: 2px;
  font-size: 55px;
  font-family: arial;
  font-style: italic;
  color: white;
}
<div class="lineaRoja">
  <h1 class="centreado">STREAMING</h1>    
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you guide me on where to find the login with Facebook button on this site?

I am currently working on integrating a Facebook authentication system into my app, but I find the default log in button provided by Facebook developers section to be quite unappealing. My Question: I am curious about how websites like Stack Overflow man ...

cssfacebook

Display text with ellipsis on one of the two spans within a container

I'm struggling with implementing ellipsis in my HTML code. Here's what I have: <div id="wrapper"> <span id="firstText">This text should be displayed with an ellipsis</span> <span id="lastText">this text should not ...

htmlcss

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

javascripthtmlcss

Changing the order on mobile devices in Bootstrap 4: A quick guide

Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the vi ...

htmlcssbootstrap-4

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue. Currently, the code below sets all labels to white b ...

javascripthtmlcss

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

cssregextextmatetextmatebundles

What is the best way to make the first LI elements stand out in a nested structure by applying bold

I had an idea like this: #list li > a { font-weight: bold; } However, I only want the top level items to be made bold, not nested LI's within LI's -- hope that makes sense?? :) EDIT | <ul id="list"> <li><a href="#"& ...

csscss-selectors

What method sits snugly between prepend() and append()?

Just a quick question I have. I am attempting to align an element with my target. Usually, we use prepend (before the target) and append (after the target). Is there something similar that allows us to position that element directly on top of what we are ...

javascripthtmljquerycssprepend

Is there a way to modify the border shape of items in the navigation bar?

Is there a way to achieve this particular shape when the current page is being displayed? https://i.stack.imgur.com/HELTM.jpg This is how my current code looks: current { transform: skew(-20deg); border: 1px solid white; color: black; background ...

htmlcss

Chrome is not storing the CSS file in its cache memory. However, it is successfully caching .js and .png

I have noticed that the CSS file is not being cached in the Chrome browser. My application is created using Angular-CLI and all the necessary cache-control headers are set, with an Expires header of 5 minutes: Accept-Ranges:bytes Cache-Control:max-age=600 ...

cssgoogle-chromehttp-caching

How to Show an Image in a Search Bar Using HTML

As I put the finishing touches on this table, I decided to add a search function to it. However, I encountered an issue with the search bar design. I wanted to incorporate a search icon png file as the background image, similar to the example showcased on ...

htmlcss

Reduce the dimensions of a CSS attribute automatically

Displayed below is the image with a width of 192 and height of 109: <a href="https://www.blogger.com/u/1/blogger.g?blogID=4402911157743442948#"><img alt="" class="thumbnail" height="109" src="https://2.bp.blogspot.com/-E5ftfbCCgkw/XjnLpO347cI/AAA ...

cssresponsive-design

As you scroll, a box blocks off half of the screen

Hey everyone, I could really use your assistance! I'm working on developing a javascript code and here is the idea - if anyone can contribute to it. It's like a social media platform where users enter the site and the is_user_logged_in parameter ...

javascriptjqueryhtmlcss

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

htmlcsswordpress

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

I am having an issue with the pagination display in the text. I would like it to appear below the text as a standalone item for better visibility. Another problem arises when viewing the page on mobile devices - the hamburger menu displays behind the slid ...

javascripthtmlcssswiper.js

Utilize the grid system from Bootstrap to style HTML div elements

I am working on my angular application and need help with styling items in a Bootstrap grid based on the number of elements in an array. Here's what I'm looking to achieve: If there are 5 items in the array, I want to display the first two items ...

htmlcssangular

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...

javascriptcssvue.jsbootstrap-4bootstrap-5

Showcasing a variety of product titles with the help of CSS

Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...

htmlcsslist

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

htmlcssbuttonhover

Adding a stylesheet dynamically to the <head> tag using $routeProvider in AngularJS

Is there a way to load a specific CSS file only when a user visits the contact.html view on my AngularJS application or site? I came across this helpful answer that almost made sense to me How to include view/partial specific styling in AngularJS. The acce ...

cssangularjsconditional-statementsroute-provider