[Resolved] Help to make look material design

Home Forums Support [Resolved] Help to make look material design

Home Forums Support Help to make look material design

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1365869
    William

    Hi there,
    I really like the fact the content wrapper has a material design look to it on post pages like this. Is there a way to give a material design to affect the dark purple area on the site?

    Kind regards,

    Will

    #1366037
    Leo
    Staff
    Customer Support

    Hi there,m

    What do you mean by material design?

    #1366523
    William

    Hi there,

    Material design is a new approach to making things with shadows/layers etc.

    There’s good information on here, and all the big tech giants are pushing for material design all the time:

    https://material.io/design

    #1366900
    Leo
    Staff
    Customer Support

    Sorry I’m not really sure what I’m looking at here.

    Can you be a little more specific and let me know what exactly you’d like to add to the dark purple area here?

    Adding shadows?

    #1366947
    William

    Hi Leo,
    Sorry for being vague. I think the ‘Material’ design would include CSS on areas such as:

    – Box shadows to show hierarchy. To shadows to show that the dark purple element is above the light purple area

    – increase the length of the purple area so that the content wrapper appears above the dark purple area

    I hope that makes sense?

    #1367084
    Leo
    Staff
    Customer Support

    Try this CSS for shadow:

    .page-hero {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    }

    https://www.cssmatic.com/box-shadow

    #1368448
    William

    That’s the idea! But could it have a shadow around the whole of the dark purple element similar in style to how it is in the content wrapper?

    #1368755
    Leo
    Staff
    Customer Support

    Have you tried tweaking the shadow with the cssmatic website I linked above?

    Or am I missing something?

    #1368827
    William

    Hi there,
    I have thank you – the bottom looks good. However, for the top of the element and menu it does not have similar shadow?

    #1368848
    Leo
    Staff
    Customer Support

    Hmm I don’t see a way to apply a shadow following that outline you’ve shown above unfortunately.

    There is no way to include the shadow from the bottom of the menu link:
    https://www.screencast.com/t/YdVBWUp2

    #1369033
    William

    Okay, thank you very much for helping anyway!

    #1369162
    Leo
    Staff
    Customer Support

    No problem 🙂

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