SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    Creating Multiple Box Effect

    I wanted to be able to create this effect using just CSS, without images:

    https://dl.dropbox.com/u/76571269/sitepoint.jpg

    I know there is probably a way by using more than one DIV, but my intention is to have a single DIV and use the :after pseudo-class so that I'd preserve much of the mark-up.

    Does anybody have any advice on pulling such a stunt off.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this perhaps.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .box {
    	border:1px solid #ccc;
    	width:800px;
    	margin:auto;
    	position:relative;
    	padding:10px;
    	background:#fff;
    }
    .box:after, .box:before {
    	content:" ";
    	display:block;
    	position:absolute;
    	bottom:-7px;
    	left:5px;
    	right:5px;
    	height:5px;
    	border:1px double #ccc;
    }
    .box:before {
    	left:10px;
    	right:10px;
    	bottom:-13px;
    }
    </style>
    </head>
    
    <body>
    <div class="box">
    		<h1>Box test</h1>
    		<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
    </div>
    </body>
    </html>
    It should work from IE8+. You can add support for ie7 with expressions if you need to.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •