This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
As per screenshot, how if the line become transparent when reach the center of wording part? can we use css gradient to achieve it?
h2.section-title {
font-size: 34px;
font-weight: 400;
text-transform: uppercase;
}
.section-divider h2 {
display: inline-block;
padding: 1rem;
position: relative;
top: -5rem;
background-color: transparent;
}
.section-divider {
border-top: 1px solid #fff;
margin-top: 4rem;
margin-bottom: 0;
text-align: center;
}
<div class="section-divider">
<h2 class="text-center section-title" lang="en">Highlights</h2>
</div>
Well, this is not my answer. I'm just adding code snippet of solution given by #Sachin in comment section of question.
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
Related
This question already has answers here:
Ribbon and stars - How to get this done without an image file?
(1 answer)
How to create a ribbon shape in CSS
(8 answers)
Triangle shadow on CSS ribbon
(2 answers)
Closed 1 year ago.
I'm trying to get inverted sides on my banner as shown in the attached screenshots. I have a rectangle at the moment and would like corners like in the 2nd picture.
This is the current code:
.shop-sale-banner {
background-color: #00509D;
position: relative;
margin: auto;
width: 50%;
}
Thanks!
you can create pseudo-element with borders that looks like desired shape
.shop-sale-banner {
position: relative;
margin: auto;
width: 50%;
text-align: center;
color: #fff;
height: 2em;
line-height: 2em;
}
.shop-sale-banner:before{
content:"";
position: absolute;
top: 0;
z-index: -1;
left: 0;
right: 0;
border-style: solid;
border-width: 1em 0.4em 1em 0.4em;
border-color: #00509D transparent #00509D transparent;
height: 0;
}
<div class="shop-sale-banner">Shop Sale</div>
Try this code here:
body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
.container {
display: flex;
justify-content: center;
margin-top: 40px;
}
.banner {
background-color: blue;
color: white;
width: 600px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.banner span {
font-size: 2rem;
}
.left-triangle {
width: 0px;
height: 0px;
border: 30px solid blue;
border-left: 20px solid white;
transform: translateX(20px);
}
.right-triangle {
width: 0px;
height: 0px;
border: 30px solid blue;
border-right: 20px solid white;
transform: translateX(-20px);
}
<html>
<body>
<div class="container">
<div class="left-triangle"></div>
<div class="banner">
<span>Shop Sales</span>
</div>
<div class="right-triangle"></div>
</div>
</body>
</html>
The trick to get your triangles is to create divs with zero width and height, but with borders.
i'm trying to underline my text with an additional arrow centered on the ligne.
when doing this i can't center my text in the page.
.souligne {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display: inline-block;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
<h2 class="souligne" style="text-align:center;">THIS IS MY HEADER</h2>
The text is not centered when doing this.
.souligne {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display: inline-block;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
<h2 class="souligne" style="text-align:center">THIS IS MY HEADER</h2>
<br>
<center><h2 class="souligne">THIS IS MY HEADER</h2></center>
so when using style="text-align:center" in H2 it doesn't center the text, it works only when using <center>.
You can set h2 to inline-block, and change position of before pseudo-element to 50% se negative margin to half of the arrow and it will be always center fit with title length
h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display:inline-block;
}
h2:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 50%;
margin-left:-12px;
color: #00a7a8;
}
<h2>The Header Is Here</h2>
OK so based on the #Renato Hoxha help, this is what finaly worked for my project.
.souligne {
color: #ea942f;
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #ea942f;
position: relative;
display: table;
margin-left: auto;
margin-right: auto;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 50%;
color: #ea942f;
}
<h2 class="souligne">THIS IS MY HEADER</h2>
I am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.
The css is supposed to display a heading with a colored line either side.
Here is the code:
[HTML]
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
[CSS]
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.
h1 {
overflow: hidden;
font-size: 30px;
text-align: center;
}
h1 span {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 5px;
}
h1 span:before, h1 span:after {
background-color: red;
position: absolute;
margin-top: -1px;
width: 9999px;
top: 50%;
height: 1px;
content: '\a0';
left: 100%;
}
h1 span:before {
left: auto;
right: 100%;
}
.color {
background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
<h1><span>Just Title</span></h1>
</div>
I am building bootstrap based web and I am trying to make title inside of a frame with text attached in the middle of bottom border and still be responsive. Small text on small devices can go in multiple rows, or even go inside the box.
All I could do is. And I want to do it like .
I hope someone already done this and/or could help me doing it.
Thanks in advance.
One big detail is it should be completely transparent so it can go over a backround picture.
And it is much differend than fieldset because the "legend" is on bottom.
Update:
See fiddle
CSS:
.navbar-brand {
margin: 0;
color: #ffffff;
text-align: center;
position: relative;
display: inline-block;
border-top: 8px solid #ffffff;
padding: 5px 32px 0px 32px;
line-height: 1.08333333;
height: auto;
}
.navbar-brand:before {
position: absolute;
content: '';
left: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand:after {
position: absolute;
content: '';
right: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
color: #ffffff;
text-decoration: none;
}
.navbar-header + h3 {
margin-top: 61px;
}
.navbar-header {
text-align: center;
}
.small-lines:before {
position: absolute;
content: '';
left: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines:after {
position: absolute;
content: '';
right: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines1:before {
width: 38%;
background: #009fb6;
}
.small-lines1:after {
width: 38%;
background: #009fb6;
}
.navbar-brand a{
font-size: 48px;
}
.container{
margin-top: 150px;
}
small {
line-height: 1.2;
font-size: 24px;
letter-spacing: 4.8px;
display: block;
position: relative;
}
HTML:
<body style="background: black">
<header class="">
<div class="container text-center">
<div class="navbar-header">
<h1 class="navbar-brand ">
<a href="./">BIG TITLE ONE<br>
<small class="small-lines">Here comes small text</small>
</a>
</h1>
</div>
</div>
</header>
</body>
This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
What's the best way to create the following in just CSS3 and using the fewest containers?
At the moment I'm using 2 nested divs and an hr which seems excessive.
Pseudo-elements!
Using ::before and ::after you can manage this with just one container.
You'll need to adjust your values for your own environment, but the general idea is to position the pseudo-elements absolutely inside the container.
#or {
position: relative;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
}
#or::before,
#or::after {
position: absolute;
width: 130px;
height: 1px;
top: 24px;
background-color: #aaa;
content: '';
}
#or::before {
left: 0;
}
#or::after {
right: 0;
}
<div id="or">OR</div>
Using flexbox instead of absolute positioning is another option, with worse support.
.or {
display:flex;
justify-content:center;
align-items: center;
color:grey;
}
.or:after,
.or:before {
content: "";
display: block;
background: grey;
width: 30%;
height:1px;
margin: 0 10px;
}
<div class="or"> OR </div>
HTML
<div class="separator"></div>
CSS
.separator {
width: 100%;
border-bottom: solid 1px;
position: relative;
margin: 30px 0px;
}
.separator::before {
content: "OR";
position: absolute;
left: 47%;
top: -8px;
background-color: #fff;
padding: 0px 10px;
}
Fiddle: https://jsfiddle.net/k9jmgdyq/1/
The html
<div class="separator"><label>OR</label></div>
And css
.separator{
position: relative;
text-align: center;
}
.separator label{
background-color:#fff;
padding: 0 0.4em;
position: relative;
}
.separator:before{
content: '';
border-style: solid;
border-width: 0 0 1px 0;
position: absolute;
left: 0;
top: 50%;
width: 100%;
border-color:black;
}
Demo
http://jsfiddle.net/0e6j7ruc/