This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 8 years ago.
I have one question about transition effect. I created this fiddle
I want to add a transition effect for hover. But it is not working. Anyone can help me here ?
.h_grid_2 .gradient_c_grd_2 {
position:absolute;
width:384px;
height:200px;
z-index:1;
background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
-webkit-transition: 1s all;
transition: 1s all;
}
.h_grid_2:hover .gradient_c_grd_2 {
position:absolute;
width:384px;
height:200px;
z-index:1;
background: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255 255, 255, 0.2));
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0, 0), rgba(255, 255, 255, 0.2));
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
-webkit-transition: 1s all;
transition: 1s all;
}
Checkout my way: http://jsfiddle.net/gqLgu7jw/1/
The idea is to add another div (.gradient_c_grd_3) and use styles like these:
.h_grid_2:hover .gradient_c_grd_3{
opacity: 1;
}
.h_grid_2:hover .gradient_c_grd_2 {
opacity: 0;
}
This is impossible for now! CSS transitions do not support background images yet.
But you can play with ghe background-size and background-position:
Quoted from Animating CSS3 Gradients:
... since CSS3 gradients are not really properties, but are actually
images created by the browser, they aren’t in that list of animatable
properties. But that doesn’t mean you can’t animate gradients.
Gradients, just like standard images, are subject to certain
background-related properties that are animatable. These include
background-size and background-position.
For some basic code-snippets and examples incorporating this idea, I suggest you have a look at the above website.
Related
I have this a scrollable component:
<div>
<div className="scrolling-component">...</div>
<div className="button">...</div>
</div>
And in the scss file I have:
.scrolling-component {
background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
height: 100px;
}
But I checked the dev tools and it looks like there's something wrong with the syntax, I've been looking at it for a while now and have yet to figure out what exactly is wrong with it, I was thinking perhaps it's the radial-gradient, help is appreciated!
I tried your code and dev tools are showing error 'Invalid property value' in background. you forgot to add 'at' in radial gradient:
working gradient:
linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
I'm currently trying to create a linear-gradient using CSS.
The gradient should start all black on the left side and end with a lowered opacity in the middle. Now start with a lower opacity and end with normal opacity again on the right side.
My problem is the following:
I only get a good result using two different div elements.
Example:
<div style="float: left; background: linear-gradient(to right, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0) 100%);"></div>
<div style="float: right; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 99%, rgba(0, 0, 0, 0.69) 100%);"></div>
My Question:
How could I create the linear-gradient in one div element?
Screenshot outcome:
In your left div, change the 100% to be 50% and then copy the first rgba as your 100% state:
<div style="background: linear-gradient(to right, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.69) 100%); height:20px;"></div>
You can consider multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0)),
linear-gradient(to left, rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0));
background-repeat:no-repeat;
background-size:50% 100%;
background-position:left,right;
}
I have this line of code
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
As you can see its half grey half black. Is there a way to make the grey part of it transparant, so then it would be half transparant half black..
Thanks in advance,
Kevin
You can use rgba() to achieve this where the first 3 parameters are the color you want (in your case, 138, 138, 138) and the last parameter is the opacity (in your case this will be 0)
To give you an example, your code will turn into this:
background:linear-gradient(341deg, rgba(138,138,138,0) 0%, rgba(138,138,138,0) 31.9%, #000 32.1%, #000 100%);
In this fiddle you can see it in action
Hope this helps!
Try this
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
Check the result
.original {
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
.advice {
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
}
.original,
.advice,
.tree{
height: 400px;
width: 400px;
}
.tree {
background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
}
<div class="tree"></div>
<div class="tree"><div class="original"></div></div>
<div class="tree"><div class="advice"></div></div>
I'm having issues getting an angled stripe background to show nicely in Chrome.
background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, transparent 0px, transparent 4px);
http://jsfiddle.net/hornetnz/JxvNd/
It seems to show in Firefox and IE10 fine. But Chrome develops a pattern gap every few lines.
Try this:
background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px;
/* Background size must be an even number! */
Here's your updated example: http://jsfiddle.net/JxvNd/1/
This seem to be chrome rendering bug as answered here: Chrome linear gradient bug
You could try some of these alternatives:
Use blur edge transition like described in above link
Use svg (looks like this is the pattern you want: http://www.svgeneration.com/generate/Diagonal-Stripes)
Try using regular linear-gradient and combining it with background size (not sure if it's possible to get repeating background that way. I will try and make pen later)
I would like to add a black outline around each character, so if the font id on the same color background as the foreground it is still readable.
Can this be done in CSS with or without browser specific css?
You can simulate it with the CSS 2.1 text-shadow property:
p {
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
This is, of course, not supported in IE9 and below. See: http://www.jsfiddle.net/yijiang/UCjgg/ for a simple demo.
While we wait for text-stroke to be widely supported, there's a pretty good "text-shadow hack" generator out there to generate the text-shadow property you need.
https://owumaro.github.io/text-stroke-generator/
h1 {
color:#00ff19;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}
<h1>yayyy text</h1>
There is an explicit -webkit way to add text outline, which is with -text-stroke. This is the experimental implementation of the equivalent standards track proposal (called text-outline in the CSS3 spec docs).
Shadows can do the trick.
h1 {
color: white;
text-shadow: black 0px 0px 2px; /* color offset-x offset-y blur-radius */
}
<h1>White text with black outline</h1>
Before I start I want to clarify that Yi Jiang's answer is the correct one to your question as it is, anyway I wanted to add up a little.
If you need compatible way of doing this, the only way I can think of is using a font with outline by design.
You could even use the Google's Font API and have a very compatible solution.
Good luck!