I am trying to build a parallelogram background that only appears on hover in a menu item. For the shape, I am using :before and :after pseudo-elements, however I cannot apply the same transition effect on them. Does anyone knows what could I do to solve this problem?
Here is the code until the moment:
div {
float:left;
background-color:#fff;
margin: 20px;
transition:.5s;
}
.testClass {
margin-top: 0px;
margin-left: 0px;
padding: 5px 10px;
display: block;
background-repeat: no-repeat;
background: #fff;
position: relative;
transition:.5s;
}
.testClass:hover {
background: gold;
transition:.5s;
}
.testClass:hover:before {
content: '';
position: absolute;
top:0;
left:-15px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 29px 15px;
border-color: transparent transparent gold transparent;
}
.testClass:hover:after {
content: '';
position: absolute;
top:0;
right:-15px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 15px 0 0;
border-color: gold transparent transparent transparent;
}
<div >
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>
</div>
What about an easier way with only one element to create the shape:
div {
float: left;
margin: 20px;
transition: .5s;
}
.testClass {
margin-top: 0px;
margin-left: 0px;
padding: 5px 10px;
display: block;
background: #fff;
position: relative;
transition: .5s;
z-index: 0;
}
.testClass:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: -10px;
right: -10px;
bottom: 0;
opacity: 0;
background: gold;
transform: skew(-20deg);
transition: .5s;
}
.testClass:hover::before {
opacity: 1;
}
<div>
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>
</div>
Related
The code below should produce a simple ribbon, 3D-effect is achieved by CSS pseudo-elements. But for some reason, the visual effect isn't working correctly because the left and right "wings" of the ribbon shoud appear behind the front part, but actually they appear in front of it. Somehow, the z-indexes (+1, -1) are not working as expected. Checked out z-index not working on pseudo-element but couldn't trace down the issue.
/* Color definitions */
:root {
--color-orange: hsla(26, 83%, 50%, 1);
--color-orange-darkened: hsl(26, 71%, 44%);
}
body {
padding: 2em;
}
.shc-ribbon {
z-index: 1;
}
.shc-ribbon span {
height: 40px;
line-height: 40px;
margin: 0 auto;
text-align: center;
font-size: 20px;
}
.shc-ribbon span {
position: relative;
display: block;
background: var(--color-orange);
color: white;
text-align: center;
-webkit-box-sizing: border-box;
-webkit-transform-style: preserve-3d;
height: 40px;
line-height: 40px;
margin: 0 auto;
}
.shc-ribbon span::before,
.shc-ribbon span::after {
content: "";
position: absolute;
display: block;
top: -10px;
border: 20px solid var(--color-orange-darkened);
z-index: -1;
}
.shc-ribbon span::before {
left: -30px;
border-left-color: transparent;
}
.shc-ribbon span::after {
right: -30px;
border-right-color: transparent;
}
.shc-ribbon span h3::before,
.shc-ribbon span h3::after {
content: "";
position: absolute;
display: block;
border-style: solid;
top: -10px;
border-color: transparent transparent #272727 transparent;
}
.shc-ribbon span h3::before {
left: 0;
border-width: 0 0 10px 10px;
}
.shc-ribbon span h3::after {
right: 0;
border-width: 0 10px 10px 0;
}
<div class="shc-ribbon">
<span>
<h3>WELCOME</h3>
</span>
</div>
change your html code to code below:
<div class="shc-ribbon">
<span>
<h3 style="background-color: hsla(26, 83%, 50%, 1)">WELCOME</h3>
</span>
</div>
I have made a little pop up when I hover over a square but I want to go to this popup even with an existing margin.
Here is a snippet with my HTML and CSS code:
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 120%;
margin-left: -5px;
border-radius: 5px;
border: solid black 1px;
color: white;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
Here is an example (if you don't follow the arrow the popup will close):
https://jsfiddle.net/bpez64fr/
I want to ignore the margin and allow the user to go to the popup and make it work as if there was no margin
My strategy would be to put the element to be shown on hover at left:100% so that there's no gap for the cursor to "fall in". You can then use padding on this element to create the visual whitespace between the main element and the hover element, and put the element's content in an inner element .info-inner in my example. Note that .info-inner must be position:relative for the positioning of the .arrow to work.
Let me know if this works for you.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 100%;
padding-left: 10px;
}
.info-inner {
border-radius: 5px;
border: solid black 1px;
color: white;
position: relative;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="info-inner">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
</div>
There are several ways to do this but here is one example.
It simple positions the element next to the previous one without a gap.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: 3px solid lightgrey;
position: relative;
}
.infoWrap {
opacity: 0;
position: absolute;
top: -3px;
left: 100%;
padding: 0 10px;
transition: all ease-in-out 0.2s;
}
.info {
position: relative;
background: #eee;
border: solid #aaa 1px;
border-radius: 5px;
color: #666;
width: 100%;
min-height: 53px;
padding: 10px;
}
.vertical:hover .infoWrap {
opacity: 1;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #aaa transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="infoWrap">
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="arrow"></div>
</div>
</div>
</div>
You can use the css transitions property to delay the invisibility of the element.
Example:
.info{ transition: visibility 2s ease-out;}
Updated jsFiddle
In this latter example, I increased the distance to the pop-up to improve the demo:
UPDATED Updated jsFiddle
CSS transitions allow you to delay the advent/removal of a css modification to the DOM, giving the user time to slide the mouse from the box to the pop-up.
References:
https://css-tricks.com/almanac/properties/t/transition-delay/
https://www.w3schools.com/cssref/css3_pr_transition-delay.asp
I am trying to make slanted box shadow on both sides of a div, which I have added here as an image.
The red part is indicating here shadow. actually color is not solid, it should gradually decrease when it is moving to outside from border.
Here is my contribution hope it gives you a baseline.
.box {
width: 150px;
height: 200px;
position: relative;
padding-left: 25px;
padding-right: 25px;
}
.box-content {
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background-color: white;
border: 2px solid black;
width: 100%;
height: 100%;
position: relative;
}
.box::before {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-right: 25px solid red;
position: absolute;
left: 0;
bottom: 0;
}
.box::after {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-left: 25px solid red;
position: absolute;
right: -4px;
bottom: 0;
}
<div class="box">
<div class="box-content">
Box
</div>
</div>
Try this:
div{
width: 200px;
height: 200px;
border:1px solid black;
background: white;
}
div:before{
content:' ';
display:block;
width: 200px;
height:200px;
background: linear-gradient(transparent, black);
position: fixed;
transform: matrix3d(1.1,0,0.00,0,0.00,0.71,0.71,0.0007,0,-0.71,0.71,0,0,37,0,1); z-index: -1;
}
<div>Hello</div>
Using transform: skew() applied to the div's before and after
jsFiddle 1
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background-color: red;
transform: skew(5deg, 0);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
EDIT : to give the shadow effect some real blur with gradient and transparency, we could make use of linear-gradient background with two rgba() values, as well as CSS blur() (1) filter.
jsFiddle 2
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
transform: skew(5deg, 0);
filter: blur(2px);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
Notes:
(1) browser support for CSS filter
I have two boxes one on top and one on left.
I'm using :after attribute to add line (border) after div.
First thing I want to do is to "join" both red borders.Right now there is empty gap between them, but if I change #toolbar::after left to '15px' I get that unwanted green line between red lines - can this be fixed?
Another thing is hovering over sidebar. After I move mouse cursor over sidebar it is moving to left:0, but border around toolbar isn't moving. Can I modify toolbar border after I hover over sidebar?
Below is sample code that illustrates my problem
html {
background: #e6e6e6;
}
#sidebar, #toolbar {
position: fixed;
top: 0;
left: 0;
}
#toolbar {
z-index: 102;
height: 50px;
right: 0;
text-shadow: 0 -1px 0 #000000;
background: #222222;
}
#sidebar {
z-index: 103;
bottom: 0;
width: 80px;
margin-top: 50px;
background: black;
left: -60px;
transition: all 0.2s ease;
transform: translateZ(0);
}
#sidebar:hover {
left: 0;
}
#sidebar::after {
content:'';
bottom: 0;
width: 4px;
position: absolute;
right: 0px;
top: 0;
display: block;
border-right: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
#toolbar::after {
content:'';
right: 0;
height: 4px;
position: absolute;
left: 20px;
bottom: 0;
display: block;
border-bottom: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="toolbar"></div>
<div id="sidebar"></div>
You can use box-shadow instead of a border box-shadow: 5px 1px 0px 0px green;
Note :- I have changed the html structure for the pseudo element to move to left when hovered on sidebar
html {
background: #e6e6e6;
}
#sidebar,
#toolbar {
position: fixed;
top: 0;
left: 0;
}
#toolbar {
z-index: 102;
height: 50px;
right: 0;
text-shadow: 0 -1px 0 #000000;
background: #222222;
}
#sidebar {
z-index: 103;
bottom: 0;
width: 80px;
margin-top: 50px;
background: black;
left: -60px;
transition: all 0.2s ease;
transform: translateZ(0);
}
#sidebar:hover {
left: 0;
}
#sidebar::after {
content: '';
bottom: 0;
width: 4px;
position: absolute;
right: 0px;
top: 0;
display: block;
border-right: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
#toolbar::after {
content: '';
right: 0;
height: 4px;
position: absolute;
left: 15px;
bottom: 0;
display: block;
background: red;
-webkit-box-sizing: initial;
box-shadow: 5px 1px 0px 0px green;
transition: all 0.2s ease;
}
#sidebar:hover + #toolbar::after {
left: 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id="sidebar"></div>
<div id="toolbar"></div>
This is my code
CSS
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
}
#box1 {
position: relative;
width: 500px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: 250px;
text-align: justify;
-webkit-transition: all .75s;
font-size: large;
color: Black;
padding: 10px;
background: #D0D0D0;
opacity: 0;
}
#-webkit-keyframes myFirst {
0% {
right: 300px;
top: 160px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
:;
right: 300px;
top: 200px;
opacity: 1;
}
}
#littlebox1 {
top: 200px;
position: absolute;
display: inline-block;
}
.littlebox1-sentence {
font-size: large;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
padding-right: 10px;
background: #D0D0D0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: background .25s ease-in-out;
}
#bothcontainer:hover ~ #box1 {
-webkit-transition: all 0s;
background: #909090;
:;
right: 300px;
top: 200px;
-webkit-animation: myFirst .75s;
-webkit-animation-fill-mode: initial;
opacity: 1;
}
#bothcontainer:hover .littlebox1-sentence {
background: #909090
}
#bothcontainer:hover .triangle {
border-right: 25px solid #909090
}
.triangle {
position: relative;
width: 0;
height: 0;
border-right: 25px solid #D0D0D0;
border-top: 27px solid transparent;
border-bottom: 24px solid transparent;
right: 184px;
-webkit-transition: border-right .25s ease-in-out;
}
HTML
<body dir="rtl">
<div id="page">
<div id="bothcontainer">
<div id="littlebox1" class="littlebox1-sentence">put your mouse here</div>
<div id="littlebox1" class="triangle"></div>
</div>
<div id="box1"></div>
</div>
I want to add a border to the triangle, to .littlebox1-sentence.
The border will not change its color.
Here is a fiddle
I have come closer to finding the solution, but it still is not where I want it.
Fiddle
I'm not exactly sure what effect you're after, but I'd have a look at -webkit-filter. It allows you to add a shadow to "this element and any children it has, regardless of shape".
#littlebox1 {
top: 200px;
position: absolute;
display: inline-block;
-webkit-filter: drop-shadow(green -10px 0 10px);
}
http://jsfiddle.net/DyxA4/
Another solution: skip the border-based triangle and use three divs instead:
<div class="sign">
<div class="arrow"><div></div></div>
<p>Lorem ipsum dolor</p>
</div>
Basically, we use ".arrow div" to create the triangle, and ".arrow" the cut off the bits we don't need:
http://jsfiddle.net/k5J6M/1/
The triangle IS the border. You can't do what you're asking. Just make an image.