how do i make my website background a gradient colour? - html

I am currently trying to create a website.
I have created the logo for the website but I'm not sure how to make my header and footer background a gradient color on Dreamweaver CS6.
I can only put it as a solid color and I am not sure if I need to use CSS or HTML to change it.
Does anyone know if it is possible, and if it is how to do it?
thanks :)

There is a online tool from which you can generate css gradient -
http://www.colorzilla.com/gradient-editor/
On left side of screen you have options to choose colors and on right you have code which you need to copy in your css.

Try www.css3generator.com and then select gradient and select color and equivalent code will be generated ..copy the code and use in your CSS.
This site is very helpful.

Use CSS3:
body {
background-image: -webkit-linear-gradient(top left, white 0%, #9FBFD2 100%);
background-image: -moz-linear-gradient(top left, white 0%, #9FBFD2 100%);
background-image: -o-linear-gradient(top left, white 0%, #9FBFD2 100%);
background-image: linear-gradient(top left, white 0%, #9FBFD2 100%);
}

Related

Low resolution drop-shadow [duplicate]

I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread

Pure css gradient

Does anyone know how I could plot a gradient like in the image below with pure CSS.
It doesn't have to work in IE.
I can get it to work but I can't seem to be able to taper off the gradient on both sides left and right like the image shows.
Any ideas would be grateful. Again this is using straight css to do this.
This website is amazing for doing CSS gradients:
http://www.colorzilla.com/gradient-editor/
You can even import an image or CSS.
An example would be:
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
Why do you need gradient for this? How about drop shadows.
Examples
That is a very complex task. They position one div behind the front one. The one behind is where they create the shadow, then they transform it and position it to achieve that effect. Here is a guide guide to do this technique (has it on one corner, but you can tweak a bit and get that effect)... I am sure there are specific guides to achieve the exact effect you want to out there as well, but they seem to be escaping my search skills for the day.
http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
With pure CSS, you could use radial-gradient.
Suppose that you have a div to emulate that shadow, and it has 300px of width and 100px of height, then, you just could achieve the effect with:
background: radial-gradient(70% 10%,gray 20%, white 60%);
background-position: 0px -54px;
background-size: 100% 110%;
Here is the example --> enter link description here

CSS, can i use two different colors in one table cell? (for example dark purple and light purple)

Doen anyone know how to use two colors in one table cell (td) and how to let them overflow inc each other?
For examble. For my website (www.ericversteeg.nl) i want to use in my guest book title columns light purple in the top of the cell and dark purple in the bottom.
I think i have to assign a class in the td.
But how do i make my class in CSS?
Greetings Eric
The CSS 3 drafts introduce gradient colours.
e.g.
background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);
Note that browser support is not universal.
I found this tool quite helpfull: CSS3 Gradient Generator. The code it produces isn't the most beutiful but it works!
There are a couple ways to do this. The first is to have a div on top and a div on bottom, each with the different color.
<td class="multi_purple">
<div class="top">
</div>
<div class="bottom">
</div>
</td>
and style the two divs with their respective colors.
A "better" option would be to just use a background image of the right colors. This will be cross browser supported, but doesnt do well if your table grows or shrinks in size.
The newest option would be to add a gradient. check out http://www.css3please.com to see the syntax for this.
but its something like this
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
with of course your purple shades in place.
This degrades into a solid color for browsers that dont support gradients (lookin at you ie 6/7?)
You could use a background gradient like was suggested, or using a background image that has both colors in it.
If you know that your cells are going to be say, 30px tall, make a 30px tall by 1px wide image that is split where you want it, and have both colors in it. Then using css:
td {
background-image: url(colors.png);
background-repeat: repeat-x;
}
To tile it horizontally, thus getting the effect you're after.
Is this what you're looking for?
http://jsfiddle.net/4NXRx/2/
It uses a background gradient and you don't need to call any image resources. You also don't have to worry about updating the image.
There's a back-up color for browsers that don't support gradients. It's an effect that isn't crucial to all visitors, so it's no big deal if some visitors don't see a gradient.
Note, that I have made the stops at 49%, so there is no gradual change. I don't know if that's what you want. Obviously, you'll have to choose nicer colors.
table td {
padding: 10px;
background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-gradient(
linear,
right 49%,
right 50%,
color-stop(0.08, #CEC3FA),
color-stop(0.51, #B9AAD1)
);

Semi transparent gradient image to darken without desaturating

I'm designing a website that is going to have multiple nested divs for the side menu. Each div's background is a darker shade of blue than that of the div which surrounds it.
I'd like for each div to have a gradient effect in the background, where it goes from a slightly darker blue to the background color of the div.
I know CSS3 has built-in support for gradients, but older browsers wouldn't be able to display them, so that's not an option. Instead, what I've been doing is creating a PNG background for each individual div.
However, this PNG background option is not super sustainable. If I decide that I want a slightly different color as the background, I have to go create a new PNG with that new color. Annoying.
I wish that I could use a single semi-transparent grey to transparent PNG image in ALL of the divs so that I could freely change the background colors. But the problem with using such a PNG is that it kind of desaturates and dulls rather than darkens...
Is there any way to manipulate such a PNG to darken whatever it overlays WITHOUT desaturating???
There you go:
your-element{
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
}
and your rule for IE:
your-element{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
zoom: 1;
}
Easy-peasy cross-browser compatible for say 99% of your browsers.

Using CSS3 instead of images to achieve desired results

I am trying to use CSS3 instead of images to code the menu in http://www.cssmania.com/ .
My code so far (& the images+styles) can be found here:
http://sarahjanetrading.com/js/j
I tried using CSS3 to achieve the border shadow and the menu li a background to match the one in http://www.cssmania.com. But it just doesnt look the same. When I tried using images, it looked almost perfect. But I want to use CSS3 to achieve the result.
I tried inspecting the code on cssmania.com, but couldnt find the ones for the menu border to make it look the way it is, and the menu li background. I just want the code for these two functions.
Thanks
The main thing I see that stands out different is the background of the links. There's a subtle gradient on the original design, and that's missing from yours. It's also why the borders look different - the gradient is on the color, not the borders, but your eye is tricked.
Add this to the stylesheet:
#header-mania .header {
/* Keep everything *except* the original background */
background: #7fa445;
background: -moz-linear-gradient(top, #7fa445 0%, #6b9632 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fa445), color-stop(100%,#6b9632));
background: -webkit-linear-gradient(top, #7fa445 0%,#6b9632 100%);
background: -o-linear-gradient(top, #7fa445 0%,#6b9632 100%);
background: -ms-linear-gradient(top, #7fa445 0%,#6b9632 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fa445', endColorstr='#6b9632',GradientType=0 );
background: linear-gradient(top, #7fa445 0%,#6b9632 100%);
}
That background's color might not be exact (I didn't feel like firing up PS just to match the colors), but you can adjust the colors easily using the Ultimate CSS Gradient Generator
As far as I'm concerned your version of the menu doesn't look too different, in fact if you inspect css mania's stylesheet files they're only using text-shadow declarations on the elements, everything else is achieved with images. Hope you find my comments helpful!