I have a heading for a web page that is supposed to look like this
And i'd like to use css to style it. One way is to use pseudo elements :before and :after with h3 tag, and use content:url(...image.png);, but Is it possible to create something like this using only css, and not using images?
I could create on of those using :before and :after, by specifying borders, width and height, and absolutely positioning them, but that way I couldn't create the other side. Are there some line parameters in css to help me create it?
Here's jsfiddle of what I have right now.
HTML
<div class="container">
<h3>CONTACT US</h3>
</div>
CSS
.container{
position:relative;
left:100px;
}
h3{
font-family: Lato;
font-weight: 300;
display: inline-block;
color: #222222;
font-size: 40px;
line-height: 48px;
margin-bottom: 26px;
position: relative;
}
h3:before{
content:"";
border-right: 1px solid #e65941;
width: 30px;
height: 40px;
position: absolute;
left:-50px;
bottom:5px;
}
h3:after{
content:"";
border-left: 1px solid #e65941;
width: 30px;
height: 40px;
position: absolute;
right:-50px;
bottom:5px;
}
Here we are:
Create the left and right borders with the h3 itself.
Adjust bottom on :before and :after to get the exact result you want.
Have a jsBin! - updated the link, jsfiddle is crashing on me so I have uploaded to jsBin
I have done a bit of a tidy up, and have removed the container as the h3 styling is self-contained.
CSS
h3 {
position:relative;
font-family:Lato;
font-weight:300;
display:inline-block;
color:#222;
font-size:40px;
margin:30px;
border-left:solid 1px #e65941;
border-right:solid 1px #e65941;
padding:0 10px;
}
h3:before,h3:after {
position:absolute;
content:"";
border-bottom:1px solid #e65941;
width:30px;
bottom:23px
}
h3:before {
left:-30px
}
h3:after {
right:-30px
}
Related
I have a span for RESTAURANT (text) which needs to have a border-bottom that is divided into two but will not overlap the text below it. It's like this picture:
I want to know how to create the divided border beside "bar & lounge" (in the link)
The best way to create this is to use CSS :before and :after.
You can wrap this text in one <span>spoon and fork</span> Or you can create two paragraphs, its you decision.
Then you can use :before and :after
<p>Spoon and fork</p>
p {
display: inline-flex;
align-items: center;
}
p::before, p::after {
content: "";
width: 50px;
height: 3px;
background: red;
margin: 5px;
}
Try this :
h2{text-align:center}
.custom { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; }
.custom span { background:#fff; padding:0 10px; }
<h2>MARINA'S RESTAURANT</h2>
<h2 class="custom"><span>Spoon and Fork</span></h2>
you can use before and after pseudo element
.block{
width:350px;
text-align:center;
margin:0px auto;}
.text,.text2{
position:relative;
display:block;
font-size:28px;
text-transform:uppercase;}
.text:before{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
right:0px;
width:45px;}
.text:after{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
left:0px;
width:45px;}
<div class="block">
<span class="text2">Marina's restaurant</span><br/> <span class="text">spoon and fork</span></div>
I have an image I would like to display as a circle with (border-radius:50%) and on the same line I would like to have some text with a set width and background. I would not like to hard code any values. What is the best way of accomplishing this?
Here is a picture
fiddle
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
.i {
width: 80px;
height: 80px;
border-radius: 50%;
}
.headingText {
color: white;
background: black;
display: inline-block;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
You could try something like this:
.header
{
padding-top:26px;
padding-left:40px;
position:relative;
}
.i
{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:0;
left:0;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
Using pseudo-classes and absolute positioning you can get the effect you want.
The below answer uses your existing HTML so you don't have to change any of that and just changes your CSS.
You can add some more padding to the text to make it a bit more spaced out if required and the background should sort itself out.
.header {
position: relative;
display: inline-block;
margin: 30px;
overflow: visible;
}
.header img.i {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
bottom: 16px;
left: -40px;
z-index: 1;
overflow: hidden;
border: 3px solid black;
}
.header p.headingText {
padding: 16px 32px 16px 80px;
color: black;
border: 3px solid black;
}
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
<p class="headingText">Hello</p>
</div>
Just add position: absolute in i class then control the margin of headingtext:
HTML:
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
CSS:
.i
{
width:80px;
height:80px;
border-radius:50%;
position: absolute;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin: 40px 0 0 37px;
}
FIDDLE
use a block element instead with a negative margin to the top (half circle size - half of the padding) and a margin to the left (half circle size). Just change:
.headingText {
/*display: inline-block;*/
display: block;
margin-top: -45px;
margin-left: 40px;
}
Example fiddle: https://jsfiddle.net/c67dchhv/
just simple make .header class position:relative; if you want to define any height and width you can, .i class position:absolute; give margin on .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ maybe it will helpful for you.
I'm learning CSS (having a lot of fun with it!) and was wondering if anyone had an alternative solution for this.
I want to have a dynamic title for a site that has a ribbon behind it. So no matter the length of the title text, the ribbon behind it will "resize". My solution is to have a background container for the text that overlays on top of the ribbon. As the text container resizes, it will look like the ribbon behind it grows/shrinks because of the white background.
Below is the code of my solution for a dynamic title with ribbon behind it.
HTML
<div class="body">
<div class="title_rule_wrap">
<div class="title_rule">
<h1>This is a title</h1>
</div>
</div>
</div>
CSS
.title_rule_wrap {
text-align: center;
width: 600px;
height: 0;
margin: 30px 0 20px;
border-bottom: 7px solid green;
}
.title_rule {
background-color: #fff;
top: -2.2em;
position: relative;
display: inline-block;
padding: 0 10px;
}
.body {
width: 600px;
margin: 0 auto;
}
Would my solution above be possible using only a single h1 tag and psuedo elements? Here is what I have so far for an alternative solution.
Thanks in advance for your help. Cheers.
CSS:
h1 {
text-align: center;
background-color: #fff;
margin:0 0 0 0;
padding:0;
}
h1:before {
content: "";
position:relative;
top:-3px;
display: block;
border: 3px solid green;
}
h1:after {
content: "";
position:relative;
top:5px;
display: block;
border: 3px solid green;
}
This puts a green border before and after the h1, and it resizes based on the browser width and height as its position is set as relative.
Although I don't really think this is a good solution (I think what you already have may be better - the widths for the :before and :after is the tricky part), this is the only way I could achieve what you are asking.
The good side is it is responsive!
h1 {
display:flex;
align-items:center;
justify-content:center;
}
h1:after, h1:before {
content: "";
background:green;
width:33%;
height:6px;
margin:0 10px;
}
CodePen
Here is another variation using display:inline-block; instead of flex
h1 {
width:100%;
display:inline-block;
}
h1:after, h1:before {
content: "";
background:green;
width:33%;
height:6px;
margin:0 10px;
display:inline-block;
vertical-align:middle;
}
I have been trying and I don't really know how to solve this:
I need to style the title of the content like this:
Now, I've been trying to have position:absolute some other stuff, but it just doesn't seem to work.
My code:
<div class="content_item">
<div class="double_line"></div>
<h2>Ce facem</h2>
</div>
css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: absolute;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
}
So what I wanted was to put the text over the line and a white background on the text.
fiddle: http://jsfiddle.net/Qu849/
Can you please help me?
This fiddle kinda works:
http://jsfiddle.net/Qu849/4/
Anyway I wouldn't do that code for this purpose. Consider this:
Just use a div with a background image (repeat-x) with those "borders"
Inside that div use a span, centered, and with a background:#fff;
That is just better.
EDIT
Check #drip answer to do what I described: https://stackoverflow.com/a/20070686/2600397
You need to position you h2 above your bordered div. My idea would be to make h2 display:inline-block; so you can use text-align:center; on the parent to center the child h2 and then just use position:relative; and top:-20px; on the h2 to move it up a bit
.content_item{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position:relative;
text-align:center;
margin-top:50px;
}
.content_item > h2{
text-align: center;
background-color: white;
padding:3px 15px;
font-size:14px;
display:inline-block;
position:relative;
top:-20px;
}
http://jsfiddle.net/Qu849/8/
Since the double_line div is absolutely positioned, it will be above any none positioned elements.
to put both elements on a relative plane, you need to position the h2 in the same manner (either absolute, or relative).
After that you can play with the margins or top/left properties of the elements to position them over each other.
You can do it with a backgruund image very easy.
If you are ok with using background images.
HTML:
<h2><span>Ce facem</span></h2>
CSS:
h2 {
background: url(http://i.imgur.com/7LGlQ0I.png) repeat-x 0 center;
text-align: center;
}
h2 span { padding: 0 20px; background-color: #fff; }
Demo
Or if you really prefer usin bordered element:
Then with a little tweaks in the css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position: absolute;
top: 12px;
}
.content_item>h2{
display: inline;
position: relative;
z-index: 2;
text-align: center;
padding: 0 10px;
background-color: #ffffff;
}
.content_item{
text-align: center;
position:relative;
}
Demo
Yes, Rodik is right
Try using:
.content_item>h2 {
text-align: center;
display: block;
width: 200px;
background-color: #ffffff;
margin-top: -20px;
margin-left: 30%;}
You have to give position:absolute; and margin to your <h2>
Replace your <h2> style with this:
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin:-10px 41% 0px;
}
fiddle
if in doubt, you could just make the text an image with full transparent background, this makes it easier when it comes to responsive webpage layouts (different resolutions etc.)
Pure Css with No images
Ammend this in your CSS to check if it helps :
.content_item>h2{
text-align: center;
background-color: #ffffff;
display:inline-block; // makes header size equal to text width
width : 30%; //gives indented left-right white-space
position:absolute; //to overlay it on double-line
top : 0px; //position
display: table; //centre inline elements
margin : 0 auto;
margin-left : 40% //hack to center it
}
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display: inline-block;
width: 100%;
height: 5px;
position: relative;
}
.content_item>h2{
background-color: #FFFFFF;
width: 200px;
z-index: 12;
position: absolute;
top: -23px;
text-align: center;
left: 0;
right: 0;
margin: 20px auto;
}
.content_item{
position:relative;
}
}
use this code usefull for you.
see this link http://jsfiddle.net/bipin_kumar/35T7S/1/
Here is one way of doing it:
.content_item {
position:relative;
}
.content_item > div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
XXdisplay:inline-block; /* not needed */
width:100%;
height:5px;
position: absolute;
z-index: -1;
top: 50%;
margin-top: -3px;
}
.content_item > h2 {
text-align: center;
background-color: #ffffff;
width: 200px; /* must be specified */
margin: 0 auto; /* for centering */
}
To the .double-line div, add z-index: -1 to force it to be painted under the h2 element.
Use top: 50% and a negative margin-top: -3px to vertically align the double lines (if that is what you need).
You then need to specified a width for h2 other wise it will be 100% wide and the white background will paint over the dobule-lines. Add margin: 0 auto to center the h2 within the parent container.
You do not need display: inline-block for the .double-line since the absolute positioning will force the display type to be block.
Demo at: http://jsfiddle.net/audetwebdesign/nB2a3/
You can do this without absolute positioning and without changing the HTML.
Rather than having the text-align: center on the <h2>, you can set it on the .content-item. Then use display: inline-block on the <h2> and relatively position it with a negative top value.
Like so:
.content_item>div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
}
.content_item>h2 {
background-color: #ffffff;
display: inline-block;
margin: 0;
padding: 0 40px;
position: relative;
top: -15px;
}
.content_item {
text-align: center;
}
http://jsfiddle.net/Qu849/11/
Try this, another way
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: relative;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin-top:-30px;
margin-left:50%;
}
When z-index not used this type of issue, use above format.
This question already has an answer here:
Create vertically centered horizontal line to fill width of title with padding in CSS
(1 answer)
Closed 9 years ago.
Can the line behind the text be accomplished with CSS only?
Yes.
HTML:
<h2><span>Centered Header Text</span></h2>
CSS:
body {
background: #ccc;
}
h2 {
text-align: center;
display: table;
width: 100%;
}
h2 > span, h2:before, h2:after {
display: table-cell;
}
h2:before, h2:after {
background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
width: 50%;
content: ' ';
}
h2 > span {
white-space: nowrap;
padding: 0 9px;
}
JSFiddle
Source
Yes it can.
No images, no tables, just two elements and simple CSS.
Here's a fiddle to demonstrate it: http://jsfiddle.net/URrdP/
HTML:
<div> <span>Text Here</span> </div>
CSS:
div {
font-size: 45px;
border: #EEEEEE inset 2px;
position: relative;
text-align:center;
height: 0px;
}
span {
position: relative;
top:-0.7em;
background: #CCCCCC;
}
The key points here are that the outer element has an inset border and zero height and the inner element is positioned half a line upward so it sits on top of the outer element's border.
The other key point is that the inner element has a solid background color, otherwise the border line would show through. This means the technique will only really work successfully when you are placing it on top of a solid background; putting it on top of a gradient or an image may not work so well.
I may not have got the colors or the font sizing perfect for you in my example, but the principle should work perfectly fine for you.
CSS border inset may not be the best way to get a perfect colour match for you; if you need more fine-grained control of the colours you can specify individual colours for border-top and border-bottom.
Here's how you could do something similar with no images.
HTML:
<h1><span>Text Here</span></h1>
CSS:
body, span { background: #ccc; }
h1 { text-align: center; border-bottom: 1px solid #333; font-size: 20px; height: 10px; }
JSFiddle http://jsfiddle.net/ChrisLTD/fvetd/
Without images version (I'd prefer the display:table version though)
CSS:
body
{background:silver;}
h1
{text-align:center;color:white;font-weight:normal;position:relative;
line-height:1;text-shadow:0 1px black;font-size:34px;font-family:georgia, serif}
h1::before, h1::after
{width:100%;border-bottom:1px white solid;content:' ';
position:absolute;top:50%;left:0;}
h1::after
{margin-top:-1px;border-color:gray}
h1 > span
{background:silver;position:relative;z-index:1;}
HTML:
<h1>
<span>
Text Here<br>
On Multiple Lines too
</span>
</h1>
Demo: http://jsbin.com/uqexar/1/edit
Since there was no HTML specification, I added in a couple of spans
<h1>
<span class="wrapper">
<span class="text">TEXT HERE</span>
<span class="line"></span>
</span>
</h1>
CSS:
h1 {
width:300px;
background:#dcdcdc;
padding:10px;
text-align:center;
color:#333;
}
.wrapper {
display:block;
position:relative;
}
.line {
display:block;
height:1px;
background:#cecece;
border-bottom:1px solid #e3e3e3;
width:100%;
position:absolute;
top:50%;
z-index:100;
}
.text {
z-index:200;
position:relative;
padding:10px;
background:#dcdcdc;
display:inline-block;
}
This means the line will look like you specified with two greys.
http://jsfiddle.net/3q5he/
This can be done with a single element:
http://jsfiddle.net/Puigcerber/vLwDf/
<h1>Heading</h1>
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
Origin: http://www.impressivewebs.com/centered-heading-horizontal-line/#comment-34913