set a fixed bottom shadow for a scrollable div - HTML CSS CSS Property

HTML CSS examples for CSS Property:box-shadow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. box-shadow

Description

set a fixed bottom shadow for a scrollable div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
#chatroom {<!--  ww  w .  j a  v a 2  s .com-->
   position:relative;
   height:51px;
   overflow:scroll;
   background:linear-gradient(to bottom,
   blue 0 ,
   pink 51px) no-repeat top;
   background-size:100% 51px;
   background-attachment:fixed;
}

.chatmessage:nth-child(2n) {
   background:Chartreuse;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="chatroom"> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
   <div class="chatmessage"> 
    <b>Lorem i</b>Lorem 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials