So, I think I am almost finished with the html and css design. If it were not just for my personal use, I'd have a few more things to fix, but for now, it looks pretty close to my original design in my main browser, Firefox, with a few small, but pretty bad glitches in Internet Explorer. So let's step through a few of the interesting things I found while working the css and html.
First off, I added the tablecloth background that was seen in the first mockup, which was pretty easy. I had to move the Header tag outside of the recipe body for it to display correctly. I used information from this article to get it to display right. I then followed some information from Web Designer Wall to get the gradient that I wanted in the mockup. Notably, because the tab and the recipe body are in two pieces, I had to break up the flow of the gradient into two sections to get the gradient to go over both, so I have some css that does this:
Notably, and the only thing you need to see is that one gradient stops where the next starts. I have three different statements for cross browser compatibility because gradients are still experimental. Next, for the rounded corners I needed this:
Found that information on a blog all about CSS3 features, so again, this is not a mainstream ability yet, but some browsers support it. This is where my big Internet explorer problem comes in. IE9 will round the corners and will do gradients, but it can't do both correctly at the same time, so I have the corners sticking out from the borders, but maybe they will fix it soon? Next is the shadow, which, is another nifty css3 trick, I added it only to the main body of the recipe, because I was having some difficulty getting it to work with the tab, and it really isn't noticed (until pointed out.) but for that, I did:
I liked the effect so much, I replaced the pseudo-shadow on the image tags with this shadow effect as well. My vertical rule in the top section and the horizontal rule are kinda hacks right now created by adding borders to some elements on some sides, but they meet my needs and I'll fix them later.
Next post, I believe, I will start on XSL transformation, and then it might become apparent why I made the mockup.
Also, yeah, I bagged on Internet Explorer's bad handling of Gradients/round corners combined, but from the (firefox) screenshot, you can see in the bottom right corner that it isn't exactly perfect yet for others as well. Generally, for web development, Chrome is one of the better standards compliant browsers, but using that as your standard means that anyone that uses a less correct browser will not be able to see what you have regardless of how correct it is.
ReplyDeletehttp://css3please.com/
ReplyDeleteAnother cool resource, by the way.
Also, solved my Internet explorer problem: Making a gradient an SVG file and using that as a background... except now that I think of it, it might not work exactly here.
And the solution for the messed up corner:
ReplyDeletehttp://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
Latin cookbooks, eh? Nice!
ReplyDelete