I am creating a horizontal menu with navigation tabs. When these tabs float left in small devices, to pretend that they look more real I add a ::after pseudo-element for extend their height.
But the li width is 2px bigger than li::after width.
sass without :hover, :focus and other tags style looks like this:
.nav-tabs {
& > li {
border: 1px solid $gray-light;
border-bottom-color: white;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 0 $margin-default;
&::after {
display: block;
position:absolute;
height:200px;
width: 100%;
z-index: -2;
left: 0;
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
}
}
}
Absolute positioning width does not take account of borders...that's the issue.
So you will have to adjust accordingly
calc is a good option here.
div {
width: 200px;
border-width: 0 10px 0;
border-style: solid;
border-color: red;
height: 200px;
margin: 3em auto;
position: relative;
}
div::after {
content: "";
width: 100%;
width: calc(100% + 20px);
/* 2 x 10px */
height: 2em;
position: absolute;
bottom: 100%;
background: pink;
left: -10px;
/* 1x border-width */
}
<div></div>
This is because you have used position: absolute; to &::after, there is no parent which has position: relative; Apply position: relative to .nav-tabs
.nav-tabs {
position: relative;
& > li {
/* Your styles */
}
&::after {
/* Your styles */
}
}
Try this, this will really help you.
Related
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
I'm looking to achieve a slanted edge on my div. The problem I'm coming across is the simple code I found to accomplish this is not cross-browser compatible. In fact, it only shows in Chrome.
Can anyone advise on how to do the following so it works in ALL browsers:
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
This effect would achieve:
Here's my entire CSS code:
.my-slanted-div {
position:absolute;
bottom:0;
left:0;
width:100px;
padding:10px 10px;
background-color:#eee;
font-size:20px;
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
Can anyone help me out?
You can also skew pseudo-element, like this:
.my-slanted-div {
position:absolute;
bottom:40px;
left:0;
width:80px;
padding:10px 10px;
background-color:red;
font-size:20px;
}
.my-slanted-div:after {
width:50px;
background:red;
position:absolute;
height:100%;
content:' ';
right:-22px;
top:0;
transform: skew(45deg);
}
<div class="my-slanted-div">
TEXT
</div>
p.s. change angle, play with values...to get desired result...
Edit: Demo in context -> https://jsfiddle.net/Lbwj40mg/2/
This should do the trick using borders.
<div id="container">
<p id="text">Hello</p>
<div id="slanted"></div>
</div>
#container {
position: relative;
height: 200px;
width: 200px;
background:url(http://placehold.it/200x200);
}
#text {
position: absolute;
bottom: 15px;
left: 10px;
z-index: 1;
margin: 0;
}
#slanted {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 0;
border-left: 75px solid #dedede;
border-right: 50px solid transparent;
border-bottom: 50px solid #dedede;
}
jsfiddle
I've made it work one way with :before and :after pseudos, you simply need to update the widths, heights and line-height to suit the size of tab you want; the rectangle must be the same height as the :before and :after bits for a clean look.
.box {
background: red;
width: 200px;
position: relative;
height: 100px;
line-height: 100px;
text-align: center;
margin-left: 50px;
color: white;
font-size: 21px;
font-family: arial, sans-serif;
}
.box:after {
position: absolute;
right: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.box:before {
position: absolute;
left: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="box">
Text in the box
</div>
Here's a way with transform: rotate just to add to the list. Quite annoying as you will have to play with pixels for alignment and make some entries into #media rules for different screen sizes. But it should be fairly cross browser friendly (but maybe not opera mini)
body {
background-color: #333;
}
.container {
position: absolute; /* needs a position, relative is fine. abolsute just for this example */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #ccc;
overflow: hidden; /* required */
}
.salutations {
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 0 15px;
background-color: #fcfcfc;
height: 50px;
line-height: 50px; /* match height to vertically center text */
font-size: 30px;
}
.salutations::before {
content: '';
position: absolute;
top: 21px; /* play with this for alignment */
right: -36px; /* play with this for alignment */
height: 40px; width: 70px; /* may need to adjust these depending on container size */
background-color: #fcfcfc;
transform: rotate(60deg); /* to adjust angle */
z-index: -1; /* puts the pseudo element ::before below .salutations */
}
<div class="container">
<div class="salutations">Hello</div>
</div>
P.S. May have to adjust a pixel or two, my eyes suck.
Browser Compatability
transform: rotate
pseudo elements (::before)
Fiddle
https://jsfiddle.net/Hastig/wy5bjxg3/
It is most likely it is an SVG scaled to always fit its text which is simple and quick way of doing it; if you must use CSS then you could always:
Set a gradient to the div from color to transparent so that it takes up most of the div and the transition of color is abrupt and not smooth like how a normal gradient looks.
create another div and using borders create a triangle to touch the other main rectangular div such as doing:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;
}
Using css you can generate an element that takes the shape of a triangle.
Css tricks has a post on that.
By making the .slanted class position itself relative, we can position the generated content on the right side of the slanted div using absolute positioning.
It'll take some fiddling to get the perfect result you want, but here's an example.
.slanted{
background: #007bff;
color: #fff;
position: relative;
display:inline-block;
font-size: 20px;
height: 25px;
padding: 2px 4px;
}
.slanted::after {
content: " ";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 29px 0 0 20px;
border-color: transparent transparent transparent #007bff;
position: absolute;
top: 0;
right: -20px;
}
<div class="slanted">Hello</div>
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'm trying to fill an element with multiple colors using CSS. Currently, I have this CSS:
div.container {
width: 100px;
border: 1px dotted;
font-size: 10px;
}
.box {
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
}
fiddle
Problem is that the contents are not over the border, so it looks like this:
How can I get the contents of span class="box" to stay in the middle of the element (i.e. over the colored circle)?
How about using absolute and relative positions, and making the circle as a pseudo element.
DEMO: http://jsfiddle.net/d0cv4bc8/8/
div.container {
width: 100px;
border: 1px dotted;
font-size: 12px;
}
.box {
position: relative;
}
.box::before {
content: "";
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
position: absolute;
z-index: -1;
}
Only way I can get the contents centered vertically and horizontally is to put contents inside a span, moved left and up by half of box's border width.
http://jsfiddle.net/d0cv4bc8/11/
CSS
.box .contents {
display:inline-block;
position: relative;
left: -3px;
top: -3px;
}
HTML
<div class="container">
<span class="box"><span class="contents">1</span></span>
</div>
I know this is probably very simple but I have tried using all position settings, float, and nesting. The top div varies in height due to dynamically created text and I need the div below it to be 20px below the top div. Any help is greatly appreciated.
I know I have the position as absolute but that is just to demonstrate kind of what I'm looking for.
#wrapper {
position:absolute;
width:341px;
height:371px;
z-index:1;
border: solid #777 1px;
}
#topbox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
border: solid #000 1px;
top: 7px;
}
#bottombox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
top: 136px;
border: solid #000 1px;
}
<div id="wrapper">
<div id="topbox">Top text box #1. The text is dynamically created here with a height that will vary. </div>
<div id="bottombox">Bottom text box #2. The text is dynamically created here with a height that will vary and needs to be 20px below the bottom of the top text box.</div>
</div>
Looking at the CSS you have, the problem is you are using absolute positioning. For a task like this you should use relative positioning. Here it is on jsFiddle to show you it in action & here is the CSS I adjusted to achieve that:
#wrapper
{
position: relative;
float: left;
display: inline;
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 7px 0 0 0;
border: solid #000 1px;
}
#bottombox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 20px 0 0 0;
border: solid #000 1px;
}
Here is how it renders in my local browser now:
I also looked over your CSS & combined/consolidated it since I find that repeating code can cause confusion when debugging items like this. Here is how I would code this:
#wrapper, #topbox, #bottombox
{
position: relative;
float: left;
display: inline;
}
#topbox, #bottombox
{
width: 280px;
z-index: 1;
padding: 30px;
border: solid #000 1px;
}
#wrapper
{
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox { margin: 7px 0 0 0; }
#bottombox { margin: 20px 0 0 0; }
To give #topBox a bottom margin you simply have to use:
#topBox {
margin-bottom: 20px;
}
The problem is that since you use position: absolute the elements jumps out of their normal flow and will no longer relate to each other.