Jump to content
silvercover

What's the best way to have an effect like this?

Recommended Posts

I'm not an expert in CSS. There may be a better way but this works (tested in Chrome). Of course you would likely need to modify the styles further to get the actual look/feel of the content and boxes as you like. but, it does create the look of the little sub-dialog boxes peeking out at the bottom. I would create those within the server-side code using smaller increments for the width. Everything else can be done through the CSS style sheet.

 

 

<html>
<head>
 
<style>
#container { display:inline-block; width: 300px; }
#dialog { border: 1px solid #000000; text-align: center; }
#title { background: blue;  width: 300px; color: #ffffff; }
#body { height: 100px; }
.subDialog {height: 5px; border: 1px solid #000000; margin: 0 auto; }
</style>
 
</head>
<body>
 
<div id="container">
  <div id="dialog">
    <div id="title">Dropbox</div>
    <div id="body"><br>4 Files were updated in your folder<br><br><button>View Folder</button></div>
  </div>
  <div class="subDialog" style="width: 290px;"></div>
  <div class="subDialog" style="width: 280px;"></div>
  <div class="subDialog" style="width: 270px;"></div>
</div>
 
</body>
</html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.