Currently, I am trying to make an animated border-box that goes around a link but once I hover over my mouse the animation works only for the one instance of the pseudo-elements, not both. The instance that is written above the other works.
I do not know what's wrong with that as I can't find the problem either. Both pseudo-elements got the Content set and I don't really know what is wrong.
Here is the code
nav a {
text-decoration: none;
color: white;
width: 100px;
height: 50px;
padding: 25px;
position: relative;
}
nav a::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
padding: 0;
background: transparent;
border: 2px transparent solid;
}
nav a:hover::before {
animation: animate 0.5s linear forwards;
}
#keyframes animate
{
0% {
width: 0;
height: 0;
border-top-color: white;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: white;
border-right-color: white;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: white;
border-right-color: white;
border-bottom-color: transparent;
border-left-color: transparent;
}
nav a::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
padding: 0;
background: transparent;
border: 2px transparent solid;
}
nav a:hover::after {
animation: animate2 0.5s linear forwards;
}
#keyframes animate2
{
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: white;
}
50% {
width: 0%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: white;
border-left-color: white;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: white;
border-left-color: white;
}
For both animate and animate2 you are missing the closing brackets after the 100% code block.
Placing them makes the css work for me.
For example:
html {
background: #333;
}
nav a {
text-decoration: none;
color: white;
width: 100px;
height: 50px;
padding: 25px;
position: relative;
}
nav a::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
padding: 0;
background: transparent;
border: 2px transparent solid;
}
nav a:hover::before {
animation: animate 0.5s linear forwards;
}
#keyframes animate {
0% {
width: 0;
height: 0;
border-top-color: white;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: white;
border-right-color: white;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: white;
border-right-color: white;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
nav a::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
padding: 0;
background: transparent;
border: 2px transparent solid;
}
nav a:hover::after {
animation: animate2 0.5s linear forwards;
}
#keyframes animate2 {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: white;
}
50% {
width: 0%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: white;
border-left-color: white;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: white;
border-left-color: white;
}
}
<nav>
<a>TEST</a>
</nav>
Related
I did a linear animation effect to animate the border around the words"click to enter". When I tried to make words hyperlinked, it only works at a few seconds after I refresh the page (before the animation starts). Later when I hover over the words, there is no hyperlink directing to another page.
Here's the code for the animation:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
p {
position: relative;
color: black;
margin: 0;
font-size: 70px;
border: 7px solid transparent;
padding: 5px;
text-decoration: line-through;
text-align: center;
}
p::before {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
}
p:hover::before {
animation: myframes 1s linear forwards;
}
#keyframes myframes {
0% {
width: 0;
height: 0;
border-top-color: black;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
p::after {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
}
p:hover::after {
animation: myframes2 1s linear forwards;
}
#keyframes myframes2 {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: black;
}
50% {
width: 0;
height: 100%;
border-top-color: transparent;
;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
}
<p>Click to Enter</p>
What's the problem?
It's because the pseudo element is positioned above the a, simply adjust z-index to fix this:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
p {
position: relative;
color: black;
margin: 0;
font-size: 70px;
border: 7px solid transparent;
padding: 5px;
text-decoration: line-through;
text-align: center;
z-index:0;
}
p::before {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
z-index:-1;
}
p:hover::before {
animation: myframes 1s linear forwards;
}
#keyframes myframes {
0% {
width: 0;
height: 0;
border-top-color: black;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
p::after {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
z-index:-1;
}
p:hover::after {
animation: myframes2 1s linear forwards;
}
#keyframes myframes2 {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: black;
}
50% {
width: 0;
height: 100%;
border-top-color: transparent;
;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
}
<p>Click to Enter</p>
By the way, you can simplify you code using gradient like below:
p {
position: relative;
color: black;
margin: 0;
font-size: 70px;
border: 7px solid transparent;
padding: 5px;
text-decoration: line-through;
text-align: center;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(to bottom right,#000 50%,transparent 50.5%) 0 0 border-box;
background-size:auto,0 0;
background-repeat:no-repeat;
transition:1s all;
}
p:hover {
background-size:auto,200% 200%;
}
<p>Click to Enter</p>
I was able to get a single triangle in the top right corner of my div by following this question and answer:
Top Right triangle in Div.
My question is how do I get another triangle in the top left as well? When I add code for the second triangle, my div comes out all messed up.
Here's what I tried.
/*TopRight (if you comment out all .TopRightTriangle you will get the TopLeft working correctly)*/
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
}
.topRightTriangle::before,
.topRightTriangle::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.topRightTriangle::before {
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
.topRightTriangle::after {
border-width: 0.5em;
border-right-color: #000;
border-top-color: #000;
}
/*TopLeft (if you comment out all .TopLeftTriangle you will get the TopRight working correctly)*/
.TopLeftTriangle {
width: 10em;
height: 6em;
position: relative;
}
.TopLeftTriangle::before,
.TopLeftTriangle::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.TopLeftTriangle::before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
}
.TopLeftTriangle::after {
border-width: 0.5em;
border-left-color: red;
border-top-color: red;
}
<div class="topRightTriangle topLeftTriangle"></div>
This is how the endDiv should look like
What about an easy way with less of code and linear-gradient:
.element {
width:300px;
height:100px;
background:
linear-gradient(to bottom left, red 50%,transparent 50%) 100% 0/50px 50px,
linear-gradient(to bottom right, green 50%,transparent 50%) 0 0/50px 50px,
linear-gradient(to bottom right, brown 50%,transparent 50%) 0 0/60px 60px,
linear-gradient(to bottom left, pink 50%,transparent 50%) 100% 0/60px 60px,
orange;
background-repeat:no-repeat;
text-align:center;
color:#fff;
font-size:40px;
}
<div class="element"> A </div>
I believe multiple before and after elements are not possible, so think you need to make an extra element overlaying. Sort of like this, but maybe it's not usable for your case? Hope it helps, sorry if it is not usable for you.
/*TopRight*/
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
}
.topRightTriangle::before,
.topRightTriangle::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.topRightTriangle::before,
.topRightTriangle::before {
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
.topRightTriangle::after,
.topRightTriangle::after {
border-width: 0.5em;
border-right-color: #000;
border-top-color: #000;
}
/*TopLeft*/
.TopLeftTriangle {
width: 10em;
height: 6em;
position: relative;
}
.TopLeftTriangle::before,
.TopLeftTriangle::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.TopLeftTriangle::before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
}
.TopLeftTriangle::after {
border-width: 0.5em;
border-left-color: red;
border-top-color: red;
}
<div class="topRightTriangle TopLeftTriangle"></div>
/*TopRight*/
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
}
.topRightTriangle::before,
.topRightTriangle::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.topRightTriangle::before,
.topRightTriangle::before {
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
.topRightTriangle::after,
.topRightTriangle::after {
border-width: 0.5em;
border-right-color: #000;
border-top-color: #000;
}
/*TopLeft*/
.TopLeftTriangle {
width: 10em;
height: 6em;
position: relative;
}
.TopLeftTriangle::before,
.TopLeftTriangle::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.TopLeftTriangle::before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
}
.TopLeftTriangle::after {
border-width: 0.5em;
border-left-color: red;
border-top-color: red;
}
<div class="topRightTriangle"><span class="TopLeftTriangle"></span></div>
Is something like this that you want?
.myDiv {
position: relative;
width: 100px;
height: 100px;
background: red;
}
.myDiv:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 10px solid gray;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid gray;
}
.myDiv:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 10px solid gray;
border-right: 10px solid gray;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
<div class="myDiv"></div>
Same effect slightly less CSS
HTML:
<div class="topRightTriangle"><div class="triangle-bg"></div></div>
CSS:
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
background: orange;
overflow:hidden;
}
.topRightTriangle:after, .topRightTriangle:before {
content: '\25b2';
font-size:20px;
position: absolute;
top: -12px;
border-color: transparent;
border-style: solid;
z-index:1;
}
.topRightTriangle:before {
color:red;
left: -4.5px;
transform: rotate(97deg) skewX(33deg) skewY(-8deg) scale(1.2) translate(-1px,0px)
}
.topRightTriangle:after {
color:black;
right: -3.5px;
transform: rotate(-97deg) skewX(-33deg) skewY(8deg) scale(1.2) translate(1px,0px)
}
.triangle-bg:before, .triangle-bg:after {
content: '';
position: absolute;
top: 0;
border: transparent solid;
}
.triangle-bg:before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
left:0;
}
.triangle-bg:after {
right:0;
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
Working on a chat bubble:
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
<div class="bubble"></div>
The onhover is currently not working for the caret part of the chat bubble. The desired result is obviously the whole chat bubble being filled up when there is an onhover event. I tried (not a CSS wiz):
.bubble:hover, .bubble:hover:before, .bubble:hover:after{
background-color: red;
}
I also tried a lot of different stuff but it doesn't seem to work. How do I fix this?
You just have to add
.bubble:hover:after {
border-color: red transparent;
}
because the small triangle is actually the border of the :after element.
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border: rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
.bubble:hover:after {
border-color: red transparent;
}
<div class="bubble"></div>
Maybe simply this:
.bubble:hover::after {
border-color: red transparent;
}
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
.bubble:hover::after {
border-color: red transparent;
}
<div class="bubble"></div>
I am trying to fade in edits to elements in CSS when an element is hovered over. Specifically changing a border from solid to dotted, by fading in the change, how do I do that?
EDIT:
Perhaps I need to be more specific about context here is my current code:
li {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: black;
border-bottom: 1px solid black;
}
li:hover {
border-bottom: 1px dotted black;
opacity: 1;
transition: opacity 1s ease-in-out;
}
Here is some CSS trickery that gives that effect. The downside being the inside cannot be transparent.
div {
position: relative;
width: 50px;
height: 50px;
display: block;
border: 3px dotted red;
background: red;
transition: 1s ease-in-out all;
}
div:after {
position: absolute;
content: ' ';
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
}
div:hover {
background: transparent;
}
<div></div>
You could place 2 divs on top of each other with different stroke types then transition them out.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
}
div {
width: 11rem;
height: 11rem;
margin: auto;
background-color: #f2f2f2;
border: 5px #bbb solid;
border-radius: 2rem;
opacity: 1;
cursor: pointer;
}
.dotted {
border: 5px #bbb dotted;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
z-index: 0;
}
.solid {
position: relative;
z-index: 1;
transition: opacity 1s;
}
.solid:hover {
opacity: 0;
}
<div class="solid"></div>
<div class="dotted"></div>
You can achieve this using pseudoelements. This version works even with transparent background. Added gradient to body to show this.
div {
position: relative;
/* just styles for demo */
width: 250px;
height: 250px;
border-width: 5px;
border-style: solid;
transition: 1s ease-in-out all;
border-radius: 10px;
}
div:after {
position: absolute;
content: ' ';
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border-width: inherit;
border-style: dotted;
border-radius: inherit;
}
div, div:after {
border-color: tomato;
}
div:hover {
border-color: transparent;
}
/* just styles for demo showing that this will work even for transparent background */
body {
background-image: linear-gradient(to bottom, transparent, #ddd);
min-height: 100vh;
margin: 0;
}
<div></div>
It's not a soo elegant solution but it goes off of 'Niet the Dark Absol's' comment on my original question. Here is the code:
li {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: black;
position: relative;
border-bottom: 1px solid transparent; /* invisible border */
}
li:before, li:after {
content: '';
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: -1px; /* same as border width */
transition: opacity 1s linear;
}
li:before {
border-bottom: 1px solid #000;
}
li:after {
border-bottom: 1px dotted #000;
opacity: 0;
}
li:hover:before {
opacity: 0;
}
li:hover:after {
opacity: 1;
}
I want to reproduce that validation.
This is what I achieved yet:
I am missing that triangle from the bottom. I want to use css/css3 to solve this. This is what I tried, but without succes:
.contact-form .parsley-errors-list .parsley-required:after{
padding: 8px;
background-color:red
margin-top: 1px;
transition: none 0s ease 0s;
position: absolute;
content: "";
left: -6px;
transform: rotate(45deg);
}
Can you guide me How do I achieve that triangle with css/css3 ? thx
Use this and see if it helps
.contact-form .parsley-errors-list .parsley-required{
position: relative;
}
.contact-form .parsley-errors-list .parsley-required:after{
content: '';
position: absolute;
top: 100%;
left: 10px;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
transition: none 0s ease 0s;
}
.arrow_box {
position: relative;
background: #FF0000;
}
.arrow_box:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: #FF0000;
border-width: 15px;
margin-left: -15px;
}
For a "straight" arrow.
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #ff0000 transparent transparent transparent;
This lets you create it using borders.