CODEWITHSUNDEEP
css
Hiba RRRR
Hiba RRRR

Reputation: 209

Shadow between two divisions in the CSS

enter image description here

I am creating a site in order to monitor employees, and there are many interfaces within the site, and from these interfaces there is an interface to add a project, which is the interface shown in the image and as shown in the image there are two sections in the interface, the first part is colored in white and the second section is colored in blue. How can I create shadow between the two sections?

   <template>
      <v-app>
        <div class="mainPage">
          <!-- right section -->
          <div class="split left">
            <div class="left_body_content">
              <div class="left-body-content_logo">
                <img class="logo" src="../../../../src/assets/logo_base.png" />
              </div>
    
              <div class="left-body-content_illustrationImage">
                <v-img src="../../../../src/assets/create.svg"></v-img>
              </div>
            </div>
          </div>
    
          <div class="split-1 right">
            <div class="right_body_content">
              <div class="right_body_content_text">
                <div class="text">
                  <h1>Create project</h1>
                </div>
              </div>
    
              <div class="right_body_content_field">
                
    
                        <v-text-field
                  label="Project Name"
                  v-model="project_Name"
                  color="#5f48ea "
                  class="field"
                  >{{ project_Name }}
                  </v-text-field
                >
              </div>
              
              <div class="right_body_content_button">
    
              </div>
            </div>
          </div>
        </div>
      </v-app>
    </template>
    
    <style scoped>
    .mainPage {
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
    }
    
    .split {
      height: 100%;
      width: 66%;
      position: fixed;
      z-index: 1;
      top: 0;
      overflow-x: hidden;
    }
    
    .left_body_content {
      display: flex;
      width: 100%;
    }
    
    .left {
      left: 0;
      background-color: #fff;
    }
    
    .left-body-content_logo {
      display: flex;
      width: 18%;
      padding-left: 2rem;
    }
    
    .logo {
      display: flex;
      width: 100%;
      z-index: -1;
    }
    
    .left-body-content_illustrationImage {
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      background-size: cover;
      background-position: center;
      z-index: -1;
      width: 90%;
      height: 100%;
      position: absolute;
      padding-top: 7rem;
      padding-left: 5rem;
    }
    
    .split-1 {
      height: 100%;
      width: 34%;
      position: fixed;
      z-index: 1;
      top: 0;
      overflow-x: hidden;
      padding-top: 2rem;
    }
    
    .right_body_content {
      display: flex;
      width: 100%;
      height: 100%;
    }
    
    .right_body_content_text {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
      width: 90%;
      height: 50%;
      padding-left: 2rem;
    }
    
    .text {
      display: flex;
      font-family: Aviliator;
      color: #5f48ea;
    }
    
    .right_body_content_field{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        width: 25%;
        height: 100%;
        padding-left: 2.5rem;
    
    }
    
    .field{
        display: flex;
        width: 40%;
        height: 30%;
    }
    
    .right {
      right: 0;
      background-color: blue;
    }
    </style>

Upvotes: 0

Views: 80

Answers (2)

GMAC
GMAC

Reputation: 868

Here I have created two div's and for shadow using:

box-shadow: /* offset-x | offset-y | blur-radius | spread-radius | color */


.first {
  background-color: rgba(0, 0, 0, 0);
  width: 500px;
  height: 100px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  margin: 5px;
}

.second {
  background-color: rgba(0, 0, 255, 1);
  width: 500px;
  height: 100px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
<div>
  <div class="first">

  </div>
  <div class="second">

  </div>
</div>

Upvotes: 0

Abhinav Bhutani
Abhinav Bhutani

Reputation: 176

Add class shadow to the div having class split-1 and define shadow class in styles as

.shadow{
  -webkit-box-shadow: -3px 0px 0px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, 
  -moz-box-shadow:    -3px 0px 0px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         -3px 0px 0px #ccc;  /* IE 9, Firefox 4+, Chrome 6+ */
}

this will add a shadow of 3px to the left of the div with class shadow

You can read more about box-shadow here - https://css-tricks.com/almanac/properties/b/box-shadow/

Upvotes: 2

Related Questions