Creating a CSS3 box-shadow on all sides but one

by

In your sample create a div inside #content with this style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

and change #content style (remove paddings) and add shadow

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

add shadows to tabs:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

More Related Contents:

  1. CSS Not Being Responsive
  2. Change select box option background color
  3. Li item on two lines. Second line has no margin
  4. When to use the !important property in CSS [duplicate]
  5. Add a background image (.png) to a SVG circle shape
  6. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  7. Inline elements and line-height
  8. Tables instead of DIVs [duplicate]
  9. Is type=”text/css” necessary in a tag?
  10. Text overflow ellipsis on two lines
  11. ‘position: sticky’ not working when ‘height’ is defined
  12. Absolute positioning inside absolute position
  13. Use CSS to remove the space between images [duplicate]
  14. Borders disappear in Chrome when I zoom in
  15. How To Isolate a div from public CSS styles?
  16. CSS ONLY Animate Draw Circle with border-radius and transparent background
  17. Bootstrap 4 – Sticky footer – Dynamic footer height
  18. Center HTML Input Text Field Placeholder
  19. CSS – relative positioned parent div not stretching to absolute child div height
  20. html table cell width for different rows [duplicate]
  21. How does the z-index property really work?
  22. Linking to CSS in an SVG embedded by an IMG tag
  23. How to rotate a 90 degrees?
  24. How do I make an input element occupy all remaining horizontal space?
  25. Understanding grid negative values
  26. Remove ‘:hover’ CSS behavior from element
  27. HTML + CSS: Numbered list with numbers inside of circles
  28. How to pass parameters to css classes
  29. How to move placeholder to top on focus AND while typing?
  30. IE7 CSS Scrolling Div Bug

Leave a Comment