[ANSWERED] html – Css Advanced Box Shadow

Question 1

Yes it’s possible, I recommend that you learn box-shadow property first, and play with the div tag.
the syntax for that is:

box-shadow: x-direction y-direction blur color;

here’s my attempt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top-shadow {
            margin-top: 100px;
            background-color: white;
            height: 100px;
            box-shadow: 0 10px 10px #C0B6B6;
        }

        .right-shadow {
            box-shadow: 3px 1px 1px #C0B6B699;
            height: 1000px;
            margin: -100px;
            width: 80%;

        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="top-shadow"></div>
    <div class="right-shadow"></div>
</body>
</html>

result

hope that it’s help

Question 2

Yes There is possible of do that . In internet there are different tools show you could generate any kind of shadow and edit as you want .

    <div id="demoObject">Edit this text</div>

Here is just a example 
#demoObject {
  margin: 10%;
  width: 500px;
  height: 100px;
-webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, -14px 50px 0px 29px rgba(0,0,0,0); 
box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, -14px 50px 0px 29px rgba(0,0,0,0);
background: #ECEFCF;
}
body#tinymce {
background: #FFFFFF
}

here is a link where you can generate different kin of box shadow

Question 3

Is it possible to make bellow by css?. I’m trying to use box shadow but 2 days with no result , please help me

Bollate

[ANSWERED] html – Css Advanced Box Shadow

By

Solution 1 :

here’s my attempt

result

Solution 2 :

Problem :

Comments

Comment posted by tacoshy

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate