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.
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 have a few SVG glyphs whitch i need to draw with HTML.
Is it possible to create HTML with CSS so that it looks like the SVG?
My problem was the shadow at the arrows.
You could use clip-path for the arrows (and its shadow too) and pseudoelements with a box-shadow for the figure with the overlapped boxes
Codepen example
Markup
<div class="arrow">Arrow</div>
<div class="boxes">Boxes</div>
Css
.arrow {
height: 55px;
width: 250px;
position: relative;
line-height: 55px;
padding: 0 35px;
}
.arrow::before, .arrow::after {
content: "";
display: block;
height: inherit;
width: inherit;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: #666;
clip-path: polygon(0 0, 25px 50%, 0% calc(100% - 5px), 85% calc(100% - 5px), 100% 50%, 85% 0);
}
.arrow::after {
transform: translate(5px, 5px);
opacity: .25;
}
.boxes, .boxes::before, .boxes::after {
position: relative;
background: #f2f2f2;
height: 180px;
width: 180px;
border-color: #999;
border-style: solid;
border-width: 1px;
border-top-width: 2px;
border-right-width: 2px;
box-shadow: 3px 4px 0 #ccc;
}
.boxes::before, .boxes::after {
content: "";
position: absolute;
display: block;
}
.boxes::after { top: -12px; left: 4px; z-index: -1; }
.boxes::before { top: -20px; left: 14px; z-index: -2; }
The other two figures can be obtained with the same approach (they are just a simple change of size and colours)
Result
here is one of shape:
body{
padding:20px;
}
div {
position:relative;
display: inline-block;
background: red;
position:relative;
padding: 9px;
padding-right: 22px;
}
div:before {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent red transparent transparent;
position: absolute;
left: -15px;
top: 1px;
}
div:after {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent white transparent transparent;
position: absolute;
left: 93px;
top: 0px;
}
<div class="triangle">Hello world </div>
I have tried to tweak the CSS from
http://jsfiddle.net/wn7JN/ to place an arrow in a <div> in the top left corner (see image below), but I can't seem to figure out how :before and :after in CSS work. Every time I update the bottom and left parameters I am left with a black arrow in the top left corner - I think the proper rotation is transform: rotate(220deg) but that is really a guess.
Edit: Is it possible to do this same CSS trick with an rgba color such as rgba(255, 123, 172, 0.25)? When I test it out the transparency becomes an issue with the border overlap.
Any help would be greatly appreciated.
.bubble {
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after {
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
<div class="bubble"> </div>
Try like this. Added a working copy.
.bubble {
position: relative;
background:#cbe8f0;
height: 100px;
width:170px;
margin-left:30px;
border-radius:2px;
}
.bubble:after{
content:'';
position:absolute;
border:10px solid transparent;
border-top:10px solid #cbe8f0;
top:0px;
left:-10px;
}
<div class="bubble"> </div>
You can ty this solution too based on the jsfiddle.
.bubble:after
{
content: "";
position: absolute;
top:0px;
left: -21px;
border-style: solid;
border-width: 24px 0px 0px 28px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top:-1px;
left:-23px;
border-style: solid;
border-width:20px 0px 0px 23px;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
http://jsfiddle.net/wn7JN/1295/
So, here's your bubble code:
.bubble {
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Add this line to the bottom of that: margin-left:25px; This allows there to be room to the side of your bubble for the arrow to even show up. Otherwise, it's there, but you can't see it.
for your bubble:after, change the bottom: -25px to top: 21px and change left: 175px to left: -37px, and add transform: rotate(90deg); to the bottom.
for your bubble:before, change the top: 250px to top: 20px and change left: 174px to left: -39px, and add transform: rotate(90deg); to the bottom.
You will wind up with something like this:
1
Final fiddle: http://jsfiddle.net/eq6mhbwy/
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;
}
How can I create a down arrow for parent in css so it would look like a speech bubble?
This is what I tried.
<div class="parent">TEST
<span class="tri">TEST</span>
</div>
.tri {
opacity: 0;
}
.tri:before {
position: absolute;
top: 40%;
left: 50%;
margin-top: -15px;
margin-left: -100px;
background-color: #FFF;
color: #000;
text-align: center;
padding: 10px;
min-width: 200px;
}
.tri:after {
border-top: 5px solid #000;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.parent:hover .tri:before, .parent:hover .tri:after {
opacity: 1;
}
Fiddle
You are missing 2 things here :
content:''; for the pseudos
show the parent pseudo
:before,
:after {
content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
opacity: 1;
}
:before,
:after {
content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
opacity: 1;
}
.tri {
opacity: 0;
}
.tri:before {
position: absolute;
top: 40%;
left: 50%;
margin-top: -15px;
margin-left: -100px;
background-color: #FFF;
color: #000;
text-align: center;
padding: 10px;
min-width: 200px;
}
.tri:after {
border-top: 5px solid #000;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
<div class="parent">TEST
<span class="tri">TEST</span>
</div>
https://fiddle.jshell.net/0h05kbsd/3/
you could also spare some code using an unicode character like \25bc:
a:hover:after {
content:'\25bc';
}
<a href> link to hover to show a down-arrow</a>
unicode ressource among others : http://unicode-table.com/en/sets/arrows-symbols/
Like this?
.tri {
opacity: 1;
display: block;
}
.tri:after {
content: '';
display: inline-block; width: 10px; height: 10px;
margin: -5px 0 0 10px; padding: 0;
border: 5px solid #000;
border-width: 0 3px 3px 0;
background: transparent;
transform: rotate(45deg);
}
Make an angle with two borders and then rotate it 45 degrees or where ever you need it to point to. Important: a :after or :before pseudo element always needs a content: '' property, even it just an empty string. Otherwise the pseudo element will not show.
More elaborate examples of entire speech bubbles are easily found, this fiddle, for example.
You can use clip-path as an alternate for the border shape ,
div:before {
content: '';
position: absolute;
display: block;
left: -20px;
top: 6px;
width: 20px;
height: 20px;
background-color: #888;
-webkit-clip-path: polygon(0 50%, 100% 0 , 100% 100%)
}
div {
width: 150px;
height: 50px;
background-color: #999;
margin-left: 40px;
border-radius: 4px;
position: relative;
}
div:before {
content: '';
position: absolute;
display: block;
left: -20px;
top: 6px;
width: 20px;
height: 20px;
background-color: #999;
-webkit-clip-path: polygon(0 50%, 100% 0 , 100% 100%)
}
<div></div>