CODEWITHSUNDEEP
htmlcss
Morris
Morris

Reputation: 189

css Fade out box-shadow on edge

for school i need to make a exact replica of a website and im stuck on a part where i need to (i think) add box shadow, but the shadow fades out on the edges and i do not know how to do this myself, so does anyone know how to do this?

i have a field of text and the top and bottom have a border line/shadow and it fades out at the edges.

this is what i need to replicate

my css code:

#ReaderSlideshow{
display: flex;
justify-content: space-around;
margin-top: 50px;
border-bottom: 1px solid black;
border-top: 1px solid black;
}

my html:

<div id="ReaderSlideshow">
    <img src="img/Backarrow.png" alt="Backarrow" width="22px">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem  Ipsum has been the industry's standard dummy text.     </p>
    <img src="img/forwardarrow.png" alt="forwardarrow" width="22px">
</div>

this is how it is supposed to look like This is what i made

Upvotes: 2

Views: 4155

Answers (4)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

From what I could tell by the image, #ReaderSlideshow has a gradient as well as it's border. I was going to suggest pseudo-elements (::before and ::after) but the flex will mess it up, so I had to add a container with padding instead. The container has the gradient of the "borders" and #ReaderSlideshow uses another gradient.

I also added a CSS variable in order to be slightly more dynamic.

body {
  --background-color: #e7e8ea;
  background-color: var(--background-color);
}

.slideshow-container {
  margin-top: 50px;
  padding-top: 2px;
  padding-bottom: 2px;

  background: linear-gradient(to left, var(--background-color) 0%, #dfe0e1 50%, var(--background-color) 100%);
}

#ReaderSlideshow {
  display: flex;
  
  padding: 0.5rem;

  background: linear-gradient(to left, var(--background-color) 0%, #ecedee 50%, var(--background-color) 100%);
}

#ReaderSlideshow > p {
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
}

#ReaderSlideshow > p {
  margin: 0px;
  flex: 1 1 auto;
  padding: 0px 2rem;
}
<body>
  <div class="slideshow-container">
    <div id="ReaderSlideshow">
       <img src="img/Backarrow.png" alt="⤆" width="22px">
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem  Ipsum has been the industry's standard dummy text.     </p>
       <img src="img/forwardarrow.png" alt="⤇" width="22px">
    </div>
  </div>
</body>

Upvotes: 1

itsMasoud
itsMasoud

Reputation: 1375

All you need to do is to add a wrapper div to your DOM and then implement a radial-gradient to it.

Note: In your comment you said cannot implement gradient on border; Just for the record, that's not a border, that's a box-shadow implemented on top and bottom of your div.

.wrapper {
  width: 100%;
  height: content;
  padding: 20px 0;
  overflow: hidden;
  margin: 0;
  background: radial-gradient(circle, rgba(231,232,234,0.896796218487395) 0%, rgba(174,175,177,1) 100%); /* this line does the trick */
}

#ReaderSlideshow{
  display: flex;
  justify-content: space-around;
  box-shadow: 0px 1px 5px #aeafb1, 0px -1px 5px #aeafb1;
}
<div class="wrapper">
	<div id="ReaderSlideshow">
		<img src="img/Backarrow.png" alt="Backarrow" width="22px">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem  Ipsum has been the industry's standard dummy text.     </p>
		<img src="img/forwardarrow.png" alt="forwardarrow" width="22px">
	</div>
</div>

Here you can find a good explanation on CSS Radial Gradient.

And Here is a Box Shadow tutorial.

Upvotes: 2

Mileta Dulovic
Mileta Dulovic

Reputation: 1064

Here you go

hr { 
  display:block;
    border:none;
    color:white;
    height:1px;
    background:black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
}

This is using gradient on hr element. You can add more prefixes for other browsers but this should work :)

Play with numbers and colors. You will find gradient very powerfull thing in CSS

Upvotes: 0

Chris
Chris

Reputation: 1321

.bg {
background-color: blue;
width: 500px;
height: 500px;
}

.inner{
position: absolute;
margin-left: 200px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: white;
-webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 2px 6px 4px -4px black;
}
<div class = "bg">
  <div class = "inner">
  </div>
</div>

Upvotes: 0

Related Questions