Adjusting css gradient background - css

Is it possible to amend/adjust a gradient background so the fade starts lower done. Example, see the fiddle here http://jsfiddle.net/gZgLc/5/
Let's say for example I wanted the white ti start to fade in at the '123test' text, how would I do this?
HTML
<div id="main">
<div class="feature-box">
<div class="feature-box-tab">
<div class="slide" style="height:250px;">
<div class="inner">
<ul class="breadcrumb">
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
<div class="single-feature-top">
<p>123test. 123test<br><br>
</div>
<br>
</div>
CSS
#main {
width:958px;
position:relative;
top:-9px;
background:#FF9900 url(../images/core/header.png) no-repeat center top;
border:1px solid #dadada;
border-top:none;
border-bottom:2px solid #dadada;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-ms-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
margin:0 auto 25px;
background: #fff;
background: url('linear-gradient.png') 0 0 repeat-x;
background: -webkit-linear-gradient(#fff, #FF9900);

Definately ... You have to use percentages for that.
Solution
All the code was generated from this website.Source Website
CSS added.
background: -moz-linear-gradient(top, #fff 0%,#fff 75% #ff9900 80%, #ff9900 100% );
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff),color-stop(70%, #fff), color-stop(80%, #ff9900), color-stop(100%, #ff9900));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%);
/* IE10+ */
background: linear-gradient(to bottom, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%, #ff9900 100%, #ff9900 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eded2f', endColorstr='#ff9900', GradientType=0);
/* IE6-8 */
EDIT: Also remember that this may not work exactly the same on older IE browsers(IE6-8).
EDIT2: Changed colours in the fiddle to reflect your desired colours

Related

Border top styling (linear gradient)

I have an image on which I have added a top border of 20px.
I want to color that top-border in a way that it shows a linear gradient.
I have tried in different ways without success.
Could you guys help me out? This is the code (html and css):
<div class="logo"><img src="images/tiger.jpg"></div>
.logo img {width:100%;top-border:20px solid;}
Please try this. I have made border to use before class.
.logo{position:relative;width:200px;}
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.logo:before{
/* IE10+ */
background-image: -ms-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Opera */
background-image: -o-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffb76b), color-stop(51, #FF7C00), color-stop(100, #ff7f04));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* W3C Markup */
background-image: linear-gradient(to right, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
position:absolute;
content:"";
left:0;
right:0;
width:100%;
height:20px;
top:0;
}
<div class="logo"><img src="https://dummyimage.com/200x200/000/fff&text=sample+image" alt=""></div>
You can add a colored top border like this;
border-top: 20px solid #cccccc;
Instead of #cccccc, you can give the desired color

using gradient but without mixing color

I don't know if that is a stupid question or something like that but i want a div to be filled certain percent by one color and remaining part by other.
And the gradient property
.div{
background: linear-gradient(to right, #000 50%, #fff 50%);
}
Results into
.div{
background: linear-gradient(to right, #000 28%, #fff 72%);
}
And this results into
i want to get the white and black not to mix and be seperated on all percentages.
try this
.div{
background: -webkit-linear-gradient(left, black 50%, white 0%);
background: -moz-linear-gradient(left, black 50%, white 0%);
background: -ms-linear-gradient(left, black 50%, white 0%);
background: linear-gradient(left, black 50%, white 0%);
}
When you did:
background: linear-gradient(to right, #000 28%, #fff 72%);
it means:
Black (#000) from 0% to 28%, then start a gradient to white (#fff) until reach 72% and after this gradient, use white until the end.
So you can use:
background: linear-gradient(to right, #000 28%, #fff 28%);
This way you'll get: black from 0 to 28%, a gradient from 28% to 28% (it means, no gradient), and white from 28% to the end. So you'll get only back and white, without the gradient between them.
Why do you want to use gradient in first place if you dont want them to mix?
Anyway this is working:
div{
height: 200px;
background: -moz-linear-gradient(left, white 50%, black 0%);
background: -linear-gradient(left, white 50%, black 0%);
background: -webkit-linear-gradient(left, white 50%, black 0%);
}
you can put any value for white. It wont mix.
do you mean :
div{
background: linear-gradient(to right, #000 28%, transparent 28%, transparent 72%,#fff 72%);
color:green
}
body {
background:yellow
}
<div> lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla</div>
You can Give Multiple gradient Color to a Div
Use this Css
Check this Demo
http://jsfiddle.net/dineshkanivu/2pcccd2p/1/
http://jsfiddle.net/dineshkanivu/2pcccd2p/
background: #ff474a; /* Old browsers */
background: -moz-linear-gradient(top, #ff474a 0%, #7a2e68 50%, #0cf900 51%, #0a0784 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff474a), color-stop(50%,#7a2e68), color-stop(51%,#0cf900), color-stop(100%,#0a0784)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff474a', endColorstr='#0a0784',GradientType=0 ); /* IE6-9 */

CSS3 gradient and background image combined

PROBLEM
I am trying to combine the CSS3 gradient feature along with a background-image sized specifically and placed specifically in the div. Strange thing is that the background-size property not only applies the size to the image, but also the gradient. However I need to keep the image 30px and apply the graident all the way. Any help would be welcomed?
Thanks in advance
CSS
.accordian-head {
height: 50px;
padding: 10px 10px;
background: #ADADAD;
background-image: url(../img/plus-icon.png) 97% 50%;
background-position:97% 50%;
background-repeat:no-repeat; /* fallback */
background-size:30px;
background-image: url(../img/plus-icon.png), -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD)); /* Saf4+, Chrome */
background-image: url(../img/plus-icon.png), -webkit-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Chrome 10+, Saf5.1+ */
background-image: url(../img/plus-icon.png), -moz-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* FF3.6+ */
background-image: url(../img/plus-icon.png), -ms-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* IE10 */
background-image: url(../img/plus-icon.png), -o-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Opera 11.10+ */
background-image: url(../img/plus-icon.png), linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* W3C */
}
You have two layers, one for the image and one for the gradient. When you specify one background-size value, it applies to both layers.
To stretch the gradient you need to explicitly give it its own size:
background-size:30px, 100%;
What you could do is use nested divs, and apply the gradient on top.
<div class="gradient">
<div class="image" style="background-image:url(../img/plus-icon.png)">
</div>
</div>
.gradient {
background: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD));
/* etc */
}
.image {
background-size: 30%;
}

Creating gradient lines in CSS

Question, if I wanted to create gradient lines that fade out on the top and bottom, similar to the lines seen on AT&T's drop down menu that separate the menu items, how would I go about that? I want to create a similar effect on a menu that I am coding, and I would prefer not to use images. Is there a way to achieve this in CSS? Help much appreciated! Thanks.
Microsoft CSS Gradient is a GUI you can use. just copy the CSS into your code:
Example:
#div {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}
You can create a div with 1px width then assign a gradient on it. Like that :
.line{
width:1px;
height : 25px;
margin : 0 5px;
background: rgb(125,185,232);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );
}
Fiddle : http://jsfiddle.net/jPnXz/
Here a CSS gradient generator (i used it for the CSS) : http://www.colorzilla.com/gradient-editor/
Great documentation on CSS3 Gradients
http://www.css3files.com/gradient/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
Gradient Generators
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com
http://www.cssmatic.com/gradient-generator
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
You have repeating-gradient as well for this :
http://codepen.io/anon/pen/zbLkl
background:repeating-linear-gradient(
top ,
white 0,
white 1em,
turquoise 1em,
turquoise 1.2em) 0 2.4em;
line-height:1.2em;
Set equal line-height to gradient , so gradient will follow font-size.
the time to dig it, an old example with squares. and background-size.http://dabblet.com/gist/4750827
background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>

How do you make a gradient background in css?

Is there any way to create a gradient background using nothing but CSS?
You can see an example of what I want to achieve on this website.
Use this in your CSS:
background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17)));
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
/* This last line is all you need for modern browsers */
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
See also:
The specification
The MDN documentation
Simple and easy to make. Try this link
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFEFF), color-stop(1, #AF00EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FCFEFF 0%, #AF00EF 100%);
Use background-image with linear-gradient() or radial-gradient().
.linear-gradient {
background-image: linear-gradient(to bottom, #000077, #65A5FF);
}
.radial-gradient {
background-image: radial-gradient(#000077, #65A5FF);
}
div {
width: 100%;
height: 200px;
}
<h1>Linear gradient</h1>
<div class="linear-gradient"></div>
<h1>Radial gradient</h1>
<div class="radial-gradient"></div>
According to caniuse.com, CSS gradients are supported by all major browsers. If you have to support IE <= 9, use plain-color or image background fallback. If you have to support Android Browser <= 4.3, also use prefixed version (-webkit-linear-gradient).
.bckgrnd {
background-color:Green;
background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));
background-image: -webkit-linear-gradient(top, Green, Yellow);
background-image: -moz-linear-gradient(top, Green, Yellow);
background-image: -ms-linear-gradient(top, Green, Yellow);
background-image: -o-linear-gradient(top, Green, Yellow);
}
Try this website.
http://www.colorzilla.com/gradient-editor/
But there are also images and other things on this website, so if you want to copy the style, look how they have done it and try to implement it on your own ! There is also a website which has pretty neet background pattern's which, combined with gradients look absolutely rich and beautiful:
http://subtlepatterns.com/
A simple sample code for gradients which will be displayed in every browser:
background: rgb(243,226,199);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZTJjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxOWU2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I2OGQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWQ0YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)));
background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -o-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );
background-image: linear-gradient(to bottom, #FFFFFF, #FAFAFA);
or
background: linear-gradient(#FFFFFF, #FAFAFA);
Add two div tag and give background color link this
<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>
This is not exact syntax this is an idea that how u can do

Resources