In my page I have few sections. I want to show linear-gradient in currently active section.
<div class='main_wrapper'>
<div class='header'>
Product
</div>
<div class='helper'>
Abc dda
</div>
<textarea>asdadadad</textarea>
<div class='active-section'></div>
</div>
Now, if I have
.active-section,
.active-section2{
border-top: 1px solid #d8d8d8;
margin-left: 0px;
width:100%;
position: absolute;
top: 2px;
left: 0;
height: 107px;
background: rgb(216,216,216); /* Old browsers */
background: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
}
Then this will be actually over the text, that is not needed.
Following too is not expected. This is having transparency, but this will make the text look faded.
.active-section2{
background: -moz-linear-gradient(top, rgba(216,216,216,0.51) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,0.51)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(216,216,216,0.51) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
}
Check this fiddle: http://jsbin.com/ayimuk/2
I just want to have linear gradient in active section, height of the gradient will be 100px ( lets says ). I tried using z-index that too didn't worked.
You used z-index but forgot that you can't use this property without an element also having a position value other than the default - static. Adding relative positioning will bring the text above the gradient.
http://jsbin.com/itowes/1/edit
Related
Here's what I'm trying to do: http://jsfiddle.net/wLyqvrn1/1/
table {
height: 200px;
width: 200px;
background-color: #444557; /* this doesn't show below the gradient */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+100&0.1+0,0.1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(255,255,255,0.1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#1affffff',GradientType=0 ); /* IE6-9 */
}
Even though there is an answer to and older question about this, maybe it is better to add some more thorough explanation.
background-color is one of the properties inside background
When you set
background: linear-gradient(...);
even thought it looks like you are not changing background-color, you are doing so !
background expands to all of its properties, and then resets them (also because it is defined later than background-color)
PROBLEM
I am trying to combine the CSS3 gradient feature along with a background-image sized specifically and placed specifically in the div. Strange thing is that the background-size property not only applies the size to the image, but also the gradient. However I need to keep the image 30px and apply the graident all the way. Any help would be welcomed?
Thanks in advance
CSS
.accordian-head {
height: 50px;
padding: 10px 10px;
background: #ADADAD;
background-image: url(../img/plus-icon.png) 97% 50%;
background-position:97% 50%;
background-repeat:no-repeat; /* fallback */
background-size:30px;
background-image: url(../img/plus-icon.png), -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD)); /* Saf4+, Chrome */
background-image: url(../img/plus-icon.png), -webkit-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Chrome 10+, Saf5.1+ */
background-image: url(../img/plus-icon.png), -moz-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* FF3.6+ */
background-image: url(../img/plus-icon.png), -ms-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* IE10 */
background-image: url(../img/plus-icon.png), -o-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Opera 11.10+ */
background-image: url(../img/plus-icon.png), linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* W3C */
}
You have two layers, one for the image and one for the gradient. When you specify one background-size value, it applies to both layers.
To stretch the gradient you need to explicitly give it its own size:
background-size:30px, 100%;
What you could do is use nested divs, and apply the gradient on top.
<div class="gradient">
<div class="image" style="background-image:url(../img/plus-icon.png)">
</div>
</div>
.gradient {
background: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD));
/* etc */
}
.image {
background-size: 30%;
}
What I want to achieve is something like this
What I tried so far is the CSS3 multiple background, it worked when I used one corner
See it here: CSS code
But it didn't work when I added more 'backgrounds'
See example here: jsfiddle
code is too long to post it here, view it on jsfiddle
Is there any suggestion to improve this, or is there a better way to doit?
Thank you
Update: Answer
Here is the background (gradient) I used. Link
And here is how I used the code:
HTML
<section class="window">
<div class="win1con">
</div>
</section>
CSS
.window {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.win1con {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%, rgba(0,0,0,0.05) 58%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(55%,rgba(0,0,0,0)), color-stop(58%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
top: 0%;
background: url('../images/vntg.jpg');
}
You can use box-shadow:
background:url('http://i.imgur.com/7TX9BQU.jpg?1?9512');
box-shadow: inset 0px 0px 200px 10px #000;
The key to make this work is the 'inset' value. Tt makes the shadow appear on the inside of the element.
Fiddle: http://jsfiddle.net/KhLsQ/5/
info about box-shadow: http://www.css3.info/preview/box-shadow/
I know that this can easily be done in any image editing program, I was just curious if there was a way just using css.
Example:
body {background-color: #837960; background-image: url("Images/background.jpg") background-repeat: no-repeat;}
Could you use css to fade the background image into the background color so a visible line does not exist or should I keep adding a gradient to transparency in Photoshop?
It is possible - in CSS3 you can set multiple values for background
body {
background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */
}
However, it will work only in modern browser that supports CSS3
(code generated via http://www.colorzilla.com/gradient-editor/)
Yes it's possible with CSS using the linear-gradient() function with multiple background images:
body {
background-color: #837960;
background-image: linear-gradient(
to bottom, transparent, #837960
), url("Images/background.jpg");
background-repeat: no-repeat;
}
Specify the gradient as the first image so it gets stacked on top, and use it to fade from transparent at the top to the opaque background-color at the bottom. This will give the illusion the image underneath is fading into the background without requiring alpha-transparency on the image itself.
Ideally, you should just edit the image so as to have a consistent look across browsers.
While you can have a background gradient, that would appear behind an image, as the background images are placed over background color. In order to have the image look like it is fading into another color, you would need to place another tag on top of that the body such as:
body { background: url('https://i.stack.imgur.com/MUsp6.jpg') }
div.content {
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
<body>
<div class="content">Example</div>
</body>
Or whatever color/positioning combination you would like. A good resource is http://www.colorzilla.com/gradient-editor/
I am having a problem where for some reason in IE the background at the bottom of my page the background isn't expanding. This seeems to work fine in Firefox but not IE. As you can see in the images below.
CSS:
#SecondaryContent
{
background: url(../images/background_slice.png) repeat-y 0% 0%;
width: 18%;
overflow: hidden;
float: left;
}
#Container
{
overflow:hidden;
min-height:100%;
height:auto!IMPORTANT;
height:100%; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' Doesn't seem to work!
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZmRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2IzZTllZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
background: -moz-linear-gradient(left, #edfdff 0%, #b3e9ef 18%, #ffffff 18%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#edfdff), color-stop(18%,#b3e9ef), color-stop(18%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* IE10+ */
background: linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfdff', endColorstr='#ffffff',GradientType=1 );*/ /* IE6-8 */
}
I have resolved this myself by using this Javascript to adjust the height of the div to fit around the main div.
<script type="text/javascript">
var theHeight = $("#PrimaryContent").height() + 100;
$('#SecondaryContent').height(theHeight);
</script>