cPanel Question posted in
The official documentation can be seen here.

How to put a different style shadow under the Header? – CPanel

How can i put a shadow under the header like this one?

enter image description here

https://www.000webhost.com/login-cpanel

I know that i can put a box-shadow but i want a shadow similar to that of 000webhost.

How can i do it?

Tags:

2

Answers


  1. 0

    If you inspect the page you’ll see the shadow belong to :after selector of CSS. Look on the background property you see it inserts image as background.

    image

    So, that shadow is created by image. No special CSS skills required in here.

    Login or Signup to reply.
  2. 0

    It’s an image positioned off the bottom edge of DIV.holder

    #header .holder:after {
    left: 0;
    right: 0;
    bottom: -21px;
    content: '';
    height: 21px;
    display: block;
    position: absolute;
    background: url(https://www.000webhost.com/static/default.000webhost.com/images/shadow.png) no-repeat;
    background-size: 100%;
}

    It might be possible to mimic that effect with layered box-shadows instead of images but it would be ugly and unwieldy code.

    The only relatively elegant way to do it without using a separate image is to create a small SVG shadow and then embed that SVG code directly into your CSS background. Tools like https://yoksel.github.io/url-encoder/ make this fairly easy.

    Here’s a quick codepen showing it in action. https://codepen.io/alexmwalker/pen/ZMVNbo

    The SVG lacks some of the visual subtlety of the original PNG, but it scales better and removes the need for an extra asset from the process. Plus you can change the shadow color with a text editor.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search