Can you make round cap underlines (as in the above image) with CSS? How?
Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:
EDIT: I missunderstood what hpique wated, but this should work:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...
JSBin Demo
Screenshot from the Demo:
Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Fiddle here: https://jsfiddle.net/toqL0agq/1/
I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:
HTML:
<span class="kicker">Hello World</span>
CSS:
.kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}
One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :
h1:after{
content: " ";
display: block;
width: 1.5em;
height: .2em;
background-color: #f0860c;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>test</h1>
</body>
</html>
No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.
Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).
Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
I use left and right on the pseudo-elements so the ends don't stick out too far past the text.
See my codepen.
you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS:
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
Related
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 am trying to create a css tool-tip, the html and css code and also link to fiddle is given below
CHECK MY CODE HERE #JSFIDDLE
HTML
<a class="tooltip" href="#">CSS Tooltips 1
<span>Tooltip1</span></a>
</br>
<a class="tooltip" href="#">CSS Tooltips
<span>Tooltip This is not working for me </span></a>
CSS
.tooltip {
position: relative;
}
.tooltip span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
display: block;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
My issue is only half the text from <span>Tooltip This is not working for me </span> is shown in the corresponding tool-tip. I tried hard but couldn't debug it. Please help.
Thanking You
It's because you have a fixed width. To allow the tooltip to dynamically expand to the content's width remove the width property and set white-space:nowrap to keep the text inline.
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
white-space: nowrap;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/3/
EDIT
As commented bellow, if you want to keep the fixed width, but wants the text to expand in height, remove the height property of the span, and it will grow (also, don't use white-space anymore):
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
width:140px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/9/
The point is, setting a specific width or height prevents your element of growing automatically.
You need to change the width property of the second tooltip to fit all the text you want display.
Fixed Fiddle: http://jsfiddle.net/89rwu2db/8/
I added styling to the second span to increase the width.
<span style="width: 250px;">Tooltip This is not working for me </span>
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
Here's an image showing what I'm trying to pull off.
So, a line to the left and right of any given text (typically would be some sort of of heading tag), that extends a certain distance on each side of the text (in this case, 65px).
I need something that is fluid in relation to the text itself...the overall width can't be fixed.
This solution is the one that's worked best for me in the past, you can se the example here. The code uses ::before and ::after pseudo classes to create the lines and then applies display:table to the text so the box adapts to it's content (I've used h2 for the example) This type of design is normally centered so I've added the margin: 1em auto;
Doing it this way, you don't need to add any extra html. Hope it helps.
h2{
display:table;
margin: 1em auto;
}
h2:before, h2:after{
content:"";
display: block;
border-top: 1px solid #ccc;
width: 65px;
margin-top:.5em;
}
h2:before{
float: left;
margin-right:3px;
}
h2:after{
float:right;
margin-left:3px;
}
You can do it in different ways.
One way would be setting border around the text, after keeping text inside header tags or div with font settings.
Refer the suggestions in the following link:
Add centered text to the middle of a <hr/>-like line
Try this: Demo
<html>
<head>
<style type="text/css">
.striked-text {
position: relative;
}
.striked-text .text {
z-index: 10;
position: relative;
background-color: white;
padding: 0 5px;
}
.striked-text .line {
left: -65px;
padding: 0 65px;
border-top: 1px solid gray;
top: 0.7em;
display: block;
position: absolute;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div style="text-align:center;">
<span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
</div>
</body>
</html>
For headings you need to define container's width
Your html code
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
your css code
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset {
width: 50%;
}
fieldset.title legend {
padding: 5px 10px;
}
jsFiddle
I'd like to have a div that looks like this:
Is this possible to do with HTML + CSS? I will also be animating this div with jQuery. When the div is hidden I would like the title and the top line to show.
Yes, but it's not a div, it's a fieldset
fieldset {
border: 1px solid #000;
}
<fieldset>
<legend>AAA</legend>
</fieldset>
You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Note: you need to set a background as well as a width on the h1
Example: http://jsfiddle.net/ZgEMM/
EDIT
To make it work with hiding the div, you could use some jQuery like this
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(You will need to modify...)
Example #2: http://jsfiddle.net/ZgEMM/4/
I know a bit late to the party, however I feel the answers could do with some more investigation/input.
I have managed to create the situation without using the fieldset tag - that is wrong anyway as if I'm not in a form then that isn't really what I should be doing.
/* Styles go here */
#info-block section {
border: 2px solid black;
}
.file-marker > div {
padding: 0 3px;
height: 100px;
margin-top: -0.8em;
}
.box-title {
background: white none repeat scroll 0 0;
display: inline-block;
padding: 0 2px;
margin-left: 8em;
}
<aside id="info-block">
<section class="file-marker">
<div>
<div class="box-title">
Audit Trail
</div>
<div class="box-contents">
<div id="audit-trail">
</div>
</div>
</div>
</section>
</aside>
This can be viewed in this plunk:
Outline box with title
What this achieves is the following:
no use of fieldsets.
minimal use of CSS to create effect with just some paddings.
Use of "em" margin top to create font relative title.
use of display inline-block to achieve natural width around the text.
Anyway I hope that helps future stylers, you never know.
Text in Border with transparent text background
.box{
background-image: url("https://i.stack.imgur.com/N39wV.jpg");
width: 350px;
padding: 10px;
}
/*begin first box*/
.first{
width: 300px;
height: 100px;
margin: 10px;
border-width: 0 2px 0 2px;
border-color: #333;
border-style: solid;
position: relative;
}
.first span {
position: absolute;
display: flex;
right: 0;
left: 0;
align-items: center;
}
.first .foo{
top: -8px;
}
.first .bar{
bottom: -8.5px;
}
.first span:before{
margin-right: 15px;
}
.first span:after {
margin-left: 15px;
}
.first span:before , .first span:after {
content: ' ';
height: 2px;
background: #333;
display: block;
width: 50%;
}
/*begin second box*/
.second{
width: 300px;
height: 100px;
margin: 10px;
border-width: 2px 0 2px 0;
border-color: #333;
border-style: solid;
position: relative;
}
.second span {
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.second .foo{
left: -15px;
}
.second .bar{
right: -15.5px;
}
.second span:before{
margin-bottom: 15px;
}
.second span:after {
margin-top: 15px;
}
.second span:before , .second span:after {
content: ' ';
width: 2px;
background: #333;
display: block;
height: 50%;
}
<div class="box">
<div class="first">
<span class="foo">FOO</span>
<span class="bar">BAR</span>
</div>
<br>
<div class="second">
<span class="foo">FOO</span>
<span class="bar">BAR</span>
</div>
</div>
<fieldset>
<legend> YOUR TITLE </legend>
<p>
Lorem ipsum dolor sit amet, est et illum reformidans, at lorem propriae mei. Qui legere commodo mediocritatem no. Diam consetetur.
</p>
</fieldset>
You can use a fieldset tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
Check this link: HTML Tag
For a duplicate, here another option with transform, no fieldset ( and rounded border required in the duplicates) :
Question
Help. I am not great at UX. I am creating an app in React and using Material UI for the look. I really want to create something like this
Where the "Some Title" is a dynamic field from my database as well as the contents. The thing I cannot figure out is what is the best (non skanky) way to add the title into the outline? Thoughts?
Answer position or transform can help you too :
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.fieldset {
border: solid;
color: #353fff;
border-radius: 1em;
margin: 2em 1em 1em;
padding:0 1em 1em;
}
.legend {
transform: translatey(-50%);
width: max-content;
background: white;
padding: 0 0.15em;
}
.fieldset li {
list-style-type: " - ";
}
<div class="fieldset">
<h1 class="legend">Some Title</h1>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
If you are not in a position to add a field set, you can add a background to the element. In my situation, I had different colors in the input element and outside the input element, and also we have a hover color for the input element. So this is a fix I added linear-gradient background with outside color in the top half and transparent color in the bottom half.
I added the transparent color to the bottom half inorder to see the hover color when hovered.
.class-name {
background: linear-gradient(to bottom, #2a2b2d 50%, transparent 50%);
}
From a practical perspective, I think PeterS has the best answer. It's also presented in a very clear, didactical style.
Just to save others a few minutes converting it into more production-style code, I've done the following. Basically, it's what you would think you need: One div box inside another, with the outer div box providing the border, the inner providing the title contents with a negative margin shifting it up. A third div then contains the actual content.
This is the CSS:
.outer-border-box {
border: 2px solid black; border-top:3px solid black;}
.label-source-box {
padding: 0 3px; height: 100px; margin-top: -0.8em; }
.box-title {
background: white none repeat scroll 0 0;
padding: 0 2px;
margin-left: 4em;
font-weight:700; font-size:18px;
font-family: 'Avenir Next',Helvetica, sans-serif; }
This is the html:
<div class="outer-border-box">
<div class="label-source-box">
<span class="box-title">Promotional </span>
<div class="box-contents">
<h2>this is the contents</h2>
</div> </div> </div>
It is possible by using the legend tag.
Refer to http://www.w3schools.com/html5/tag_legend.asp