Why doesn’t inset box-shadow work over images?

by

Just to chime in on this, because I was just creating something similar…

I hate polluting my markup with extra elements for the sake of styling, so the CSS solution is to use the :after pseudo element:

main::after
{
 box-shadow: inset 3px 3px 10px 0 #000000;
 content: '';
 display: block;
 height: 100%;
 position: absolute;
 top: 0;
 width: 100%;
}

It’s probably too late for what you were trying to do, but is the better solution in my estimation.

More Related Contents:

  1. Prevent content from expanding grid items
  2. What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS
  3. Position deeply nested elements in a higher level grid container
  4. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  5. Browsers’ default CSS stylesheets
  6. What are -moz- and -webkit-? [duplicate]
  7. CSS hexadecimal RGBA?
  8. How to overwrite styling in Twitter Bootstrap
  9. How to make child element higher z-index than parent? [duplicate]
  10. CSS: center element within a element
  11. How can I transition width of content with width: auto?
  12. Create a Masonry grid with flexbox (or other CSS)
  13. Can I style the resize grabber of textarea?
  14. Proper way to apply CSS to HTML5 custom elements
  15. Transparent rounded corners on Google Map
  16. CSS Specificity and Inheritance
  17. Fallback fonts on special characters
  18. Django Forms and Bootstrap – CSS classes and
  19. Apple-like scrollbars using CSS
  20. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  21. Reuse CSS animation in reversed direction (by resetting the state?)
  22. Div side by side without float
  23. Pure CSS animation visibility with delay
  24. Make table cells square
  25. CSS specificity or inheritance?
  26. How to style the UL list to a single line
  27. css to make bootstrap navbar transparent
  28. Create line after text with css
  29. Image moves on hover when changing filter in chrome
  30. with an inner not triggering :active state in IE 8

Leave a Comment