line-gradient not working when switchig direction - css

I am making a website and I have a problem with line-gradient on an arrow:
I have two arrows (one in each direction) with a line-gradient. If I hover on the arrow the gradient moves. This works perfect on the arrow looking to left, but not on the arrow looking to right. There happens nothing.
Here is the css code of the working arrow:
.AnimTextGradient1 {
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -moz-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -ms-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -o-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 0.5s;
background-size: 200% auto;
} .AnimTextGradient1:hover {background-position: right center;}
For the other arrow I switched every "right" to "left"
Here is a JSFiddle of it: https://jsfiddle.net/2eqt694v/
Does someone know how to solve this problem?


This is likely because the background is already left-aligned. Unless you specify a background-position; it's default value will be top left. As your gradient does not
change in the y-axis there is no discernable difference when you alter to
background-position: left center;
in your code. I would recommend either anchor the background to another value, center center/right center in .AnimTextGradient2 or add a gradient in the y-axis.
see https://jsfiddle.net/yraz3odt/

Related

Multiple gradients and radial gradient with center outside of the element

Is it possible to get a similar result with CSS Gradients? Can you use 2 gradients on one div and can the radial one have a center outside the div?

It is definitely possible to add more than one gradient to an element (even a combination of linear and radial gradients) by providing them in comma separated format like in the below snippet. The gradient that is specified first (from the right side) forms the bottom most layer while that which is specified last comes on top. Key thing to note is that the gradient (on top) must have colors with alpha less than 1 to be able to show the colors in the lower layers.
Coming to the second part of the question, radial gradients can be created such that their center point is outside the div. This can be done by specifying negative values for the position.
The gradient in the below snippet does not tally 100% with the image provided in question but you can get the idea.
div{
height: 200px;
width: 150px;
border: 1px solid;
border-radius: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), radial-gradient(ellipse at -40% -50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 50%);
background-size: 180% 200%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='gradient'></div>

Try this
.color background: rgba(249,124,102,1);
background: -moz-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(249,124,102,1)), color-stop(50%, rgba(246,160,147,1)), color-stop(51%, rgba(248,85,63,1)), color-stop(71%, rgba(243,93,73,1)), color-stop(100%, rgba(236,98,85,1)));
background: -webkit-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -o-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: linear-gradient(135deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97c66', endColorstr='#ec6255', GradientType=1 );
}
.rounded_rec {
width: 150px;
height: 150px;
border-radius: 5px;
border: 1px solid red;
background-color: black;
}
Html
<div class="rounded_rec color">
</div>
Kindly check this link
Check this link also
Check this link and let me know is this what you want

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 */

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>

Flashlight effect with css

Here's what I'm trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.
I've tried using SVG instead of css as I thought it might be easier, but I've ran into a few problems. Can anyone point me in the right direction?
Edit: Here's an image of what I'm trying to achieve:

You can use a radial-gradient as the background image like this:
html {
background: #ccc;
background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
min-height: 100%;
}
This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.
You can read more about the CSS radial-gradient property at MDN.
Here is an example: http://jsfiddle.net/kUFNV/4/

Why not use a CSS gradient? Here:
background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );
Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.
Good luck!

I'd recommend playing around with one of the CSS3 gradient generators like this one. With a few different color stops on a radial gradient, you should be able to accomplish something pretty close.
Here's one I put together quickly: http://jsfiddle.net/43k6F/

Trouble getting a CSS vertical linear background gradient to display properly in all major browsers

I got it to display exactly how I want it in Firefox, but with every other browser there seems to be some problems. This website isn't exactly public (as in, no one knows of it) yet as I'm still trying to get things to display properly, but the URL is: http://www.mixbin.net (just view:source for the code - there's nothing server side interfering)
Firefox: Perfect.
Chrome: Perfect except the bottom margin is being ignored in the .content class.
Opera: Perfect except the bottom margin is being ignored in the .content class.
Safari: Displays gradient properly but forces a refresh as soon as you scroll halfway down the page.
Internet Explorer: Displays gradient properly but .content div is cut off where the gradient stops.
background:linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background:-moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background:-ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background:-o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background:-webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#353535',GradientType=0 ); /*IE6-9*/
No images wanted. So please don't reply with, "just make a background image".
Update 2: Everything (including IE), is now working. I switched these two lines from:
background:-webkit-linear-gradient(top,#000000 0,#353535 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,#353535));
To:
background:-webkit-linear-gradient(top, #000000, #353535);
background:-webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));

If your CSS for the gradient is:
background: linear-gradient(top, #000000 0%, #353535 512px);
there will be no need for a <div> with height 512px. Unfortunately, this solution works for every browser except IE.
Back to your extra background <div> approach. I copied and modified your code a little. This works for all browsers.
body {
background: #353535;
}
.content {
background-color: white;
height: 1000px;
margin: 20px auto;
width: 300px;
z-index: 2;
position: relative;
}
#background {
position: absolute;
top: 0;
height: 512px;
width: 100%;
background: linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background: -moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background: -ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background: -o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0); /*IE6-9*/
}
<body>
<div id="background"></div>
<div class="content"></div>
</body>

This might not be the solution you are looking for but, since you will have to use hacks to make it looks the same on different browsers, why wont you use an image of the gradient and repeat it in the background.
If your background gradient is 300px, make the image with 300px height and 1px width (image size wont be over 1KB), and repeat it in your background
background: url('bg_gradient.jpg') repeat-x 0px 0px;
It will work on all the browsers without any hassle;

Resources