[Support request] How to get The shadow effect and rounded corners with this site?

Home Forums Support [Support request] How to get The shadow effect and rounded corners with this site?

Home Forums Support How to get The shadow effect and rounded corners with this site?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1946235
    Cristiano

    Hi,

    I’m trying to get The shadow effect and rounded corners with this site below:

    I sent inspiration site in the sensitive area.

    To try to get to the current post layout, I’m using, the “Base” from the Cards style dropdown.

    I was able to format the cards (meta category position and style) using this information from this topic, Through your support

    https://wpshowposts.com/support/topic/formatting-of-cards/

    I’m using:

    Latest version of the theme: 3.0.4
    The Premium GP Plugin • Version: 2.0.3
    The WP Show Posts Pro – Developer – 1.2.0

    I sent inspiration site in the sensitive area, for you to review

    thank you very much for your attention

    #1946271
    Leo
    Staff
    Customer Support

    Hi there,

    Are you trying to add the effect to content from WPSP?

    If so please open a support topic in WPSP pro’s support forum:
    https://wpshowposts.com/support/area/pro-support/

    Let me know if I’m missing something here 🙂

    #1946290
    Cristiano

    Hi Leo, thanks for your attention!

    I’m going to use WPSP, but I’m also going to use it on category files (GP-premium), which have been set up for Display posts in columns.

    I open the thread on wpshowposts.

    https://wpshowposts.com/support/topic/how-to-get-the-shadow-effect-and-rounded-corners-with-this-site/

    Thank you very much!

    #1946298
    Leo
    Staff
    Customer Support

    Can you link us to the page in GP that you are referring to here?

    Please use the private info field.

    #1946302
    Cristiano

    I sent the information in the sensitive area, thanks

    #1946494
    Elvin
    Staff
    Customer Support

    I’ve answered the one on WPSP forums.

    As for GP, try adding this CSS:

    main#main article.post:hover {
        -webkit-transform: translate(3px,-3px);
        transform: translate(3px,-3px);
    }
    main#main article.post {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: visible;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        min-height: 0;
        z-index: 0;
        border-radius: 0;
    }
    
    main#main article.post:hover:after {
        -webkit-transform: translate(-10px,10px);
        transform: translate(-10px,10px);
    }
    main#main article.post:after {
        background-size: 6px 6px;
        background-position-y: bottom;
        background-image: -webkit-linear-gradient(
    315deg,rgba(13,13,13,.5) 15.11%,rgba(255,255,255,0) 15.11%,rgba(255,255,255,0) 50%,rgba(13,13,13,.5) 50%,rgba(13,13,13,.5) 64.11%,rgba(255,255,255,0) 64.11%,rgba(255,255,255,0) 100%);
        background-image: linear-gradient(
    135deg,rgba(13,13,13,.5) 15.11%,rgba(255,255,255,0) 15.11%,rgba(255,255,255,0) 50%,rgba(13,13,13,.5) 50%,rgba(13,13,13,.5) 64.11%,rgba(255,255,255,0) 64.11%,rgba(255,255,255,0) 100%);
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -2;
        top: 0;
        left: 0;
    }

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.