I have this div that looks like a hr line.
The styles only work in Firefox.
I created a Fiddle : http://jsfiddle.net/vLFN7/
<mydiv> </mydiv>
mydiv {
background-image: -webkit-gradient(linear, left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -ms-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -o-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
border: 0 none;
height: 1px;
margin: 20px 0 40px;
}
Please help.
jsFiddle Demo
Problem is fixed when you use to left
background-image: linear-gradient(to left, transparent,
rgba(0, 0, 0, 0.1), transparent);
Read the linear-gradient - CSS documentation
It is works in all.
div {
background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -ms-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -o-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
border: 0 none;
height: 1px;
margin: 20px 0 40px;
}
Related
I want to do this animation when the user goes to the page, the image changes the position and also adds a linear gradient to the image, something like this:
Video of how it should be
But this is what I have:
What I have
I just want to make the linear-gradient animation smooth... This is the code I'm using:
.bg-image {
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("Background.jpg");
background-position: 50% 100%;
animation: backgroundPosition 4s ease-in;
}
#keyframes backgroundPosition {
from {
background-image: linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0)
),
url("Background.jpg");
background-position: 50% 0%;
}
to {
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("Background.jpg");
background-position: 50% 100%;
}
}
gradients can not be animated for color, or alpha, they can only be animated for position.
Set your gray layer to a bigger dimension in horizonatl, and make it a real gradint, goping from transparent to whatever level of gray you want.
Then, animate also the horizontal position of the gradient, from the transparent side to the gray side
.bg-image {
height: 400px;
width: 400px;
background-image: linear-gradient(to right,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)
),
url("http://placekitten.com/400/800");
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: 1000% 100%, 100% 200%;
animation: backgroundPosition 4s ease-in infinite;
}
#keyframes backgroundPosition {
from {
background-position: 0% 0%, 0% 50%;
}
to {
background-position: 100% 0%, 0% 100%;
}
}
<div class="bg-image"></div>
I am trying to create a background for my project. When I use the below css
.srd-demo-canvas {
background-size: 24px 24px;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.15) 1px, transparent 2px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, transparent 2px);
}
I obtain the following view:
However, I want a background which has some big squares and has some small squares in them which is something like following:
What should I add or remove to my CSS code?
You can modify it like this using 4 linear-gradients:
body {
background-size: 72px 72px, 72px 72px, 24px 24px, 24px 24px;
background-image: linear-gradient(rgba(0, 0, 0, .5) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, .5) 2px, transparent 2px), linear-gradient(rgba(0, 0, 0, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .25) 1px, transparent 1px);
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
I want to make the background transparent in white color such that half overlap image on background should match the white color:
Here is my code but doesn't works fine for me
background1 {
opacity:0.8;
filter:alpha(opacity=80);
}
Try this
div{
position:relative;
display:inline-block
}
span{
background: rgba(255,255,255,0.60);
width:100%;
position:absolute;
bottom:5px;
color:red;
padding:5px
}
DEMO
Use this works fine for me...
background1 {
background-color: rgba(0, 0, 0, 0);
background-image: none, linear-gradient(to top, rgba(255, 255, 255, 0.75) 0px, rgba(255, 255, 255, 0.8) 10px, rgba(255, 255, 255, 0.86) 20px, rgba(255, 255, 255, 0.9) 30px, rgba(255, 255, 255, 0.94) 40px, rgba(255, 255, 255, 0.98) 50px, rgba(255, 255, 255, 0.99) 60px, #FFFFFF 70px);
background-repeat: repeat;
}
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));
}
I have this CSS linear gradient working in Firefox and can't seem to get the same result to work in Safari and other browsers. its a paper like background for a contact field. I Have tried the whole body and a specific element and the style seems to only work in Firefox. Tried using the -webkit- and the -moz- but no luck. Any ideas?
textarea {
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
display: block;
resize: none;
}
CSS
textarea {
background-color: #ffffff;
background-image:
-moz-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-moz-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-webkit-gradient(linear, left top, right top, color-stop(79px, rgba(0, 0, 0, 0)), color-stop(79px, #abced4), color-stop(81px, #abced4), color-stop(81px, rgba(0, 0, 0, 0))),
-webkit-gradient(linear, left top, left bottom, color-stop(.1em, #eeeeee), color-stop(.1em, rgba(0, 0, 0, 0)));
background-image:
-webkit-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-webkit-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-o-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-o-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-ms-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-ms-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
linear-gradient(to bottom, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-size: 100% 1.2em;
}
Demo
Resources
http://www.colorzilla.com/gradient-editor/
http://caniuse.com/css-gradients
Here you go, a complete cross browser CSS for CSS gradients
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
Source
As far as your answer goes this is an invalid syntax
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
Microsoft provided this simple tool to generate gradients that support cross-browser: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html