Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 9th, 2012  |  syntax: None  |  size: 1.64 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. putting a inset box shadow on an image or image within a div
  2. <body>
  3.  
  4. <div id="logo">
  5. <img src="images/key.jpg"  width="3%" height="3%"/>
  6. </div>
  7.  
  8. <a href="scene2.html" class="next">Next</a>
  9. <a href="abduction.html" class="back">Back</a>
  10.  
  11. <img src="images/scene1.jpg"  width="650" height="650" class="backing"/>
  12.  
  13. </body>
  14. </html>
  15.        
  16. .backing {
  17.     position:relative;
  18.     z-index:-10;
  19.     float:left;
  20.     margin-left:12%;
  21.     box-shadow: 0 0 -50px -50px  #FFF;
  22.         -moz-box-shadow:  0 0 -50px -50px  #FFF;
  23.         -webkit-box-shadow:  0 0 -50px -50px  #FFF;
  24.  
  25. }
  26.  
  27. .next {
  28.     position:relative;  
  29.     margin-left:8%;
  30.     z-index:200;
  31. }
  32.  
  33. .back {
  34.     position:relative;
  35.     margin-left:2%;
  36.     z-index:220;
  37.  
  38. }
  39.        
  40. <div class="box-shadow">
  41.     <img src="/images/graphic.jpg" />
  42. </div>
  43.        
  44. .box-shadow {
  45.     background-color: #fff;
  46.     -webkit-box-shadow: inset 0 0 10px 10px #000;    
  47.     -moz-box-shadow: inset 0 0 10px 10px #000;
  48.     box-shadow: inset 0 0 10px 10px #000;
  49.     height: 235px;
  50.     padding: 25px;
  51.     text-align: center;
  52.     width: 500px;
  53. }
  54.        
  55. <div id="logo">
  56. <img src="images/key.jpg"  width="3%" height="3%"/>
  57. </div>
  58.  
  59. <a href="scene2.html" class="next">Next</a>
  60. <a href="abduction.html" class="back">Back</a>
  61.  
  62. <img src="images/scene1.jpg"  width="650" height="650" class="backing"/>
  63.        
  64. .backing {
  65.     position:relative;
  66.     z-index:-10;
  67.     float:left;
  68.     margin-left:12%;
  69.     box-shadow: inset 0 0 50px 50px  #FFF;
  70.     -moz-box-shadow: inset 0 0 50px 50px  #FFF;
  71.     -webkit-box-shadow: inset 0 0 50px 50px  #FFF;
  72.  
  73. }
  74.  
  75. .next {
  76.     position:relative;  
  77.     margin-left:8%;
  78.     z-index:200;
  79. }
  80.  
  81. .back {
  82.     position:relative;
  83.     margin-left:2%;
  84.     z-index:220;
  85.  
  86. }
create a new version of this paste RAW Paste Data