Perspective trick with background image

**Braveheart4** · Jan 27, 2012 09:37

perspective.jpg

I'm trying to accomplish something like the above screen. Can anyone give me some tricks? My ideal solution would be to use just one background image because later on I'll use the same perspective effect on blocks with different height. So maybe a background like this would help, and just control it with background-position?

Any ideas are appreciated!

**sdleihssirhc** · Jan 28, 2012 00:01

Just wanted to point out that, using the arcane magick known as CSS triangles, it's totally possible to recreate this effect with just CSS. Here's my attempt.

The best part is, it works in all browsers!

...Because it uses a bunch of empty, extraneous HTML!

...And it won't help you at all when it comes to variable heights, because you have to do a lot of ugly, explicit size declarations.

...not to mention how much of a pain it would be to change and adapt to new elements...

But hey, it saves you an HTTP request :/

**ralph.m** · Jan 28, 2012 03:54

Likewise, I would do it with CSS, perhaps like so:

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
.wrap {background: #343436; padding: 12px; float: left;}
.left, .right {height: 270px; float: left;}
.left {width: 123px; height: 208px; border: 5px solid #232323; background: blue;}
.right {height: 200px; background: #2e2e30; width: 155px; 
border-width: 9px;
border-style: solid;
border-color: #343436 #343436 #343436 #010101;
}
</style>
	
</head>

<body>

<div class="wrap">
	<div class="left">
	</div>
	<div class="right">
	</div>
</div>


</body>

</html>

**Paul O'B** · Jan 28, 2012 15:51

Yes my first thought was to use mitred borders also. Good work guys

**ralph.m** · Jan 28, 2012 18:07

The only thing I don't like about my example is the fixed heights. They'll cause problems if the content expands or is enlarged (by default or otherwise). I'm sure this can be done without those heights--perhaps with display:table.

**dresden_phoenix** · Jan 28, 2012 20:02

Ok how about this, guys:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			.image-shell, .inner {background: #555; color:#fff; }
			.item {margin-left:240px; border: 20px solid transparent; border-left-color: #000; float:left; width: 500px}
			.item .inner{float:left; width: 100%; position: relative;}
			.inner h2{float: right; width:100%; }
			.image-shell {padding:10px; float: left;  margin: -20px 0 -20px -240px;}
			.label {border-radius:5px; background: #333; text-align: center; padding:.5em 0; display:block;}
			.item dt{ font-weight: bold; float: left; margin-right: .5em  }
			.item dt, .item dd{ padding-bottom:.5em;}
			.item h2 a, .item dl{padding-left:20px;}
			
			/* for added flexibility, .before can also be easily emulated in legacy IE using filter: */
			.image-shell img, .image-shell span {position: relative; z-index: 55}
			.image-shell:before {content:""; background: #555; top:0; bottom:-20px; width: 220px; left:-240px; position: absolute;  }
		</style>
	</head>
	<body>
	<div class="item">
		<div class="inner">
			<h2><a href="#">Movie tile goes here??</a></h2>
			<div class="image-shell">
				<img src="200x300.gif" alt="200x300" width="200" height="300" />
				<span class="label">image caption</span>
			</div>
		    <dl>
		    	<dt>Term:</dt>
		    	<dd>defintion</dd>
		    	<dt>Term:</dt>
		    	<dd>defintion</dd>
		    	<dt>Term:</dt>
		    	<dd>defintion</dd>
		    	<dt>Social:</dt>
		    	<dd>Social media icons or links</dd>
		    </dl>
	    </div>
	</div>

	</body>
</html>

it is fully vertically flexible, can be adjusted to any fixed width ( I figure there's gonna be column of these anyhow). the only real limit is that the width of the pictures must be the same, but thats also good graphic design sense anyway.

**ralph.m** · Jan 28, 2012 21:23

OK, here's my very rough (away from home, mucking around at an inlaw's computer) attempt at making it more flexible:

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
.wrap {background: #343436; padding: 12px; float: left; display: table;}
.wrap-inner {display: table-row; background: #232323; }
.left, .right {float: left; display: table-cell;}
.left {width: 123px; border: 5px solid #232323; background: blue;}
.left img {width: 123px; height: 208px; display: block;}
.right {background: #2e2e30; width: 155px; min-height: 218px;
border-width: 9px;
border-style: solid;
border-color: #343436 #343436 #343436 #010101;
}
</style>
	
</head>

<body>

<div class="wrap">
  <div class="wrap-inner">
	<div class="left">
		<img src="" alt="">
	</div>
	<div class="right">
            <p>Text text text text text text text text text</p>
	    <p>Text text text text text text text text text</p>
	    <p>Text text text text text text text text text</p>
	    <p>Text text text text text text text text text</p>
	</div>
  </div>
</div>

**Paul O'B** · Jan 29, 2012 03:49

Seeing as its a free for all here's a minimalist version

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">
div {
	background:#000;
	margin:0 0 0 200px;
	border-top:25px solid #fff;
	border-left:25px solid #333;
	border-bottom:25px solid #fff;
	margin:40px 0 0 200px;
	float:left;
	width:300px;
	color:#fff;
	padding:10px;
}
img {
	float:left;
	padding:10px;
	background:#333;
	margin:-35px 0 -35px -235px;
	border:15px solid #000;
}
</style>
</head>

<body>
<div><img src="images/flag1.gif" width="150" height="290" alt="Flag"> Here is the text</div>
</body>
</html>

**Braveheart4** · Jan 30, 2012 09:03

I'm thinking if this can be accomplished with the CSS3 border-image property. I'm currently trying that, and if I succeed, I'll post a code example here.

**ralph.m** · Jan 30, 2012 22:28

What's wrong with the examples above? They don't rely on CSS3, which isn't supported on some browsers yet.

**deathshadow60** · Jan 31, 2012 06:16

I tossed together a live demo based on what's been discussed, with a bit clearer a code (IMHO) that you'll hopefully be able to follow.
http://www.cutcodedown.com/for_other.../template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/braveheart4/

is wide open for easy access.

It has dynamic height, and the "content" area is set to em width to expand to fit text... using a combination of min-height, negative margins and border as a background it scales well on large font systems and should scale well to different sized content.

96dpi:

120dpi:

So it will scale upwards to fit the right half. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for making it also work in IE6. (a single 'zoom' property - oh noes, not that) -- though be warned it will NOT display properly in 6 as prior to IE7 they didn't support transparent as a border color. I also made sure to use a background image so we could verify that yes, we have transparency where it's needed.

Hope this helps... to be honest though, I'd probably use images for this as IMHO this is a bit too... fragile for 'production work' unless the content is very VERY consistent.

**ralph.m** · Jan 31, 2012 06:37

Nice work, Monsieur Shadow de la Mort. Is the .content div actually needed?

**deathshadow60** · Jan 31, 2012 06:45

Originally Posted by ralph.m

Is the .content div actually needed?

Yes... if you put the background-color in the DIV that the border is on, it shows through the transparency in the border area... apparently background-color is supposed to be drawn under border... Don't know who thought that was a good idea, but that's how it works in Opera, FF and Chrome... didn't get as far as testing Safari/IE, but when Opera, FF and Chrome do it screwy, I don't even want to THINK what IE does with it.

DL a copy and test it -- move the background that's on .content into .contentWrapper -- the result is... nonsensical at best.

**ralph.m** · Jan 31, 2012 07:03

Originally Posted by deathshadow60

if you put the background-color in the DIV that the border is on, it shows through the transparency in the border area...

Ah yes, I see. That is rather silly behavior. Same on Safari and IE9.

**Paul O'B** · Jan 31, 2012 09:15

Originally Posted by ralph.m

Ah yes, I see. That is rather silly behavior. Same on Safari and IE9.

That's the way the specs say its supposed to be and mentioned in a little detail here. I guess that if you had large dotted or dashed borders you may want the background underneath but usually you wouldn't.(Note IE7 and under stop the background going under the borders when the element is in haslayout mode.)

In CSS3 you can decide where you want the background to go.

**dresden_phoenix** · Jan 31, 2012 10:10

oooh as always , very elegant DS.

Ok, one thing I have noticed where my example differed from others there is that the image/caption came BEFORE the heading. I thought it would have been more semantic to have the source start with the H2... or is there more semantic leeway when dealing with IMGs??

**deathshadow60** · Jan 31, 2012 14:02

Originally Posted by dresden_phoenix

I thought it would have been more semantic to have the source start with the H2... or is there more semantic leeway when dealing with IMGs??

It actually makes more sense with the H2 first, so you're right -- it's also harder to implement as it would involve absolute positioning... when it's complex enough as it is.

But that's partly why you don't see these types of visual effects on major successful websites, and instead see them on cutesy little personal pages and small businesses being led down the garden path by PSD Jockeys -- as a layout element like this does tread into "But I can do it in photoshop" territory with the fixed width and difficulty in making it dynamic height. You just don't see these types of things on e-bay, Amazon, etc...

Or as my signature on another website points out, I grow increasingly weary of people going "we'll do this because nobody else is doing it" without thinking "maybe there's a reason for that?"