How Can i One side black in website header through HTML and CSS-CodePudding

how can one side black with some side box-shadow look like an image through HTML and CSS??

Advanced thanks and love.

CodePudding user response：

As I understood your question, you meant like below image, right?

So code for that,

HTML

<div >
  <div >
    <div >
    <h1>Pushpa - The Rise</h1>
    </div>
    <div >
    </div>
  </div>
</div>

CSS

*{
  margin: 0;
}

.hero {
  display: flex;
  justify-content: center !important;
  align-items: center;
  background: #10151e;
}

.image{
  display: flex;
  margin: 0 5%;
  background: linear-gradient(to right, rgba(16, 21, 30, 1),rgba(16, 21, 30, 0.95), rgba(16, 21, 30, 0.25), rgba(16, 21, 30, 0.2)), url('https://www.sify.com/uploads/Pushpa_vd0m26dcijffe.jpg');
  height: 500px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.section{
  flex: 1;
}

.image h1{
  color:white;
  padding-top:5%;
  font-size: 30px;
}

Feel free to ask if there any issue :)

CodePudding user response：

To give this effect use background image, z-index, position property

background-image: linear-gradient(90deg, black 45%, transparent 100%); Which gives that one side black effect and transparent on the image side.

For Image

position: absolute; This allows you to position the element at the right even if the width of that background-image is 100%

For outerdiv

position: relative; This property won't let the image get outside the outerdiv area

For image

z-index: -1; This pushes back the image and pull the background at the front

div{
  width: 100%;
  height: 500px;
  background-image: linear-gradient(90deg, black 45%, transparent 100%);
   z-index: 10;
}

.outerdiv{
  position: relative;
}

h1{
  color: white;
  font-family: youtube sans, montserrat;
  font-weight: 500;
  margin: 0px 30px;
  padding-top: 30px;
}

img{
  position: absolute;
  width: 60%;
  height: 100%;
    float: right;
  z-index: -1;
  top:0;
  right: 0;
}

p{
  color: white;
  width: 40%;
  font-family: poppins;
  font-weight: 300;
  margin-left: 30px;
}

<div >
<div>
  <h1>
    Pushpa: The Rise (Telugu)
  </h1>
  <p>Pushpa Raj (Allu Arjun) a coolie, volunteers to smuggle red sanders, a rare wood that only grows in Andhra, with the help of novel ideas to smuggle the red sanders. Pushpa quickly becomes leader of red sanders smuggling network. While Pushpa is at his prime, a ruthless police officer Bhanwar Singh Shekhawat (Fahadh Faasil) takes charge as SP and ridicules Pushpa for his lineage.
</p>
</div>
<img src="https://akm-img-a-in.tosshub.com/businesstoday/images/story/202112/pushpaa-sixteen_nine.jpeg?size=948:533">
</div>