I am attempting to make a div with 2 background colors, and I am aware that you can do the 50/50 gradient, but when you go more extreme, say, 20/80, the colors start to blend.
I have looked at this link 50%/50% hard gradient
but, again, when I attempt to change the values to higher and lower, it starts to blend. Any suggestions? Thanks.
Here is where I am trying to implement it: http://codepen.io/jettc/pen/zrOKqJ
percent = Math.floor((time/timerTotal)*100);
remainPercent = 100-percent;
console.log(percent, remainPercent);
$("#circle").css("background-image","-webkit-linear-gradient(top, #222222 "+percent+"%, grey "+remainPercent+"%)");
The gradient is just rendering how it is supposed to, you just need to change your CSS to make it how you want. To render to solid colors, both percentages must be the same.
Here is some different examples of this:
div{
width:200px;
height:200px;
background:linear-gradient( red 50%, blue 50%);
}
50/50
<div></div>
div{
width:200px;
height:200px;
background:linear-gradient( red 80%, blue 80%);
}
80/20
<div></div>
div{
width:200px;
height:200px;
background:linear-gradient( red 30%, blue 30%);
}
30/70
<div></div>
div{
width:200px;
height:200px;
background:linear-gradient( red 40%, blue 40%);
}
40/60
<div></div>
Updated codepen
As you can see from the above examples, the key is to set both of the percentages to the same, so there is no space to blend the two colors. See these two images for an example:
"-webkit-linear-gradient(top, #222222 "+percent+"%, grey "+percent+"%)"
You have to use the same percentages:
background-image: linear-gradient(bottom, #FFD51A 20%, #FAC815 20%);
or
background-image: linear-gradient(bottom, #FFD51A 80%, #FAC815 80%);
... the percentages are defining the color-stops position.
More about gradients here: http://www.w3schools.com/css/css3_gradients.asp and here https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Related
::-webkit-scrollbar-thumb {
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
transform: skewX(15deg);
}
I've realised that I cannot simply assign a transform via css so I was wondering if there is any other way to achieve a skew-like effect on my scrollbar to match other elements of the site.
Here is an example of my main menu highlighting with a 15deg skew transform. I'm looking to create the same effect but on a vertical scrollbar:
Could this possibly be achieved with a pseudo element or background image?
Multiple background can do this.
I considered 45deg to better see the result but you can adjust the angle like you want:
body {
width:300vw;
}
::-webkit-scrollbar {
width: 1em;
height:1em;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient( 45deg, transparent 10px,orange 0) left, /* 45deg */
linear-gradient(-135deg,transparent 10px,orange 0) right; /* 45deg - 180deg */
background-size:51% 100%;
background-repeat:no-repeat;
}
some text
Another idea to make it works on both scrollbar but with no transparency
body {
width:300vw;
height:300vh;
}
::-webkit-scrollbar {
width: 1em;
height:1em;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient(to top right, #fff 49%,transparent 50%) bottom left,
linear-gradient(to bottom left , #fff 49%,transparent 50%) top right,
orange;
background-size:1em 1em;
background-repeat:no-repeat;
}
some text
I am trying to create a radial-gradient shine affect to a div box and I am unsure whats the best way of doing so. I Have found no resources of achieving what I want to achieve; just shine affects which look like overlay.
Most of the examples I have found looks like this http://jsfiddle.net/nqQc7/512/.
Below I have displayed what I am trying to create.
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
/*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: colorChange 5s infinite;
}
#keyframes colorChange {
0% {
background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
}
50% {
background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
}
100% {
background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
}
}
<div id="shine-div">
Shine
</div>
Is it possible to do this? I'd also like to make the white shine on top to go from left to right smoothly? Am I even on the right track with my attempt?
You can do the gradient differently and animate the position. The trick is to double the size of the gradient and make the value of color stop half of their actual values so you keep the same visual gradient then you can animate it from left to right.
It won't look exactly the same as the gradient you defined in the animation due to the calculation of farthest-corner.
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: colorChange 5s infinite alternate;
}
#keyframes colorChange {
to {
background-position:top left;
}
}
<div id="shine-div">
Shine
</div>
To get more closer to your gradients you have to also animate the background-size (see below for calculation details)
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 24.5%, #800080 62.5%, #b300b3 100%);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: colorChange 5s infinite alternate linear;
}
#keyframes colorChange {
from { /* radial-gradient(farthest-corner at top right, ..) */
background-position:left top;
background-size:200% 100%;
}
49.9% {
background-position:left top;
}
50% { /* radial-gradient(farthest-corner at top center, ..) */
background-size:100% 100%;
}
50.1% {
background-position:right top;
}
to { /* radial-gradient(farthest-corner at top left, ..) */
background-position:right top;
background-size:200% 100%;
}
}
<div id="shine-div">
Shine
</div>
You can also do the same animation considering pseudo element and transformation to have better performance:
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
overflow:hidden;
position:relative;
z-index:0;
}
#shine-div:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
width:400%;
height:200%;
background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%);
animation: colorChange 5s infinite alternate linear;
}
#keyframes colorChange {
from {
transform:translateX(-50%);
}
50% {
transform:scaleX(0.75) translateX(-50%)
}
to {
transform:translateX(-25%);
}
}
<div id="shine-div">
Shine
</div>
More in-depth
To make the answer more generic, I am going to detail how you can animate any kind of gradient from two different position. The main trick is to write the gradient differently to have its definition a constant ( radial-gradient(<constant_definition>) ) and animate the background-position (and the background-size in some cases)
Let's consider our gradient to be background:radial-gradient(Rh Rv at X Y, color1 p1, color2 p2) where Rh and Ry are respectively the horizontal radius and vertical radius of our ellipse (if both are equal or only one value is used then it's a circle).
First, we double the size of the gradient. This trick will allow us to easily adjust the position of the gradient using percentage value (explained here: Using percentage values with background-position on a linear-gradient)
If the radius is defined with pixel values we keep it but if it's defined with percentage value we divide it by 2 since it's relative to the size that he have increased. If both radius are in percentage we can either divide both by 2 or keep them and divide the color stops by 2.
Second, we remove the at X Y which will bring the gradient in the center thus we need to rectify the position using background-position. It's clear that if the gradient was at 0 0 we need to use background-position:100% 100%
The green box is our background twice bigger than the element (the black box) and the red circle is our gradient. By adjusting the background position we visually position the gradient at 0 0.
For any X, Y values we will logically have background-position:calc(100% - X) calc(100% - Y)
If X,Y are pixel values we can also use background-position: right -X bottom -Y (note that it' -X and not - X, we use the negative value)
Examples:
With pixel values
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(20% 100px at 20px 30px,red 30%,blue 60%);"></div>
<div class="box" style="background:radial-gradient(10% 100px,red 30%,blue 60%) right -20px bottom -30px/200% 200%;"></div>
<br>
<div class="box" style="background:radial-gradient(40% 40% at 40px 50px,yellow 30%,blue);"></div>
<div class="box" style="background:radial-gradient(40% 40%,yellow 15%,blue 50%) right -40px bottom -50px/200% 200%;"></div>
<div class="box" style="background:radial-gradient(20% 20%,yellow 30%,blue) right -40px bottom -50px/200% 200%;"></div>
With percentage values
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(20% 100px at 50% 10%,red 30%,blue 60%);"></div>
<div class="box" style="background:radial-gradient(10% 100px,red 30%,blue 60%) calc(100% - 50%) calc(100% - 10%)/200% 200%;"></div>
<br>
<div class="box" style="background:radial-gradient(40% 40% at 30% 70%,yellow 30%,blue);"></div>
<div class="box" style="background:radial-gradient(40% 40%,yellow 15%,blue 50%) calc(100% - 30%) calc(100% - 70%)/200% 200%;"></div>
<div class="box" style="background:radial-gradient(20% 20%,yellow 30%,blue) calc(100% - 30%) calc(100% - 70%)/200% 200%;"></div>
So if we want to animate a gadient from:
radial-gradient(Rh Rv at X Y, color1 p1, color2 p2)
to
radial-gradient(Rh Rv at X1 Y2, color1 p1, color2 p2)
we write it differently and we animate the background-position:
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
.first {
background:radial-gradient(10% 100px,red 30%,blue 60%) calc(100% - 50%) calc(100% - 10%)/200% 200%;
animation:change1 2s linear infinite alternate;
}
.second {
background:radial-gradient(20% 20%,yellow 30%,blue)right -50px bottom 0/200% 200%;
animation:change2 2s linear infinite alternate;
}
#keyframes change1 {
to {
background-position:calc(100% + 10%) calc(100% - 80%);
}
}
#keyframes change2 {
to {
background-position:right -100px bottom -100px;
}
}
<div class="box first" ></div>
<div class="box second"></div>
Now let's consider more tricky cases, like our initial example, using farthest-side in order to define the size. We will do the same logic and convert
radial-gradient(farthest-side at X Y, color1 p1, color2 p2);
to
radial-gradient(farthest-side, color1 p1, color2 p2) Px Py/Sx Sy no-repeat;
I will explain for one axis (X) and the same apply to the other
farthest-side define the radius to be the distance from the gradient center to the farthest side of the gradient box (the gradient box is by default the element itself since we didn't define any size). If X is a percentage value then the radius is the max between X and 100% - X and in the transformed gradient the radius will be 50% since we are at the center. So we need to match the first radius with 50%*Sx
If X is 50% then Sx should be 100% and if X is 0 or 100% then Sx should be 200%.
The formula is Sx = max(X,100% - X)*2
The position is easier in this case due to the nature of the gradient where the shape should touch one side
If X within [0 50%[ Px should be 100% (right)
If X is 50% any value for Px will work since Sx=100%
If X within ]50% 100%] Px shoudd be 0% (left)
Related question: Using percentage values with background-position on a linear-gradient
Examples:
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(farthest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(farthest-side, red 20%, blue 100%, yellow 50%) 100% 0/calc(80%*2) calc(60%*2)"></div>
<br>
<div class="box" style='background:radial-gradient(farthest-side at 22% 100%,red 40%, blue 100%,yellow 100%)'></div>
<div class="box" style="background:radial-gradient(farthest-side,red 40%, blue 100%,yellow 100%) 100% 0/calc(78%*2) calc(100%*2)"></div>
For the farthest-corner we do exactly the same:
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(farthest-corner at 20% 60%, red 20%, blue 50%, yellow 60%)" ></div>
<div class="box" style="background:radial-gradient(farthest-corner, red 20%, blue 50%, yellow 60%) 100% 0%/calc(80%*2) calc(60%*2)"></div>
<br>
<div class="box" style="background:radial-gradient(farthest-corner at 40% 100%, red 20%, blue 50%, yellow 60%)" ></div>
<div class="box" style="background:radial-gradient(farthest-corner, red 20%, blue 50%, yellow 60%) 100% 0%/calc(60%*2) calc(100%*2)"></div>
We can also transform farthest-side (or farthest-corner) to Rh Rv and do the previous calculation but it won't be useful for the animation since we will have two gradient with different radius whereas we need the same gradient.
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(farthest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(80% 60% at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(80% 60%, red 10%, blue 50%, yellow 50%) 80% 40%/200% 200%"></div>
If X is a pixel value we have two cases:
The element has a fixed width: In this case we can simply convert the pixel value of X as a percentage of the width and we do the same logic as above.
The element has a variable width: In this case it would be tricky to convert the gradient (probably impossible) because the shape will change based on the width. When width-X > X we will have a variable radius and when width-X < X we will have a fixed radius. I don't think we can express this using background-size and background-position. Example:
body {
margin:0;
height:100vh;
background:radial-gradient(farthest-side at 400px 200px,blue 40%,yellow 50%);
}
For the closest-side will do the same logic considering Sx=min(X,100% - X)*2 BUT we should add no-repeat and a background-color equal to the last color in the gradient since the size is less than 100%
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(closest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(closest-side, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2)"></div>
<div class="box" style="background:radial-gradient(closest-side, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2) no-repeat,yellow"></div>
<br>
<div class="box" style='background:radial-gradient(closest-side at 22% 10%,red 40%, blue 100%,yellow 100%)'></div>
<div class="box" style="background:radial-gradient(closest-side,red 40%, blue 100%,yellow 100%) 0 0/calc(22%*2) calc(10%*2)"></div>
<div class="box" style="background:radial-gradient(closest-side,red 40%, blue 100%,yellow 100%) 0 0/calc(22%*2) calc(10%*2) no-repeat,yellow"></div>
We can do the same for closest-corner but we will have some issue due the fact that the gradient can overflow the gradient box.
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(closest-corner at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(closest-corner, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2)"></div>
<div class="box" style="background:radial-gradient(closest-corner, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2) no-repeat,yellow"></div>
To rectify this we can divide the color stop by 2 to make sure we keep the whole gradient inside. Then we make the size twice bigger and we rectify the position
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
<div class="box" style="background:radial-gradient(closest-corner at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(closest-corner, red 10%, blue 50%, yellow 50%) -100% 33%/calc(20%*4) calc(40%*4)"></div>
<div class="box" style="background:radial-gradient(closest-corner, red 10%, blue 50%, yellow 50%) -100% 33%/calc(20%*4) calc(40%*4) no-repeat,yellow"></div>
<br>
<div class="box" style='background:radial-gradient(closest-corner at 22% 10%,red 40%, blue 100%,yellow 100%)'></div>
<div class="box" style="background:radial-gradient(closest-corner,red 20%, blue 50%,yellow 50%) -100% 0%/calc(22%*4) calc(10%*4)"></div>
<div class="box" style="background:radial-gradient(closest-corner,red 20%, blue 50%,yellow 50%) -164% -18%/calc(22%*4) calc(10%*4) no-repeat,yellow"></div>
Even without animation, the syntax of the gradient without the at X Y is more supported. Some browser like Safari doesn't support the at (How to make radial gradients work in Safari?)
Using CSS variables and with the new #property we can easily animate radial-gradient (or any kind of gradient). The support cover only Chrome and Edge for now.
#property --x {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
#shine-div {
height: 30vh;
width: 60vw;
margin: auto;
border-radius: 10px;
background: radial-gradient(ellipse farthest-corner at var(--x) 0%, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);
animation: colorChange 5s infinite alternate;
}
#keyframes colorChange {
0% {
--x:0%;
}
50% {
--x:50%;
}
100% {
--x:100%;
}
}
<div id="shine-div"></div>
All we have to do is to define the position using a variable --x that will use percentage values and we animation that variable. As simple as that!
SVG solution
The author did not ask for a solution to his problem using SVG. But it will probably be useful to solve one issue in several ways.
Gradient attribute values were taken from the #Temani Afif response.
The SVG radial gradient formula for this question:
<radialGradient id="radGrad" fx="0%" fy="5%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
To animate the gradient, you can use any attribute included in the formula.
The examples below will use the attributes fx andfy
Animation of horizontal gradient movement
Animation starts after clicking on a rectangle
svg {
width:50%;
height:50%;
}
.txt {
font-family:sans-serif;
font-size:28px;
font-weight:bold;
text-anchor:middle;
fill:#FFDD00;
}
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="0%" fy="0%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/>
<text class="txt" x="50%" y="60%"> Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fx"
dur="3s"begin="gr1.click"
values="0%;100%;0%"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>
An animation of the vertical gradient movement.
svg {
width:50%;
height:50%;
}
.txt {
font-family:sans-serif;
font-size:28px;
font-weight:bold;
text-anchor:middle;
fill:#FFDD00;
}
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="48%" fy="0%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/>
<text class="txt" x="50%" y="60%"> Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fy"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;50%;50%;0%"
keyTimes="0;0.1;0.5;0.6;0.7;0.9;1"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>
Moving the gradient diagonally
Two attributes are simultaneously animated: fx andfy
svg {
width:50%;
height:50%;
}
.txt {
font-family:sans-serif;
font-size:28px;
font-weight:bold;
text-anchor:middle;
fill:#FFDD00;
}
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="0%" fy="0%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/>
<text class="txt" x="50%" y="60%"> Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fy"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"
repeatCount="1"
restart="whenNotActive" />
<animate xlink:href="#radGrad"
attributeName="fx"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>
So I am trying to implement a hover state animation for some text on my portfolio website. In short, the text needs to animate from black or white ( can change ), to white, to blue.
I've tried using something like the following
#keyframes textAnimation {
0% {
color: inherit
}
50% {
color: white
}
100% {
color: blue
}
}
However, because it's a hover animation - if I stop hovering, the animation cuts and it reverts to its previous value. I have an accompanying animation ( Purely CSS ) to go along with the hover, so I need it to basically reverse the animation back to the original value.
I've also tried adding classes to the <span> using setTimeout... however this is quite an intensive page as it is, and from past experiences, mixing JS + CSS this way - and have the timings be perfect - is super hard on lower-end machines.
P.S I'm using React.js
Any thoughts would be greatly appreciated.
You can try gradient coloration with transiton:
.text {
background-image:
linear-gradient(to bottom, currentcolor , white, blue);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
background-size:100% 1000%;
background-position:top;
background-repeat:no-repeat;
font-size: 70px;
transition:1s all;
}
.text:hover {
background-position:bottom;
}
body {
background:pink;
}
<span class="text" style="color:red">Some text</span>
<span class="text" style="color:black">Some text</span>
Here the color changes from white to blue to black but you can use any colors. It's very difficult to reverse animations only by CSS so a little js help goes a long way. Hope that helps you!
let node = document.getElementsByClassName("notesColor1"); //returns an array of all matching elements
node[0].addEventListener("mouseover",function(){
node[0].classList.add("forward");
node[0].classList.remove("backward");
});
node[0].addEventListener("mouseout",function(){
node[0].classList.add("backward");
node[0].classList.remove("forward");
});
.notesColor1{
color:white;
background-color:grey;
font-size:2rem;
}
.forward{
animation:anim 1s ease forwards;
}
.backward{
animation:anim-reverse 1s ease;
}
#keyframes anim{
0%{
color:white;
}
50%{
color:blue;
}
100%{
color:black;
}
}
#keyframes anim-reverse{
0%{
color:black;
}
50%{
color:blue;
}
100%{
color:white;
}
}
<div class='notesColor1'>notest1</div>
You can add a simple js that on hover event check: if it has a class a remove it and add
class b else remove class b and add class a.
I have a page with a background that is styled to appear as diagonal lines. I want to make the colour of these lines change with jQuery slowly and fade as they change. Is this possible?
I have started a fiddle with the CSS in it to display the background as static. http://jsfiddle.net/rabelais/LZc7m/
and here is the code
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
background-size: 5px 5px;
width:100%;
height:100%;
}
You could make the background image a GIF, or preferably PNG if you can afford the extra size, and utilize transparency. Your image would have white and transparent stripes. Then with the background image overlaying on top of a background color, you can animate the background color. The effect will be the color of the lines changing.
Building on rgbflawed answer .. you will need the Color Animation JS
here is a JSfiddle example
$(document).ready(function () {
$('html, body').click(function () {
$('body').stop().animate({ backgroundColor: '#ff0000' }, 1200);
$('body').delay(1200).animate({ backgroundColor: '#ffffff' }, 1200);
});
});
CSS
body {
background-image: url(http://i.stack.imgur.com/V3pEr.png);
background-color: #12877f;
}
An update is here to fade to white
I recommend using css3 transitions instead of just jQuery.
Toggle through the classes with jQuery and set the background gradient in a seperate css file.
Example:
.defaultClass{
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-ms-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
Added the blue class to the element would make it fade too blue in 0.3 seconds.
Here's the fiddle for it: http://jsfiddle.net/Rudi91/sttdL/
EDIT: The biggest plus with this is that jQuery animations can run slow on mobile phones/tablets whereas css3 animations usually run smooth
I've developed a lightweight jQuery plugin (~3kb) that is using CSS3 transitions to accomplish what you're looking for - ColorRotator.js
You can use it to transition various CSS color properties, such as background color, box-shadow color and text colors. More properties will be supported in the future.
Example Usage:
$('#element').colorRotator({
colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'],
property: 'background'
});
Here are a few live demos
I have a div
<div class="test">
Some text
</div>
I would like to have different background color for the same div by percent (Horizontal coloring)
-----------------------------
| 20% | 30% | 50% |
| Red | Yellow | Green |
-----------------------------
Is this possible with CSS?
You can use CSS3 Gradients[1] to achieve such effect
div {
background: linear-gradient(to right, #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
height: 400px;
}
Demo
You can create such gradients over here
You can also use px as a unit, along with % if you are looking for static gradient widths
Demo (Please add browser-prefixes if you are looking for a cross browser solution, I've not added all the rules in this demo)
Demo 2 (Vertical Split, just change to right to to bottom)
1. More on CSS3 Gradients
2. Browser Support
You could achieve this by using a gradient:
Either google it and create an own.
Or use a generator like this:
http://www.colorzilla.com/gradient-editor/
which gives you the following css-code:
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(left, #ff3019 0%, #d40000 20%, #f2f600 20%, #f2f600 50%, #1e7a00 50%, #1e7a00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(20%,#d40000), color-stop(20%,#f2f600), color-stop(50%,#f2f600), color-stop(50%,#1e7a00), color-stop(100%,#1e7a00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* IE10+ */
background: linear-gradient(to right, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#1e7a00',GradientType=1 ); /* IE6-9 */
You could create three descendant divs within the parent. Absolutely position them, make the parent transparent, then give the three divs a z-index of 0 so they sit underneath the text, not on top.
This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required
#div{
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
#div:before,
#div:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
DEMO