Jump to content

Css Gradients


Sacred
 Share

Recommended Posts

I've seen some cool websites with gradients that fade out around the edges of their main content area; I've wondered, how do you do this? I've tried with images, but the result is not the same. Can someone tell how to make a gradient fade out around the edges of an element, like a content box for example? On a sort of related note, I use tables for my webpages, but I hear they are not good to use; how would I design a page with plain CSS? I've looked at the Zen Garden some, but still never got too much of a feel of how to set it up. I know you use images for containers and things, but still many things I am unsure of. Please help whenever possible. All help appreciated, thanks guys :). -Sacred

Link to comment
Share on other sites

Well, I use a drop shadow(Don't know if that is correct) to make these boxes, but the shadow doesn't go all the way around it. It gets most of it, just not all, which kinda ruins the point of it. I doubt I'm even doing it right. If someone who uses GIMP knows how to do this, that would be very helpful ^^.

Link to comment
Share on other sites

The "edge fade outs" are most likely done with images, there is no widely supported proper CSS method (yet). You can always fiddle with the image - maybe you want outer glow instead of a drop shadow?About laying pages out with CSS, have you read the CSS tutorial? The point of CSS is to be able to use semantic markup for your page, containers, whatever, and then style them separately.

Link to comment
Share on other sites

I understood the making of containers, like a box you use to hold news information or anything like that, but how is the setup? Do you just write it straight up and down? I am so used to using tables, I've never had a fully CSS styled webpage before. EX:Style.css-----------------------------------------#container{width:250px;height450px;border:1px solid black;background-image:url("");opacity:1.0;color:white;text-align:left;/* And So On */}-----------------------------------------<html><head> <title></title><link rel="stylesheet" href="Style.css" type="text/css" /></head><body><div id="container">This is text in a box.</div><div id="container">This is more text in a box.</div></body></html>I understand how to use them, but not exactly how to place them. Like what you would preferably use to center an element, make it align left, etc. I understand the usage, just not how to put it all together into a functional webpage. Idk if you understand what I mean, but just the fact that I don't know where to position everything, or how, I know lot's of code for positioning, but mainly in tables.

Edited by Sacred
Link to comment
Share on other sites

Floats, dimensions (width and height) and margins are used to position elements. For example, if you wanted to center an element you would give it a fixed width and margin:0px auto;, to align it to the right you may give the parent text-align:right;

Link to comment
Share on other sites

Thank you, it feels kind of like I need to "re-learn" css, in the effect of actually using it to make webpages and stop relying so much on HTML. There's still many questions I have; at least there is a great community to help me. Thanks.EDIT:Okay, I messed around with it, but had errors. How would organize a page with a leftNav, Main, rightNav, in that order? Like left-to-right without the right-most element being beneath the main content. It needs to be beside it.Here's stuff I tried:.leftNav{float:left;}.main{/* float:center; | Don't think that is even valid */margin:0px auto;}.rightnav{float:right;}Those exclude all the other code, just the positioning code I want to focus on. I know that's wrong, but how would I fix it? I wanna learn this, to never have to use tables again.EDITEDIT:Okay, I think I figured it out, but the HTML makes no sense to me. You have to right the navs first, then the main content that goes in the center below it for it to all be on the same line and centered all nice. Seems weird to me. Am I doing this right? -Sacred

Edited by Sacred
Link to comment
Share on other sites

you need a layout similar to this, notice the main div, which is below left, and right, this is important..left{float:left; width:180px;}.right{float:right; width:180px;}.main{margin: 0 190px;} /*will prevent text inside this element from floating under outer side panel div's, when it extends below these elements bottom edge*/<div class="left"></div><div class="right"></div><div class="main"></div>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...