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>
Related
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.
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;
}
Can you please take a look at This Demo and let me know how to style the <hr> to look like following image:
I tried this:
hr {
border-top: 3px solid red;
border-bottom: 3px solid blue;
}
but it seems I need to use ::after Pseudo-element. Thanks
You can do it using :before :pseudo element:
hr:before {
content: "";
width: 40px;
height: 3px;
background-color: #F8CC05;
position: absolute;
top: -4px;
left: -1px;
}
hr {
position: relative;
color: #DDDDDD;
}
<hr />
Something like this.
hr:before {
content: "";
position: absolute;
top: 5px;
left: 8px;
border-bottom: 4px solid #F7C51E;
width: 40px;
}
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;
}