This is probably a simple question but:
How can I make a title using any headling tag but I want the title between to lines like this:
HTML :
<h4>Staging Server</h4>
Illustration :
You could use :after and :before :pseudo-elements.
h4 span {
position: relative;
color: #00C8FF;
padding: 0 15px;
margin: 0 80px;
font-size: 16px;
font-weight: 100;
}
h4 span:before, h4 span:after {
content: '';
position: absolute;
width: 60%;
height: 1px;
transform: translateY(-50%);
top: 50%;
background: #6F6F6F;
left: -60%;
}
h4 span:after {
left: 100%;
}
<h4><span>Staging Server</span></h4>
Literally the first result on Google...
body
{
background-color: black;
color: white;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<p class="subtitle fancy"><span>A fancy subtitle</span></p>
Taken from here.
<fieldset style="border:none; border-top: 1px solid #999;">
<legend style="text-align:center;"> Staging Server </legend>
</fieldset>
http://jsfiddle.net/3qcpjgxw/
Simple example could be like this:
<hr><h4>Staging Server</h4><hr>
And a little CSS tweak:
hr, h4 {
display:inline-block;
}
hr {
width:30%;
}
Related
I'm trying to get this layout.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/kCjW9"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
Here's the code I have. I can't seem to get z-index to work so that I could bring black border on top of the background.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/6a7Ev"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
.btn {
border-radius: 0px!important;
font-family: $font-roboto!important;
font-size: 1.125rem!important;
text-shadow: none!important;
box-shadow: none!important;
&.fountain-blue {
background-color: $color-fountain-blue;
color: #fff;
margin-left:5px;
margin-top: 5px;
margin-right: -10px;
}
}
.btn-border {
border: 2px solid #000;
display: inline-block;
height: 40px;
z-index: 9999!important;
}
<div class="btn-border mt-4">
learn more about us
</div>
There are a lot of ways to do this but simple method is to use pseudo-elements. check out the snippet.
CODEPEN (SASS version)
#import url("https://fonts.googleapis.com/css?family=Roboto");
.btn {
border-radius: 0px;
font-size: 1.125rem;
text-shadow: none;
box-shadow: none;
display: block;
width: calc(100% - 25px);
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.btn.fountain-blue {
background-color: #65becf;
color: #fff;
margin-left: 5px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.btn-border {
display: inline-block;
height: 40px;
z-index: 9999;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn-border:after {
content: '';
border: 2px solid #000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="btn-border mt-4">
READ MORE
</div>
You should do it something like this, but than with your own colors and sizes.
.btn {
display: inline-block;
border: 1px solid black;
position: relative;
padding: 10px 20px;
margin: 20px;
color: #fff;
}
.btn:before {
background-color: blue;
border-color: green;
border-style: solid;
border-width: 10px 5px 5px 10px;
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
top: -5px;
left: -5px;
content: "";
}
<a class="btn">Read more</a>
As a possible solution.
* {
box-sizing: border-box;
}
body {
margin: 2em;
}
.btn {
background-color: darkblue;
color: white;
border: .2em solid white;
height: 2.5em;
width: 7em;
position: relative;
cursor: pointer;
}
.btn:before {
content: " ";
width: 9em;
height: 4em;
background-color: lightblue;
position: absolute;
top: -1em;
left: -1em;
z-index: -1;
}
.btn:after {
content: " ";
position: absolute;
background-color: transparent;
border: thin solid black;
height: 2em;
width: 6.5em;
top: -.5em;
left: -.5em;
}
<button class="btn">Click me</button>
Here is my html and CSS-
<style>
.bottom-border {
border-bottom-style: solid;
border-bottom-width: 2px;
color: #999;
margin-top: 0.1%;
margin-bottom: 1.5%;
}
.subheading {
position: relative;
padding-left: 0.5em;
padding-right: 0.5em;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
clear: both;
color: #666666;
z-index: 1000;
}
h1 {
text-align: center;
margin-bottom: -0.4em;
}
</style>
<div class="bottom-border">
<h1><span class="subheading" >Hello World</span></h1>
</div>
I want my text to look like -
And current result is -
I can achieve expected one by setting background-color to white of span but i want to know other way of doing that as it's not ideal way.
You can do it this way which doesn't use background colour.
.lines {
line-height: 0.5;
text-align: center;
}
.lines span {
display: inline-block;
position: relative;
}
.lines span:before,
.lines span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid red;
top: 0;
width: 300px;
}
.lines span:before {
right: 100%;
margin-right: 15px;
}
.lines span:after {
left: 100%;
margin-left: 15px;
}
<div class='lines'>
<span>This is some super long text how about that</span>
</div>
You will need to change the widths of the lines on either side though.
Just add a white background to your span
.bottom-border {
border-bottom-style: solid;
border-bottom-width: 2px;
color: #999;
margin-top: 0.1%;
margin-bottom: 1.5%;
}
.subheading {
background-color: white;
position: relative;
padding-left: 0.5em;
padding-right: 0.5em;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
clear: both;
color: #666666;
z-index: 1000;
}
h1 {
text-align: center;
margin-bottom: -0.4em;
}
<div class="bottom-border">
<h1><span class="subheading" >Hello World</span></h1>
</div>
I guess what you want to achieve is something like this
body {
font-family: 'Cinzel Decorative', cursive;
background: url(http://s.cdpn.io/3/blurry-blue.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
}
h1 {
font-size: 3em;
text-align: center;
}
.embiggen {
font-size: 4em;
text-shadow: 0 0 40px #ffbab3;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<h1>Main Title</h1>
<p class="subtitle fancy"><span>A fancy subtitle</span></p>
Update/Add following to your CSS
.subheading {
background:#fff;
padding-left:5px;
padding-right:5px; /** You can change padding value**/
}
Another way is, to use
h1 .subheading{
background:#fff;
position:relative;
}
h1:before{
content="";
width:50%;
height:1px;
background:#000;
position:absolute;
left:0;
top:50%;
}
h1:after{
content="";
width:50%;
height:1px;
background:#000;
position:absolute;
right:0;
top:50%;
/** USE CSS to Create left line **/
}
I am trying to emulate this nutrition label format in CSS, but I can't get the shapes right at all. The best I can come up with is fiddling with border-radius, but that gives me more of a pill shape, and still not way to get the black cut-out shape at the bottom. Has anyone replicated such a nutrition label in CSS? Would anyone be willing to try? Any help would be greatly appreciated.
Here is a link to what I have so far: jsfiddle.net/f5jczunf/
#block {
border-radius:50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color:#FFF;
text-align:center;
}
.number {
font-weight:bold;
font-size:18pt;
text-align:center;
}
<div id="block">
<span class="number">150</span>
<br/>Calories
</div>
Maybe this small example can help.
.label {
position: relative;
width: 100px;
height: 140px;
text-align: center;
border: 1px solid #000;
border-radius: 100px/50px;
overflow: hidden;
}
.title {
display: inline-block;
margin-top: 30px;
}
.bottom {
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 50px;
color: #fff;
line-height: 40px;
border-top: 1px solid #000;
border-radius: 100px/50px;
background-color: #000;
}
<div class="label">
<span class="title">Title</span>
<span class="bottom">Bottom</span>
</div>
https://jsfiddle.net/9xs2wcbL/1/
Here's my take on it. It does require some advanced, bleeding edge CSS, however.
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
body {
padding: 3em;
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
}
.label-list {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.label-list .label-item {
text-align: center;
border: 1px solid;
position: relative;
border-radius: 2em / 0.65em;
padding: 0.2em 0.25em 1.5em;
min-width: 3.5em;
overflow: hidden;
margin: 0.1em;
z-index: 1;
background: white;
color: black;
}
.label-list .label-item h1 {
font-size: 3em;
line-height: 1em;
font-weight: 900;
margin: 0;
}
.label-list .label-item h1.smaller {
font-size: 1.75em;
margin-top: 0.5em;
}
.label-list .label-item h1 small {
font-size: 0.4em;
text-transform: none;
}
.label-list .label-item small {
font-size: 1em;
line-height: 1em;
font-weight: 900;
text-transform: uppercase;
}
.label-list .label-item span {
position: absolute;
bottom: 0.5em;
left: 0;
right: 0;
color: white;
font-size: 0.8em;
line-height: 1em;
}
.label-list .label-item span:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: black;
z-index: -1;
border-radius: 40%;
transform-origin: center;
width: 100%;
height: 0;
padding-top: 100%;
margin: auto;
transform: rotate(45deg) translate(20%, 20%);
}
<div class="label-list">
<div class="label-item">
<h1>140</h1>
<small>Calories</small>
</div>
<div class="label-item">
<h1 class="smaller">1<small>g</small></h1>
<small>Sat Fat</small>
<span>5% DV</span>
</div>
</div>
I believe the only way to have this sort of shape in pure CSS is with a few overlapping shapes, something similar to the code below:
.wrapper {
position: relative;
height: 112px;
width: 80px;
overflow: hidden;
}
.rectangle,
.circle {
position: absolute;
box-sizing: border-box;
}
.rectangle {
height: 96px;
width: 80px;
top: 8px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.circle {
width: 200px;
height: 200px;
left: -60px;
border-radius: 200px;
border: 1px solid black;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class="wrapper">
<div class="circle top"></div>
<div class="rectangle"></div>
<div class="circle bottom"></div>
</div>
https://jsfiddle.net/dylanstark/01hck5dv/
here my approach for that. I'm using before and after pseudo-elements.
before contains black bg with border-radius and it is overflowing the main #block which has overflow: hidden;.
aftercontains text that is coming from data-text attribute of #block
#block {
border-radius: 50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color: #FFF;
text-align: center;
position: relative;
overflow: hidden;
}
#block:before {
display: block;
content: " ";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 50px;
border-radius: 50%;
background: black;
z-index: 0;
}
#block:after {
display: block;
content: attr(data-label);
position: absolute;
bottom: 5px;
color: white;
text-align: center;
z-index: 1;
}
.number {
font-weight: bold;
font-size: 18pt;
text-align: center;
}
<div id="block" data-label="5% DY">
<span class="number">150</span>
<br/>Calories
</div>
I want to get some practice with pseudo elements in combination with transitions and animations. But I have one little problem.
Have a look at this:
HTML:
<nav id="navBar" class="clearfix">
Test
</nav>
CSS:
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
#navBar {
width: 100%;
padding: 30px;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
box-sizing: border-box;
}
#navBar a {
text-decoration: none;
display: inline-block;
}
a.nav {
padding: 10px;
background-color: #7492b6;
color: #fff;
float: left;
font-weight: bold;
font-size: 1em;
min-width: 150px;
text-align: center;
}
a.nav::before {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
a.nav::after {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
http://codepen.io/anon/pen/rVbeLa
the two red lines are my pseudo elements. But I want them to have width 100% but it's not working in combination with the padding.
It should look like this but then I have no padding :/
http://codepen.io/anon/pen/RPOaRj
I have tested it on Firefox 39 and Chrome 43, both on OSX yosemite. Result is the same on both.
Any Idea how this problem could be solved?
Cheers
You can fix that by doing this.
Add position:relative; to the <a>:
#navBar a {
text-decoration: none;
display: inline-block;
position:relative;
}
Then, change your :before and :after to position:absolute; and change their position from top and bottom:
.navGroup1 a.nav::before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 0;
width:100%;
height: 3px;
background-color: red;
}
.navGroup1 a.nav::after {
content: "";
display: block;
position: absolute;
bottom:10px;
left: 0;
width: 100%;
height: 3px;
background-color: red;
}
Updated Codepen
I have a wired problem, i have a regular nav with ul and li and i am trying to make after one of the li red box with number inside, but the problem is that the number from some reason going out of the box, what is the problem?
This is the code:
#mainHeader .rightNav {
float: right;
li {
position: relative;
}
img {
vertical-align: middle;
}
li:nth-child(4)::after {
content:attr(data-value);
color:#fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top:0;
right:0;
}
}
http://plnkr.co/edit/ys7Wy3EJPlA4VlXDt6hE?p=preview
There was wrong on your line height.
Should have : line-height: normal;
Add that to #mainHeader .rightNav li:nth-child(4)::after
Update your css to this:
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
line-height: normal;
}
Sample link
Replace your styles with this:)
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
position: relative;
top: -10px;
right: 0;
padding: 1px 4px;
}