I'm trying to recreate this stylized line border behind my header (see: https://www.vox.com's yellow border behind 'Top Stories'). I understand that it's being created using :before but I can't seem to get my header span (projheader_name) to white out some of the border AND I'm getting two of the :before elements created for some reason. One gets inserted after div class="container" and the other after span="projheader_name".
#projheader {
margin-top: 40px;
padding-top: 20px;
}
#projheader .container {
background-color: white;
}
#projheader h3 {
margin-bottom: 10px;
}
.projheader_name {
background-color: white;
position: relative;
z-index: 3;
}
#projheader :before {
border-left: 4px solid #17A2B8;
border-right: 4px solid #17A2B8;
border-top: 4px solid #17A2B8;
content: " ";
height: 40px;
left: 6%;
position: absolute;
right: 6%;
top: 27%;
}
<section id="projheader">
<div class="container">
<span class="projheader_name">
<h3>Landing Page: Sense</h3>
</span>
</div>
</section>
h3 {
text-align: center;
border: 4px solid #17A2B8; border-bottom: 0;
}
h3 span {
position: relative;
top: -0.7em;
background: #fff;
display: inline-block;
padding: 0 0.7em;
}
<h3><span>LANDING PAGE</span></h3>
Related
I want to create a border (camera type) with 3 colors (blue, white and red).
I created this HTML code:
<div class="reinsurance-offer">
<div class="reinsurance-offer-link">Faites la promotion de vos événements</div>
</div>
I applied this CSS:
#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer {
background-color: #f7f9fa;
padding-right: 2.25rem;
padding-left: 2.25rem;
padding-top: 1.6875rem;
padding-bottom: 1.6875rem;
text-align: center;
}
#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link {
display: inline-flex;
padding: 0.75rem;
border: 5px solid;
border-color: #E20E17 #1F71B8;
background-color: #ffffff;
}
Here is the rendering :
I want to make the same display as in the image below, without the blur effect.
How can I do this in CSS and is it possible?
I didn't manage to get the desired result
You don't really need a lot of code. One gradient can do the job:
.box {
width: 250px;
height: 150px;
border: 10px solid;
border-image: linear-gradient(90deg,red 33%,#0000 0 66%,blue 0) 1;
}
<div class="box"></div>
i'm not really sure where you want to use this, but what about something like this:
.link {
--link-border-width: 5px;
color: grey;
position: relative;
width: fit-content;
display: block;
padding: .5rem 1rem 0;
text-decoration: none;
}
.link::before,
.link::after {
content: "";
height: 100%;
width: calc(100% / 3);
border: 4px solid red;
display: block;
position: absolute;
top: 0;
}
.link::before {
border: var(--link-border-width) solid blue;
border-right: none;
left: 0;
}
.link::after {
border: var(--link-border-width) solid red;
border-left: none;
right: 0;
}
<a href="#" class="link">This is my link<a>
I am trying to create a h1 style that is surrounding the text with a background color.
h1.skew {
padding-left: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
border-right: 50px solid transparent;
border-top: 50px solid #4c4c4c;
height: 0;
line-height: 50px;
}
<h1 class="skew">HELLO WORLD</h1>
https://jsfiddle.net/zo32q98n/
At this point the text appears beneath the background. How can I make the text appear inside the brown colored background?
You can use pseudo-element for background and set z-index: -1 so it appears under the text.
h1.skew {
padding-left: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
position: relative;
height: 0;
line-height: 50px;
}
h1.skew:before {
content: '';
z-index: -1;
border-right: 50px solid transparent;
border-top: 50px solid #4c4c4c;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<h1 class="skew">HELLO WORLD</h1>
Since the border is 50px tall, you can insert a negative margin of the same amount inside:
h1.skew::before {
content: '';
display: block;
margin-top: -50px;
}
body {
background: #ddd;
}
h1.skew {
padding-left: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
border-right: 50px solid transparent;
border-top: 50px solid #4c4c4c;
height: 0;
line-height: 50px;
}
h1.skew::before {
content: '';
display: block;
margin-top: -50px;
}
<h1 class="skew">HELLO WORLD</h1>
You can use CSS3 linear-gradient().
h1.skew {
padding: 10px 80px 10px 10px;
display: inline-block;
color: white;
background: #4c4c4c; /* fallback */
background: linear-gradient(135deg, #4c4c4c 80%, transparent 80%);
}
<h1 class="skew">HELLO WORLD</h1>
Alternatively there is no problem if you use border-bottom instead of border-top.
body {
background: #ddd;
}
h1.skew {
padding-left: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
border-right: 50px solid transparent;
border-bottom: 50px solid #4c4c4c;
height: 0;
line-height: 50px;
}
<h1 class="skew">HELLO WORLD</h1>
You can wrap the text in a span...
<h1 class="skew"><span class="text">HELLO WORLD</span></h1>
And then add the following to your stylesheet...
span.text {
position: relative;
top: -50px;
}
This will move the text up so that it appears over the border you've defined.
I'm trying to make a bar which holds the navigation stack.
For example: Here I am on the client page
And then when I click on a clients name I go to a new page and it adds onto the bar:
Here is what I have so far: http://jsbin.com/bahaqebiga/edit?html,css,js,output
All that needs to be done is change of shape and I'd think some how to manage the z-index as the next arrow should always be under the previous one. I have tried with svg but couldn't get it right because of the text and there was a weird padding I couldn't get rid of, and also with pure html/css but also failed.
Note: position absolute can NOT be used
Any ideas?
Thanks
You can have a pure css solution for that. No need for svg/js.
Use the :after pseudo-selector to create an arrow, and color it based on it's position:
.stack-arrow p:after {
content: "";
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid blue;
top: 0;
margin-left: 14px;
position: absolute;
}
.stack-arrow:nth-child(2) {
background: red;
}
.stack-arrow:nth-child(2) p:after{
border-left-color: red;
}
.stack-arrow:nth-child(3) {
background: green;
}
.stack-arrow:nth-child(3) p:after{
border-left-color: green;
}
.stack-arrow:nth-child(4) {
background: blue;
}
.stack-arrow:nth-child(4) p:after{
border-left-color: blue;
}
Check this example:
http://jsbin.com/jusuwihize/1/edit?html,css,js,output
Here is a working example (after react):
.top-nav {
display: flex;
align-items: center;
position: absolute;
top: 0;
height: 50px;
width: 100%;
z-index: 1000;
background-color: #222;
}
.top-nav img {
cursor: pointer;
}
.stack-arrow {
cursor: pointer;
height: 50px;
color: white;
background-color: blue;
font-family: sans-serif;
padding: 0px 15px;
margin: 0.5px;
}
.stack-arrow {
padding-left: 25px;
}
.stack-arrow p:after {
content: "";
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid blue;
top: 0;
margin-left: 14px;
position: absolute;
}
.stack-arrow:nth-child(2) {
background: red;
}
.stack-arrow:nth-child(2) p:after{
border-left-color: red;
}
.stack-arrow:nth-child(3) {
background: green;
}
.stack-arrow:nth-child(3) p:after{
border-left-color: green;
}
.stack-arrow:nth-child(4) {
background: blue;
}
.stack-arrow:nth-child(4) p:after{
border-left-color: blue;
}
<div class="top-nav" data-reactid=".0"><img height="50px" src="http://skihighstartups.com/wp-content/uploads/2015/07/logo-placeholder.jpg" data-reactid=".0.0"><div class="stack-arrow" data-reactid=".0.1"><p data-reactid=".0.1.0">Clients</p></div><div class="stack-arrow" data-reactid=".0.2"><p data-reactid=".0.2.0">Name</p></div><div class="stack-arrow" data-reactid=".0.3"><p data-reactid=".0.3.0">Extra</p></div></div>
What I'm trying to do is to create a triangle on the bottom border of a block with CSS, and write some text in there like it's shown in this figure :
What I did so far, is :
Create the block element, with its its orange big bottom border.
Create the triangle using CSS.
All I need now is a way to place that triangle exactly in the middle of that exact place. I tried several ways to do that, but without any result.
Here's my code :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
.content_block.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #FE992C;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
You can notice that there's an HTML class called triangle that I don't show. I don't know how to show it exactly in that position.
EDIT :
I'm using the exact selector ( .content_block ) for showing other blocks; Like this block for instance :
So, a solution with after pseudo element will affect this block too. This is why I really need to avoid pseudo elements..
Edit
If you can't use a pseudo element for the triangle, you will need to add an element. You can add it as a child of the .content_block element. This uses the same approach described in the original answer :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.triangle {
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="triangle"></div>
<div class="text">Je déménage</div>
</div>
Original answer:
You can make the triangle with the border technique and a pseudo element.
In the following example, I used the .content_block:after pseudo element with absolute positioning:
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
User :after selector and position that absolutely
Here is updated fiddle:
https://jsfiddle.net/yod8Lvjt/1/
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}