Top of background Transparent - html

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%);

Related

Only colour half a div with CSS gradients

is it possible to colour only half a div white from the left and the other side green? I want to do this on the 19th date in this graphic
td.specialDate:first-of-type {
background-image: linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
background-image: -webkit-linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
}

try something like this:
background: green;
background: -moz-linear-gradient(left, green 0%, white 50%);
background: -webkit-linear-gradient(left, green 0%, white 50%);
background: linear-gradient(to right, green 0%, white 50%);
Here a link to a code sample on CodePen
You can go crazy with gradients on this nice website
EDIT
If you want to color exactly half of the div, w/o the shade/gradient, use this code:
background: green;
background: -moz-linear-gradient(left, green 50%, white 50%);
background: -webkit-linear-gradient(left, green 50%, white 50%);
background: linear-gradient(to right, green 50%, white 50%);
if you want a diagonal from bottom left to top right, use this code:
background: green;
background: -moz-linear-gradient(45deg, green 50%, white 50%);
background: -webkit-linear-gradient(45deg, green 50%, white 50%);
background: linear-gradient(45deg, green 50%, white 50%);
Check the linked Codepen sample for the updated code sample.

Yes, and you're not too far off with the gradient:
html, body {
width:100%;
height:100%;
}
div {
width:100%;
height:100%;
}
div {
background: linear-gradient(to left, lightgreen 50%, transparent 50%);
}
<div>
</div>
And here's a Fiddle as well.

Check this code.
background: -moz-linear-gradient(left, #ffffff 50%, #0f0 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 50%,#0f0 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 50%,#0f0 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
JSFIDDLE

Use this in CSS:
div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red,
red 50%,
green 50%,
green 100%
);
}

Yes it is possible.
Here it is . You can copy the code by clicking "Copy Text" below. It's too long to post here.
I hope it helps.

How to use 2 gradients on single button

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

IE doesn't work gradient effect

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');

CSS3 Borders and Gradients

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 );
}

CSS repeat pattern with linear gradient

I'm on my first approach with photoshop patterns.I'm buildin a webpage where I want to use my pattern to give a nice effect to my webpage background.
The pattern I found is 120x120 px
If I was done here I should use this css:
background-imag:url(mypattern.jpg);
background-repeat:repeat;
But Im not done.Id like to **add to my page's background a linear gradient(dir=top/down col=light-blue/green) with the pattern fill layer on top of it, with blending mode=darken **.
This is the final effect:
I come to the point.
QUESTION:
Combining linear vertical-gradient effect and my 120x120 pattern is it possible to find a pattern that I could use to repeat itself endlessly both vertical and horizontal??which is a common solution in this case?
Hope It's clear
thanks
Luca

or you can use background gradinent css3
body { background: url('pattern.jpg') repeat;}
#container {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
}
to make it work in IE lte 7 add:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#00FFFFFF')
color is provided in #aarrggbb format, where aa=alpha(transparency), rest like normal hex color.

Apply
html{
background: url('mypattern.jpg') repeat;
}
body{
background: url('gradient.png') repeat-x;
width:100%;
height:100%;
}
where gradient.png is your white gradient which becomes transparent to it's bottom.

Dis will work, bg pattern with linear or radial gradient:
background-image: url(images/pattern.png), -webkit-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -moz-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -ms-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -o-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), radial-gradient(circle at 30% 40%, rgb(20,150,224), rgb(0,0,0));