SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Perspective trick with background image

    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!
    Author at GraphicRiver

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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 :/
    I'm the web overlord for Graphic Business Systems

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes my first thought was to use mitred borders also. Good work guys

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>

  9. #9
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Author at GraphicRiver

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What's wrong with the examples above? They don't rely on CSS3, which isn't supported on some browsers yet.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Monsieur Shadow de la Mort. Is the .content div actually needed?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  16. #16
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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??

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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?"

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    In CSS3 you can decide where you want the background to go.
    Interesting ... although those examples lost me a bit.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    This is an excellent thread to be following. Make sure it's added to a repository or something somewhere for future reference!
    Great work guys.


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
  •