Related
I have an image section with a gradient layer that was built into the stylesheet of the theme. What in this block of code do I need to change to reduce the gradient?
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Any help with handling this block of code is appreciated.
To reduce the gradient you should change the background gradient values for example :
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
The previous style it start with opacity 0.2 at 0% of the height and end with opacity 0.9 at 100% of the height, you can change those opacity values as you need.
let say that you want to start with 0.2 and end with 0.5, the style should be like this :
background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%)
the style :
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Demo : https://jsfiddle.net/IA7medd/rnjunkod/
I use a <div class="menu"></div> and I set a background color with a gradient.
It floats from red in the top to white in the Bottom. Here is my .css code:
.menu {
background-color: #FFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#791014), to(#FFF));
background-image: -webkit-linear-gradient(top, #791014, #FFF);
background-image: -moz-linear-gradient(top, #791014, #FFF);
background-image: -ms-linear-gradient(top, #791014, #FFF);
background-image: -o-linear-gradient(top, #791014, #FFF);
background-image: linear-gradient(top, #791014, #FFF);
clear: both;
}
I like the starting and end color. My question is, if there is a way that I can change how it flows from red (top) to white (bottom)
For example that it switches very much earlier to white, so that I have the dark red at the beginning of the top but in the middle it is already much more white.
In other words, I want to change how fast it transitions from red to white.
If you want the transition between the colors to happen quicker than normal , just change the point by where the transition should be fully completed. When just two colors are given without any color-stop percentage then the first color starts at 0% and the in between colors are calculated such that second color is reached at 100% mark (100% = container's height by default or background-size in Y-axis if specified). Instead of that give a lower value for the white color. In the below snippet, I have given it as 60% and so the background reaches white color by the time it reaches 60% of the container's height.
Note:
100% = Container's height (default) or background-size in Y-axis (if it is specified) for a vertical gradient.
100% = Container's width (default) or background-size in X-axis (if it is specified) for horizontal gradient.
div {
float: left;
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
margin-right: 5px;
}
.menu-60 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: linear-gradient(top, #791014 0%, #FFF 60%);
}
.menu-40 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: linear-gradient(top, #791014 0%, #FFF 40%);
}
.menu-80 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: linear-gradient(top, #791014 0%, #FFF 80%);
}
br {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>Red to White at 60%</h3>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<br/>
<h3>Red to White at 40%</h3>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<br/>
<h3>Red to White at 80%</h3>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
You can use colour stops to achieve this like
background: -moz-linear-gradient(top, #791014 0%, #ffffff 28%);
background: -webkit-linear-gradient(top, #791014 0%,#ffffff 28%);
background: linear-gradient(to bottom, #791014 0%,#ffffff 28%);
You could use a tool like http://www.colorzilla.com/gradient-editor/ to easily tweak this visually and have the code generated for you.
http://colorzilla.com/gradient-editor/#791014+0,ffffff+28
Well, I'm trying to use a simple gradient which appears very nicely on most browsers. However on internet explorer which is on my laptop version 11; currently where the gradient is supposed to be is just nothing an empty space. I thought this was the correct way to display gradients across browsers amd i missing something?
Here is my gradient:
background-image: -moz-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -o-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -webkit-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333',GradientType=0 )!important;
Your syntax for linear-gradient is incorrect. use to top to indicate directionality.
http://jsfiddle.net/XHs2g/
background-image: -moz-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -o-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -webkit-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: linear-gradient(to top, #292929 0%, #292929 50%, #333 50%, #333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333',GradientType=0 )!important;
I have a horizontal gradient bar: example
I am wondering, how to make it vertical instead of horizontal, with about 20px height.
HTML:
<div class="seperator-gradient"></div>
CSS:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}
Try this:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
This will rotate what you have 90 degrees. I'm next to positive it's in the right direction, but if this goes the opposite way, change (90deg) to (270deg).
Try this code:
background-image: -webkit-gradient(
linear,
right bottom,
left bottom,
color-stop(0, #FAF5F5),
color-stop(0.55, #E0362D)
);
background-image: -o-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -moz-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -webkit-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -ms-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: linear-gradient(to left, #FAF5F5 0%, #E0362D 55%);
You could use different css gradient creator also :D
This is what I came up with (note that the percentages maybe should be changed a little bit if you want it to have a such a small height). Anyway, for large heights this looks great:
JSFiddle
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, center top, center top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}
Check the "ultimate css gradient generator", this is the best tool to make gradients, it will generate them the most crossbrowser way. http://www.colorzilla.com/gradient-editor/
I'm not sure if you want to make the bar vertical or the gradient, so I'll answer both. If you mean the bar then change:
width: 100%;
height: 10px;
to
width: 10px // or however wide you want it
height: 20px
If you mean the gradient needs to be vertical, use:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 );
I've tried multiple times to apply the following piece of code in a CSS document:
display: block;
width: 500px;
margin: 500px auto;
padding: 15px;
text-align: center;
border: 4px solid blue;
background: -webkit-linear-gradient(top,black,white);
outline: 7px solid red;
Everything appears correctly, except the gradient. I have CS6 Live View turned on, and it still refuses to appear. All I get in my box is a white background, as opposed to the black to white gradient. However, when I type the same line of code into the trial of Coda 2 I downloaded, it works perfectly. Is there anything I can do to resolve the issue?
Try this:
background-image: linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(0,0,0)),
color-stop(1, rgb(255,255,255))
);
from : http://gradients.glrzad.com/