Since this code works with the -moz vendor prefix I thought it would work a well with -webkit or -ms for instance, but it doesn't seem to allow it:
background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
I guess Mozilla is allowing something that shouldn't be used, but my research has been infructuous as of now...
Any idea?
Remove the center. Then it should work.
Also make sure you have it for all browsers:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
Example Fiddle
There's a new syntax for linear gradients where the first keyword is like (to bottom, etc).
Example:
http://jsfiddle.net/H8Byj/
div {
background-image: linear-gradient(to bottom , rgba(0, 255, 255, 1) 0%, rgba(255, 0, 255, 1) 75%, rgba(255, 255, 0, 1) 100%);
}
I didn't know the old syntax with prefix was still active in Firefox but the new one appeared circa Fx10-Fx15 according to Resources found at Caniuse.
ColorZilla CSS Gradient Generator will give you all the declarations needed for retro and multibrowser compatibility.
Related
I'm trying to create a sort of pie chart using CSS conic-gradients. I want each the transitions between wedges to be hard, rather than soft.
In pie1, below, the transitions are hard, but adding an extra wedge (as in pie2), makes all of the transitions soft.
Could anyone tell me why? And how to avoid this?
(I'm using Chrome 80 btw).
.pie1 {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;
background: conic-gradient(
#FF6666 11%,
#FF8080 11%, #FF8080 15%,
rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%,
#FF9933 20%, #FF9933 27%,
#FFB366 27%, #FFB366 31%,
rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 35%,
#996600 35%, #996600 42%,
rgba(255, 255, 255, 0) 42%);
}
.pie2 {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;
background: conic-gradient(
#FF6666 11%,
#FF8080 11%, #FF8080 15%,
rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%,
#FF9933 20%, #FF9933 27%,
#FFB366 27%, #FFB366 31%,
rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 35%,
#996600 35%, #996600 42%,
#FFC34D 42%, #FFC34D 47%,
rgba(255, 255, 255, 0) 47%)
}
<div class="pie1"></div>
<div class="pie2"></div>
I imported this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
And it started to affect other things in my page, such as buttons.
How can I tell my html to only use that stylesheet for this code?
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Just add following css to your own css file, and dont add bootstrap.css if you need one single class, it makes site lot heavy.
(Extracted from bootstrap itself)
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-striped .progress-bar,
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress.active .progress-bar,
.progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
Go to Bootstrap Customize page. Select only the Progress bar option and download the files. You are ready to go!
I've created a gradient which goes from transparent to white using this CSS:
linear-gradient(to right, transparent, white)
Also see: http://jsfiddle.net/fs8gpha2/
This is all working fine in Chrome, but in both Safari and Firefox the center of the gradient is grey. Is there any way to work around this?
Thanks!
Try like this:
body {
background: #000;
}
div {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
width: 100%;
height: 100px;
}
Here is the Demo
This is would be a cross-browser solution (I updated the jsfiddle):
http://jsfiddle.net/fs8gpha2/4/
div {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background-color: rgba(255, 255, 255, 0); width:100%; height:100px; }
Cheers
I'm using CSS3 and RGBA to create a white-to-transparent gradient:
div {
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1);
padding: 2rem 0;
}
Fiddle here: http://jsfiddle.net/alecrust/fYz45/
However as you'll notice, the gradient is dark in the middle. I'm getting this:
And I'm expecting this:
How can I rectify?
Change your final step to #FFFFFF00 (rgba(255, 255, 255, 0)) instead of #00000000:
http://jsfiddle.net/fYz45/6/
The final color should be white, transparent, and not black transparent
instead of
rgba(0, 0, 0, 0)
end in
rgba (255, 255, 255, 0)
If anyone else if having trouble with gradients or getting a certain aspect (angles, transparency, etc.) I recommend trying this tool to learn more: http://www.colorzilla.com/gradient-editor/ The code below is a sample of what it can do. Transparency is controlled by the top squares, color on the lowers. It allows you to keep dropping more colors in. It has good backwards comparability as well and also some has presets.
`div {
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffff3a',GradientType=1 ); /* IE6-9 */
background-repeat: repeat-x;
padding: 2rem 0;
}`
div{
background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff, endColorstr=#ffff01);
background-image:-moz-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-webkit-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-ms-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-o-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#ffff01));
}
Hey there I'm struggling with creating multiple colour background with CSS. I tried gradient but it makes shades which I doesn't want. I want to create this with CSS:
Does anyone know how to create this without getting shades that I got when I used gradient.
Here is my html code.
<div id="head">
<h1>Mira's place</h1><br>
<h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
<ul>
<li>Home</li>
<li>Games</li>
<li>Applications</li>
<li>Contact</li>
</ul>
</div>
Try it again with gradients, but with this code:
#head /* or body */
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
BTW: I got this code from www.red-team-design.com. Here is the link.
Don't know, what you mean with shades. Does the following not look like you wanted to? (Some modifications may be needed, but it shows the way to go)
background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);
Here is the Fiddle.
.element{
border-bottom: 25px solid #2C58DF;
border-top: 25px solid #D71E26;
height: 25px;
width: 150px;
-webkit-transform-origin: top left;
-webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
-moz-transform-origin: top left;
-moz-transform: translateX(165px) translateY(55px) rotate(135deg);
transform: translateX(165px) translateY(55px) rotate(135deg);
transform-origin: left top 0;
}
http://jsfiddle.net/etW25/