Archived topic
Want to Give a Try More
7 replies · Started by Sourabh on January 8, 2021
HI David,
Consulted with team elementor, they have shown the way of popups for sticky things, so i am trying that, however, wanted to give a try this one too -
So instead of the bottom corner how to turn top corners ??
Which line I should add for top corners OR WHAT if wish to try top and bottom both???
Suggest a line of code to add in below one...
`.sidebar.widget {
position: relative;
}
.sidebar.widget: before {
left: 5px;
transform: rotate(-5deg);
}
.sidebar.widget::after {
right: 5px;
transform: rotate(5deg);
}
.sidebar.widget::before .sidebar .widget:after {
content: '';
bottom: 10px;
height: 20px;
position: absolute;
z-index: -1;
background: transparent;
width: 50%;
box-shadow: 7px 6px 15px #333;
}`
Hi there,
you would simply switch the rotation angles and move its position from Bottom to Top like so:
.sidebar .widget {
position: relative;
}
.sidebar .widget:before {
left: 5px;
transform: rotate(5deg); /* Swap rotation */
}
.sidebar .widget::after {
right: 5px;
transform: rotate(-5deg); /* Swap rotation */
}
.sidebar .widget::before, .sidebar .widget:after {
content: '';
top: 10px; /* Swap bottom for top */
height: 20px;
position: absolute;
z-index: -1;
background: transparent;
width: 50%;
box-shadow: 7px 6px 15px #333;
}Lol, it's just showing the right corner turned, nothing on left, and even the right one requires to move a bit up..Refer below -
https://www.dropbox.com/s/r1cbyitpwtm7pem/curve.png?dl=0
Do I need to add or remove something.....??
You need to adjust the box-shadow property:
box-shadow: 7px 6px 15px #333;
the values break down to: horizontal, vertical, blur, color.
Set the horizontal to: 0 this will center align the shadows, currently 7px casts the shadow to the right:
Set the vertical to: -6px this will cast the shdaow upwards.
Tweak those values to suit.
Fine, It was helpful and adjusted, only facing problem in changing the color of shadow, as you said #333 (Black) is shadow color which I am trying to change to rgba(202,207,214,.532534), but it's not working, So Guide me if I am giving wrong value ??
If yes then correct the value input (It's for shadow color)...
Use the CSS Generator i linked you to before:
https://cssgenerator.org/box-shadow-css-generator.html
It will create the exact RGBA code in the box-shadow property you require.
Okay, Thanku David
You're welcome
