First, I like to thank everybody who has been patient with all of my web design questions. I have actually finished typing up my first HTML web page. I have everything pretty much how I envisioned it to be (almost). Now I am trying to add some colors to the background. Since I am still learning HTML, I don't want to get too far ahead of myself but I still want the background to be popping. I figured 3 horizontal colors should be fine. How do I go about doing this?
You can leverage background-image: linear-gradient to produce multiple different background colors like so:
3 colors
body{
background-image: linear-gradient(90deg,
#F6D6A8 33.3%,
#F5BA55 33.3%, #F5BA55 66.6%,
#F09741 66.6%, #F09741 99.9%);
}
2 colors
body{
background-image: linear-gradient(90deg,
#e1ecf3 50%, #e1ecf3 50%,
#F5BA55 50%, #F5BA55 50%);
}
Multiple colors
body{
background-image: linear-gradient(90deg,
#F6D6A8 20%,
#F5BA55 20%, #F5BA55 40%,
#F09741 40%, #F09741 60%,
#327AB2 60%, #327AB2 80%,
#3A94F6 80%);
}
Related
I want this background on my project like this:
This is easily achieved using CSS linear-gradient()s:
body {
--gridColor: #eee;
--gridSize: 10px;
background-image:
linear-gradient(to right, var(--gridColor) 10%, transparent 10%),
linear-gradient(to bottom, var(--gridColor) 10%, transparent 10%);
background-size: var(--gridSize) var(--gridSize);
}
See also Lea Verou's CSS patterns for more elaborate designs.
I'd like to insert a picture to separate the 'limits' of the progress bar.
Hence the right side would be red, than I'd have my little picture, followed by a green side
Is it possible?
Client side it is all just html, css and javascript. A css linear gradient already works great (boundaries at 10 and 90 percent)
.ui-progressbar {
background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 );
}
And if you want to combine it with an image, see
How do I combine a background-image and CSS3 gradient on the same element?
I have a body tag that needs serious decorating. I want to refrain from downloading images and/or using libraries. I have tried using many different background-colors to decorate my body tag, but it is just not working.
Here's what I need:
Pure CSS striped pattern (no images)
Pure CSS spotted pattern (polkadot, no images)
Way to split my body tag into four quadrants, each with different background
Generate pure css combo of 1 & 2?
I have searched for the answers to these, but I could only find image generators. I know there is a way to make gradients, but is there a way to make other pure CSS patterns, or should I download images?
You can use CSS3 background property to design almost anything you like, there are also websites that can generate css codes like this one for example:
body {
background-color:#ccc;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
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%);
}
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)
);