How to make the text overflow the backrgound from top and bottom? - css

Question

I'm trying to emulate this behavior using CSS:
And this is what I have to this moment:
.contenedor{
height: 30px;
margin-bottom: 10px;
}
.lineaRoja{
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
}
.centreado{
font-size: 30px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
How can I get that CSS behavior?

Answer 1

I would cut the upper and lower part via clip-path. No need to use 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

Here is another idea where you can consider line-height
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>
Another one where you can adjust 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

I wouldn't use opacity, but simply white text and white background. The text can be vertically positioned by using postion: relative and a bottom setting to offset it to the optimal position.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
height: 24px;
border-radius: 5px;
text-align: center;
}
.centreado {
font-family: sans-serif;
font-style: oblique;
font-size: 50px;
color: white;
position: relative;
bottom: 8px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">STREAMING</h2>
</div>
</div>

Answer 4

Another solution is to move the text via transform property of CSS.
.contenedor {
height: 30px;
}
.lineaRoja {
background-color: rgba(255, 0 ,0, 0.5);
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
overflow: hidden;
}
.centreado {
font-size: 70px;
line-height: 70px;
color: white;
margin: 0;
padding: 0;
transform: translateY(-40%);
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>

Answer 5

Change the text colour to transparent and set the font style to italic.
.centreado{
font-size: 60px;
color: transparent;
font-style: italic;
}
Move the div downwards.
.contenedor{
height: 30px;
margin-bottom: 10px;
transform: translateY(20px); /*Change this value according to your need */
}

Answer 6

html:
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
css:
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
position: relative;
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
}
.centreado {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 38px;
text-transform: uppercase;
font-style: italic;
margin: 0
}
JSfiddle: https://jsfiddle.net/hansfelix50/q0zxh9ku/

Answer 7

The secret here is overflow: hidden; on your red line, anything overflowing it gets cut off.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
position: relative;
overflow: hidden;
}
.centreado {
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="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>

Answer 8

You can do this easily with css flexbox.
Steps:
Remove the opacity: 0.5; and text-align: center; from .lineaRoja
Add background-color: #f36167; to .lineaRoja
Add display: flex; align-items: center; justify content: center; to .lineaRoja
Style the h1 as necessary; I've used: letter-spacing: 2px; font-size: 55px; font-family: arial; font-style: italic; color: white;
Here is a simple example using:
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>