Hi im trying to do this its two dashed rectangles, where on the first there is a simple form. If the shadow is hard to create then i can skip it! Blabla stands for text and the magenta area is where a picture will be placed! Dashed stroked lines are mandatory can someone help me out?
It's a little hard to say without knowing what that image IS (is it content, or is it presentational nonsense), but for the most part all of that is simple enough with CSS3 -- be warned it won't show rounded corners or the drop shadow in IE8 and older, and the 'dashed' border is inconsistent in how it's 'dashed' between browsers, but yeah, that can be done... though the grey part going into the border area? That's probably NOT going to happen... well.. maybe. Not sure if the new background-clip property would let that be fixed or not, or if it would instead place the element over the border instead of under it. I'd have to play with that. The form inputs could also be problematic if those are going to be dynamic width... fixed width it can be done, but there will be some minor inconsistencies cross browser -- though that's why starting out from a picture of a layout idea before you even have semantic markup of the content or a reasonable facsimile is the road to failure. But yeah, if you had a DIV called testbox, the CSS to give it the dashed border, rounded corners and drop-shadow would go something like this: .testBox { background:#FFF; border:3px dashed #080; -webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px; -webkit-box-shadow:2px 2px 5px #888; -moz-box-shadow:2px 2px 5px #888; box-shadow:2px 2px 5px #888; } Code (markup): Which would work in all modern browsers, as well as IE 9. IE8/earlier wouldn't get the shadow or the rounded corners, but would still get the dashed border. Really though again, this is why starting from a picture instead of creating the style with CSS is just plain broken methodology, adn on the whole why the "PSD first" crowd are putting the cart before the horse. I'll play with it a bit and see what I come up with... I have an idea that might pull of the grey fitting under the border -- takes an extra DIV but should work.
thanx my friend, where can i check the code you posted? i have text wrangler (its like notepad ++) regarding that gray div, yes ive seen it before, it has to act as if its in two layers
Oh, and that white text on grey? WAY below accessibility minimums -- either needs a darker grey or black text. As to testing, gimme a while and I'll post up a live copy on my server that you can see, and I'll toss in a .zip of it so you can grab it as a single file. Because it's "PSD First" there's a lot of things... wrong with it from an accessibility standpoint like the color, and that it's going to need px metric fonts on just about everything... hopefully the whole page this is going into isn't like that.
Ok, here's a working example: http://www.cutcodedown.com/for_others/genik/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/genik/ is open for easy access to the gooey bits, and I gave you a .rar file for easy downloading. For the most part it works, though as I said it's an accessibility mess being fixed metric (px) fonts in a fixed px width -- but that's often what happens with "but I can do it in photoshop" layout concepts; as if that has anything to do with sane and rational web design. It works well in IE9, IE10, Opera, Safari and Chrome -- in FF it's a little wonky as firefox still has bugs in it's border-radius implementation, as well as how it doesn't actually use the same radius formula on the border as it does the background (which is some serious herpaderp)... the normal 'fix' - the background-clip property, has no effect here or worse makes the white not extend into the border because the border is separate from the backgrounded element, thanks to that grey bit needing to go underneath. For the 'image' I just cropped and cleaned up from your original photo -- the 'white' part has to be built with a png transparency so that the 'blah blah' part isn't hidden -- NOTE, if you want 'blah blah' to be a LINK, that WILL NOT BE POSSIBLE as the bordered DIV has to go over it... Which again is why it helps to understand a bit about HTML, CSS and accessibility BEFORE drawing the 'pretty pictures'. (Which is why I advocate writing semantic markup of content and building the entire layout in CSS before you even THINK about opening up the paint program!) ... THOUGH... if you had an anchor inside that div, you could pad the div 'just so' and make the anchor position:relative -- since the div over it is NOT position:relative the anchor would depth sort over DIV#inner, without moving DIV#blahblah over the border. So... it's possible. In any case, hope this helps -- it's not THAT complex thanks to CSS3 greatly simplifying all our lives -- but it isn't exactly something I'd deploy on a real website either.
wow its fantastic, your the greatest!!!!! i just want to ask regarding the blabla issue, could that be inside a second div so that it can be over on top of everything incase i wanted a link there? not that i want one, just asking for the case studies sake!
Somewhat that's what I meant in the "though, if you had an anchor" -- you could use a DIV for the same purpose... Setting it to "position:relative" would then depth sort it over all non-positioned elements. Just remember it's background overlaps the border though, so I'd suggest not setting a background on anything you put inside that DIV. That's the key though -- the element you want positioned OVER would have to be inside div#blahblah, not outside/around it -- this is because div#inner has to go over div#blahblah for the dashed corners to show on top... So it's a lot of trickery. That's one of the more powerful bits of CSS a lot of seasoned developers don't even know -- anything with position:relative or position:absolute on it will depth sort over things that are the default positioning (static). You only need to go to things like z-index when multiple bits of the layout 'have positioning'.
I just uploaded a new copy here: http://www.cutcodedown.com/for_others/genik/take2/template.html Directory wide open with a .rar in there again. http://www.cutcodedown.com/for_others/genik/take2/ That does put the extra DIV in and depth sorts it -- and it hit me, if we do that the image doesn't need to be transparent anymore, as we can use the overlapping inner DIV to erase that corner -- which means the chopped off corner of the image will auto-adjust to the size of whatever text you put there, AND we can use a border on it to make a nice rounded white matching border on it. Notice the image file it's using: http://www.cutcodedown.com/for_others/genik/take2/images/picture.png Is solid with no transparent cutout -- the CSS is handling that for you -- which should make it a lot easier if you're going to have multiple images in that. I did have to play with z-index a bit to make it work right - for some reason Opera and Webkit were treating the parent non-positioned div#blahBlah as if it had positioning, depth sorting it over so the sibling div#inner needed to be relative positioned, with z-index on the div inside div#blahBlah... but it works.