I have an HTML CSS Query.
I have the following JS Fiddle. http://jsfiddle.net/NC9NL/ If you look at this fiddle you will see I have two divs either side of the main content to give it the gradient effect. These two divs left and right are set at 100%;
However when the main content is larger than this e.g. needs a scroll bar these other two divs do not follow it down the page. Does anyone know how I can accomplish this.
Cheers,
I think you don't really need those additional columns. Just combine both gradients into one and assign it to the main column:
.container_body {
background: #fff;
background: -moz-linear-gradient(left, #c6c6c6 0%, #ffffff 2%, #ffffff 98%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c6c6c6), color-stop(2%,#ffffff), color-stop(98%,#ffffff), color-stop(100%,#c6c6c6));
background: -webkit-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
background: -o-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
background: -ms-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
background: linear-gradient(to right, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#c6c6c6',GradientType=1 );
}
Related
First, this is for the boxed part of a of a wordpress theme.
what i want to do is to make the top of the background transparent of 300px and the rest a #f2f2f2.
check this example:
background: linear-gradient(to top, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
i want it in pixels and not percentage
After some research and editing I was able to get that sharp change in color.
Here is the answer :
background: -webkit-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: -o-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: -moz-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
I have to apply gradient to button with following things.
For normal state of button, I want to use
Top gradient from #0069A6 to #0078C0
Bottom gradient from #005F96 to #004085
For Hover state of button, I want to use
Top gradient from #02356A to #024183
Bottom gradient from #002147 to #01152D
For on click state of button, I want to use
Top gradient from #004085 to #005F96
Bottom gradient from #0078C0 to #0069A6
I have tried the following code.
HTML
<button type="button" class="button_color">
Make Payment
CSS
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(to bottom,#005F96 10%,#004085 10%);
background: linear-gradient(to top,#0069A6 10%,#0078C0 10%);
}
Kindly help me get this solved.
You must use pseudo classes.
css for hover state will be writen 'button:hover {desierd css}'.
css for keydown state will be writen 'button:active{desierd css}'.
here is a link that describes the issue
http://www.w3schools.com/css/css_pseudo_classes.asp
hope it helps
You can use css selectors for this:
<style>
.button_color:hover{
background: linear-gradient(#01152D 10%,#0078C0 100%);
}
.button_color:active{
background: linear-gradient(#0000ff 10%,#ffffff 100%);
}
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(#ff002D 10%,#00eeC0 100%);
}
</style>
<button type="button" class="button_color">
Make Payment
</button>
The usage is simple: http://www.w3schools.com/cssref/sel_active.asp, there are other selectors that you can find by googling it. You can also change the color, border, and any property of your class and it will all be automated.
add any changes you want regard to your main class and when the selector activated, your css will be replaced.
please change the colors yourself, this is just a demo for how to do your work. You also don't need to include to top, etc. You have to play with the percentages. and that means the start of the color.
In your code, you set both of the start and end to 10% which it is wrong for a two color gradient.
For example, for 3 color gradient, one may use this: (red 10%, green 50%, blue 100%)
Take a look to the CSS-gradient-generator.
I don't know how you imagined it, so I created the gradients with hard breaks for you:
.button_color{
height:40px;
border-radius:10px;
color:white;
background: #0069a6;
background: -moz-linear-gradient(top, #0069a6 0%, #1e5799 50%, #0078c0 50%, #0078c0 51%, #005f96 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0069a6), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(51%,#0078c0), color-stop(100%,#005f96));
background: -webkit-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -o-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -ms-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: linear-gradient(to bottom, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0069a6', endColorstr='#005f96',GradientType=0 );
}
.button_color:hover{
background: #02356a;
background: -moz-linear-gradient(top, #02356a 0%, #1e5799 50%, #0078c0 50%, #0078c0 50%, #01152d 51%, #002147 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02356a), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#01152d), color-stop(100%,#002147));
background: -webkit-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -o-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -ms-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: linear-gradient(to bottom, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02356a', endColorstr='#002147',GradientType=0 );
}
.button_color:active{
background: #004085;
background: -moz-linear-gradient(top, #004085 0%, #005f96 50%, #0078c0 50%, #0078c0 50%, #0069a6 51%, #0078c0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004085), color-stop(50%,#005f96), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#0069a6), color-stop(100%,#0078c0));
background: -webkit-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -o-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -ms-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: linear-gradient(to bottom, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004085', endColorstr='#0078c0',GradientType=0 );
}
If this is not what you expected, try it yourself with the gradient generator.
You may try this one:
background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);
}
<button type="button" class="button_color">
Make Payment
I have this background:
.background:hover {
background: #F4F4F4 url(../images/arrow_down_over.gif) no-repeat right;
}
that I would like to change into a gradient like this one :
.background:hover{
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom, #f4f4f4 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee',GradientType=0 );
} /* IE6-9 */
But I would like to keep the arrow image. I can't find a way to do it. I did try something like this:
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%) url(../images/arrow_down_over.gif) no-repeat right; /* FF3.6+ */
or add this after the gradient properties but without any success.
background: url(../images/arrow_down_over.gif) no-repeat right;
I can't add another class so I have to deal with this CSS. Any idea how to do it?
You may try:
background: url(../images/arrow_down_over.gif), linear-gradient(...);
Multiple backgrounds must be comma-separated rather than space-separated, and they weirdly stack from top to bottom.
Also note that this is not necessarily supported by all browsers.
See http://css-tricks.com/stacking-order-of-multiple-backgrounds/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds for details
html
<div></div>
css
div{
width: 500px;
height: 500px;
background: linear-gradient(to top, #00f, #fff);
}
Does anyone know how to make ie work for gradient effect?
I have also applied filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f', endColorstr='#fff');
but it works differently in ie. You can see this in your test page, copy and paste then see the different between them. IE has deep color.
This is what you should have for cross-browser solution:
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,0,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0000ff',GradientType=0 );
Here is a working example. Also I recommend using some gradient generator for this. Makes your life a lot easier. For example try colorzilla
try this one
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#0000ff', GradientType='0');
How can i make this background with css3? Image
I want to repeat it and want not use a image.
thanks for help
You can do this using CSS3 gradients:
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 49%, #eaa82c 50%, #eaa82c 80%, #bc2020 81%, #bc2020 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#ffffff), color-stop(50%,#eaa82c), color-stop(80%,#eaa82c), color-stop(81%,#bc2020), color-stop(100%,#bc2020)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bc2020',GradientType=0 ); /* IE6-9 */
}
http://jsfiddle.net/gDJtD/
I suggest you have a look at http://lea.verou.me/css3patterns/ for this
Having said that, images are always going to be faster. Beware of not using css gradients just for the sake of using css gradients.