Inner text shadow with CSS

by

Here’s a little trick I discovered using the :before and :after pseudo-elements:

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

The title attribute needs to be the same as the content. Demo: http://dabblet.com/gist/1609945

More Related Contents:

  1. How would I achieve a shadow that won’t show through transparent text?
  2. Limit text length to n lines using CSS
  3. How can I replace text with CSS?
  4. Truncating long strings with CSS: feasible yet?
  5. Text on image mouseover?
  6. How can I add a box-shadow on one side of an element?
  7. First letter Capitalize and other letters in lower case in css?
  8. Make text height 100% of div?
  9. Align text to the bottom of a div
  10. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  11. Wrap text from bottom to top
  12. Background color of tspan element
  13. Complex CSS selector for parent of active child [duplicate]
  14. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  15. How do I conditionally apply CSS styles in AngularJS?
  16. Centering brand logo in Bootstrap Navbar
  17. How to create equal height columns in pure CSS [duplicate]
  18. draw diagonal lines in div background with CSS
  19. What does an “&” before a pseudo element in CSS mean?
  20. Removing display:flex adds spaces around a link. Why?
  21. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  22. Circle with two borders
  23. CSS: Are view height (vh) and view width (vw) units widely supported?
  24. Create a variable in .CSS file for use within that .CSS file [duplicate]
  25. Transparent hollow or cut out shape in HTML
  26. Hover on child should turn off hover effect on parent [duplicate]
  27. In a bootstrap responsive page how to center a div
  28. How to style the number on a html list?
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. Creating a droplet like border effect in css

Leave a Comment