[Resolved] Want to Give a Try More

Home Forums Support [Resolved] Want to Give a Try More

Home Forums Support Want to Give a Try More

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1610651
    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;
    }`

    #1611088
    David
    Staff
    Customer Support

    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;
    }
    #1611149
    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…..??

    #1611624
    David
    Staff
    Customer Support

    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.

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

    #1611936
    David
    Staff
    Customer Support

    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.

    #1612283
    Sourabh

    Okay, Thanku David

    #1612386
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.