I have taken a tooltip from another Stack Overflow post, and slightly modified it. It looks like this:
Generated from the following code:
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid black;
text-decoration: none;
border-radius: 2px;
padding: 20px;
margin-top: 50px;
}
.up-arrow:before {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 141px;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
If you look very closely, you can see that the color of the :before element is not actually black, it is #77777.
This problem has left my coworkers and I stumped. It is consistent across browsers. Can anyone provide some insight?
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid black;
text-decoration: none;
border-radius: 2px;
padding: 20px;
margin-top: 50px;
}
.up-arrow:before {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 141px;
top: -17px;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
Your problem is antialiasing, which is trying to make your line look smooth. You can make it true black by moving the :after element 1 pixel or so further away from the diagonals, so that the line is thicker and antialiasing only affects the outside pixels not the inner pixels, but whether this is desirable is another question. It looks slightly odd.
Said effect is achieved in the snippet above by adding top: -17px to the :after element.
Related
I am trying to style button like this:
Now I first though I could just style it with an ::after element attached to the button.
Currently I have this (using sass syntax):
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
z-index: 10;
&::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -2;
}
}
But this renders something which looks a little different:
The rectangle more to the right is my :afterelement.
It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.
How could I style this correctly?
Thanks for the help
Cheers
Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.
You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
}
button::after {
content: '';
display: block;
position: absolute;
top: -10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
body {
padding: 20px;
}
<button>Button</button>
I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
left: 20px;
z-index: 10;
transform: rotateY(180deg);
}
button::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
.buttonz{
transform: rotateY(180deg);
}
<button>
<div class="buttonz">
Button
</div>
</button>
I'm requesting your help with a .css hr class
I'm trying to figure out how to make a double border like this:
Here's what i did:
hr.style15 {
border-top: 4px double black;
}
hr.style15:after {
content: 'SHIPPING INFO';
display: inline-block;
position: relative;
top: -15px;
left: 40px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
My questions are:
1) How do I get rid of the inline-block below the 2 lines? I've tried by deleting the inline-block sentence but it doesn't work.
2) Can I add font-family and font size to this?
3) Is it possible to increase the space between the 2 lines without increasing the width?
Basically I believe I'd do it differently. Using both :after and :before for the lines will help you drastically on putting a text on top of it.
So I prepared this CodePen for you. Basically what I did was using an :after and a :before (as I told you before) for the border-lines and after that I added a span with a background-color (in this case white) on top of the border-lines (look at the z-index).
.container {
width: 800px;
position: relative;
}
.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}
&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}
span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}
You can see a demo of this.
I hope this helps!
Please have a check with this:-
HTML
<h1 class="title"><span>Shipping info</span></h1>
CSS
h1.title {
margin-top: 0;
position: relative;
}
h1.title:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 1;
border-bottom: 1px solid #000;
}
h1.title span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
margin-left: 50px;
}
I had applied css to this thing but is there any way where i can do css of this type ?
means decreasing the bottom of the border line?
See if this help.
p {
position: relative;
z-index: 1;
width: 30px;
background: red;
padding: 10px;
color: #fff;
}
p:before {
content: "";
position: absolute;
left: 5px;
bottom: 0;
width: 80%;
border-bottom: 4px solid black;
height: 1px;
}
<p>
hello
</p>
I am trying to create a ribbon at the beginning of a rectangle. However, I cannot figure out how to make it appear BEHIND the rectangle.
Please see this codepen: http://codepen.io/gosusheep/pen/aOqOBy
The part for creating the ribbon and putting it behind the rectangle is here:
.rectangle::before{
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -1;
border-left: 25px solid transparent;
border-right: 25px solid $blue;
border-top: 25px solid $blue;
border-bottom: 25px solid $blue;
left: -30px;
top: 10%;
}
Even with position: absolute, and z-index: -1, it appears ON TOP of the div.
Can anyone help with this?
What is happening here is that apparently, the property transform: translateX(-50%); it's "overriding" in some way the z-index. My solution is just center rectangle otherwise, for example:
.rectangle{
margin: 0 auto;
}
DEMO
The reason for your problem is not because children cannot be positioned behind their parent but because you are using a transform on the parent. Using transforms affect the stacking context like mentioned in this answer by BoltClock.
One solution would be to avoid the transform totally and use left: calc(50% - 100px) instead to position the ribbon at the center (like in the below snippet). (50% - 100px) is used as the value because 100px is half of the box width (50% is the center point of the parent).
.rectangle {
width: 200px;
height: 50px;
background-color: #8080ff;
position: relative;
left: calc(50% - 100px); /* newly added */
border: 1px #6666ff solid;
}
ul {
list-style: none;
}
li {
display: inline;
}
li + li::before {
content: " | ";
}
.container {
width: 100%;
position: relative;
}
.rectangle {
width: 200px;
height: 50px;
background-color: #8080ff;
position: relative;
left: calc(50% - 100px); /* newly added */
border: 1px #6666ff solid;
}
.rectangle::before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -1;
border-left: 25px solid transparent;
border-right: 25px solid #8080ff;
border-top: 25px solid #8080ff;
border-bottom: 25px solid #8080ff;
left: -30px;
top: 10%;
}
<p>put a pipe between nav elements</p>
<nav>
<ul>
<li>banana</li>
<li>woof</li>
<li>quack</li>
</ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
<div class='rectangle'></div>
</div>
If in case you can't use the above solution, then you could follow the approach described below.
Assuming you don't have any other use for the ::after pseudo-element, you could use that to create the rectangle and give it a z-index higher than the ::before pseudo-element to make it appear behind the rectangle.
/* Modified */
.rectangle {
width: 200px;
height: 50px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* Added */
.rectangle::after {
content: "";
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
position: absolute;
background-color: #8080ff;
border: 1px #6666ff solid;
z-index: -1;
}
.rectangle{
padding: 4px;
box-sizing: border-box;
}
Below is a sample snippet:
ul {
list-style: none;
}
li {
display: inline;
}
li + li::before {
content: " | ";
}
.container {
width: 100%;
position: relative;
}
.rectangle::before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -2;
border-left: 25px solid transparent;
border-right: 25px solid #8080ff;
border-top: 25px solid #8080ff;
border-bottom: 25px solid #8080ff;
left: -30px;
top: 10%;
}
/* Modified */
.rectangle {
width: 200px;
height: 50px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* Added */
.rectangle::after {
content: "";
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
position: absolute;
background-color: #8080ff;
border: 1px #6666ff solid;
z-index: -1;
}
.rectangle{
padding: 4px;
box-sizing: border-box;
}
<p>put a pipe between nav elements</p>
<nav>
<ul>
<li>banana</li>
<li>woof</li>
<li>quack</li>
</ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
<div class='rectangle'>
Some content
</div>
</div>
Solution here, look closely at z-indexes and positions
.container{
position: relative;
width: 100%;
z-index: 1;
}
.rectangle{
width: 200px;
height: 50px;
background-color: $blue;
position: absolute;
left: 50%;
border: 1px darken($blue,5%) solid;
}
.rectangle::after{
content: "";
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid $blue;
border-top: 25px solid $blue;
border-bottom: 25px solid $blue;
left: -30px;
top: 10px;
position: absolute;
z-index: -1;
}
And your codepen edited http://codepen.io/anon/pen/mJXeed working now
I generated a bubble chat thingy from http://www.ilikepixels.co.uk/drop/bubbler/
In my page I put a number inside of it
.bubble {
position: relative;
width: 20px;
height: 15px;
padding: 0;
background: #FFF;
border: 1px solid #000;
border-radius: 5px;
}
.bubble:after {
content: "";
position: absolute;
top: 4px;
left: -4px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #FFF;
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 4px;
left: -5px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
}
I want the background-color of the bubble to change according to the number inside of it via rgb
so if my div is
<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>
I want the color to be rgb(100,255,255)
The thing is this doesn't affect the triangle.
How do I write the inline css so it will include the :before and :after?
You can, using CSS variables (more precisely called CSS custom properties).
Set your variable in your style attribute: style="--my-color-var: orange;"
Use the variable in your stylesheet: background-color: var(--my-color-var);
Browser compatibility
Minimal example:
div {
width: 100px;
height: 100px;
position: relative;
border: 1px solid black;
}
div:after {
background-color: var(--my-color-var);
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<div style="--my-color-var: orange;"></div>
Your example:
.bubble {
position: relative;
width: 30px;
height: 15px;
padding: 0;
background: #FFF;
border: 1px solid #000;
border-radius: 5px;
text-align: center;
background-color: var(--bubble-color);
}
.bubble:after {
content: "";
position: absolute;
top: 4px;
left: -4px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent var(--bubble-color);
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 4px;
left: -5px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
}
<div class='bubble' style="--bubble-color: rgb(100,255,255);"> 100 </div>
You can't. With inline styles you are targeting the element directly. You can't use other selectors there.
What you can do however is define different classes in your stylesheet that define different colours and then add the class to the element.
The key is to use background-color: inherit; on the pseudo element. See: http://jsfiddle.net/EdUmc/
If you really need it inline, for example because you are loading some user-defined colors dynamically, you can always add a <style> element right before your content.
<style>#project-slide-1:before { color: #ff0000; }</style>
<div id="project-slide-1" class="project-slide"> ... </div>
Example use case with PHP and some (wordpress inspired) dummy functions:
<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style>
<div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>
Since HTML 5.2 it is valid to place style elements inside the body, although it is still recommend to place style elements in the head.
Reference: https://www.w3.org/TR/html52/document-metadata.html#the-style-element
I resolved a similar problem by border-color: inherit
, see:
<li style="border-color: <?php echo $hex ?>;">...</li>
li {
border-width: 0;
}
li:before {
content: '';
display: inline-block;
float: none;
margin-right: 10px;
border-width: 4px;
border-style: solid;
border-color: inherit;
}