September 3, 201213 yr Hi, Unfortunately I don't have an example to show you all, but I'm struggling to use this. If anyone has used the tool please could they explain how to use it. I've chosen my gradient, the CSS is generated on the right and I've copied it into my stylesheet, within my body selector. NOTHING appears when I preview the page online. Can anyone help?
September 3, 201213 yr Hi, maybe a daft question, but here goes. Does your browser support CSS gradients? You need to have a modern version of Firefox, Chrome or Safari to render this styling. Jim
September 6, 201213 yr Author Hi Jim, Yes I've tested in a number of modern browsers and just can't get it to work! Have you used it before?
September 7, 201213 yr There's nothing wrong with the generator, the problem is going to lie elsewhere with your code. Please either link us to the website in question (ideal) or post all your code inside CODE tags here.
September 7, 201213 yr Can't find the code that should generate the gradient. body { font-size:100%; line-height:1.25em; background:#0e649a } This is the only body selector I found in your document.
September 7, 201213 yr Author Go to www.philstorey.co.uk I've uploaded a test page that should have a grey/white cross hatch background. The CSS has for the <body> tag has been pasted in from ColorZilla Gradient Editor. Please help!
September 7, 201213 yr Your gradient is running from white to white. Logic that you just see a blank page. Greetings,
September 7, 201213 yr Author Ha! - good point! I've managed to get a gradient at least now - could you tell me why it's so big? Any way of making it smaller (ie so you can see more of it). Thanks.
September 7, 201213 yr Just resize the box where the gradient is in. If its a div with a width and height of 500 pixels , the gradient will always resize with its container. Léon
September 8, 201213 yr Author Hmmm - still can't figure it out. See the site now - I've set a 500x500px box with a black border around it. I expect to small checks (that is the pattern I've chosen - if you go to http://www.colorzilla.com/gradient-editor/ it's the preset in the top right corner). I see nothing! Thanks for all your help - almost there!
September 8, 201213 yr Hmmm - still can't figure it out. See the site now - I've set a 500x500px box with a black border around it. I expect to small checks (that is the pattern I've chosen - if you go to http://www.colorzill...radient-editor/ it's the preset in the top right corner). I see nothing! Thanks for all your help - almost there! Those are the background off the box that is holding the gradient. If you see the pattern it just means its transparent at that point. Léon
September 8, 201213 yr Author I'm sorry but I don't understand what you mean. How do I make the actual gradient pattern (ie, the grey/white squares) smaller?
September 8, 201213 yr I'm sorry but I don't understand what you mean. How do I make the actual gradient pattern (ie, the grey/white squares) smaller? The gradient runs from a color to a transparent area. The squares are the background, you see them because the gradient is transparent at one point.
September 8, 201213 yr Hi, the checks are simply an indication that the image is transparent. You would not use a gradient to produce a checked background but could make a very simple background image yourself with any image editor. Paint is included in windows and it would be a matter of trial and error to get the result you require. Try opening paint, which if you have not used it before can be found "all programs > accessories > paint" and resize the box offered to 6px square. Click on "colors > edit colors > define custom colors" and in the right hand column which should by default be 0, 0, 0 change those boxes to 240 red green and blue. This gives you a light grey color. Click add to custom colors then okay. back on your opening screen with your 6px square color in any 3 by 3px square that takes your fancy. Save as bg (or any name you want) and use the extension you wish (suggest png or jpg) Save in a location where you can find it again later. If you wish this as a background for the whole page add this into your body style block: background-image:url(bg.png);background-position:0 0;background-repeat:repeat; Edit the url address to suit the actual img name/location. If you only want the background in a certain section them add the additional style to the relative style block. Play with the color and sizing until you find the result you are looking for. Jim Edited September 8, 201213 yr by jamaks
September 11, 201213 yr Thanks man.. actually I am new in web designing. Its my first time heard about colorzilla
Create an account or sign in to comment