Question 244027 in Html Question posted in
Some basic documentation can be found here.

Html – How to place content below the inner box shadow?

Do you have any suggestions?

.container {
  box-shadow: 0px 5px 15px gray inset;
}
<div class="container">
  <p class="item">Lorem ipsum</p>
  <p class="item">Lorem ipsum</p>
</div>

EDIT: I should have been more specific with my question, sorry. I want to see the shadow above the text. I have a container and when I scroll down, I want the content to be seen as going below the shadow.

enter image description here

As you can see, there is an inner shadow but it is not positioned at the top.

Tags:

3

Answers


  1. 0

    I don’t fully understand your question, but is this what you looking for? The "Lorem Ipsum" is now written below the inner box shadow.

    HTML

    <div class="container">
  <div class="content">
    <p class="item">Lorem ipsum</p>
    <p class="item">Lorem ipsum</p>
  </div>
</div>

    CSS

          
.container {
  position: relative;
  width: 150px;
  height: auto;
  padding: 25px; 
  background-color: transparent;
}

.container .content {
  background-color: #fff;
  box-shadow: 0px 5px 15px gray inset;
 padding: 20px; 
}

.item {
  margin: 0;
  padding: 10px;
}

    Text inside

    Login or Signup to reply.
  2. 0

    use a "padding" property and set the value, for example I want to set 20 px. And then the text will be below your inner shadow. I hope this help.

    Login or Signup to reply.
  3. 0 
    :root {
  --main-inline-size: 80%;
  --main-max-inline-size: 1200px;
  --main-min-inline-size: 20rem;
  --spacing: 0.5rem;
}

*,
::before,
::after {
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
}

body {
  block-size: 100vh;
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  padding: var(--spacing);
}

menu,
ol,
ul,
li {
  list-style-type: none;
}

main {
  border: 1px solid currentColor;
  inline-size: clamp(var(--main-min-inline-size), var(--main-inline-size), var(--main-max-inline-size));
  margin-inline: auto;
  min-block-size: 100%;
  padding: var(--spacing);
}

/* the code following this comment is relevant, the prior code is for
   simple resets and base-styling: */

.container {
  /* using CSS custom properties to assign both
     colour and size for the shadow; the shadow
     size is deliberately ridiculously large for
     the purposes of this demonstration: */
  --shadowSize: 5rem;
  --shadowColor: lime;
  block-size: 50vmin;
  /* setting the padding of the element to a fraction of the
     shadow's size, in order to ensure the shadow extends
     "over" the content: */
  padding: calc(var(--shadowSize)/4);
  /* for positioning the pseudo-element: */
  position: relative;
}

.container::after {
  /* defining the box-shadow, using the custom properties: */
  box-shadow: inset 0 0 var(--shadowSize) var(--shadowColor);
  content: '';
  /* ensuring the element is positioned up to the edges of
     its parent: */
  inset: 0;
  /* to allow interaction with the contents "below"/"beneath"
     the shadow, and pseudo-element: */
  pointer-events: none;
  /* for sizing and positioning: */
  position: absolute;
}
    <main>
  <div class="container">
    <p class="item">Lorem ipsum</p>
    <p class="item">Lorem ipsum</p>
  </div>
</main>

    JS Fiddle demo.

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

Back To Top
Search