[Resolved] Want to Give a Try More

[Sourabh]

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;
}`

[David]

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;
}

[Sourabh]

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…..??

[David]

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.

[Sourabh]

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)…

[David]

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.

[Sourabh]

Okay, Thanku David

[David]

You’re welcome

[Author]

Posts