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?
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.
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.
OK, here’s my very rough (away from home, mucking around at an inlaw’s computer) attempt at making it more flexible:
<!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>
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.
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.
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.
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.
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??
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?”