linear-gradients

I need to create a dashed line with a linear gradient. I managed to create a dashed line using <hr /> and the following styling: line { border: 0px; border-bottom: 2px dashed; } And I also know that to achieve a gradient I need to do: background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black)); Based on the code in your own answer, it looks like you need a line which is a gradient in itself (from blue to green) and also have dashed pattern. This is not possible to achieve with one gradient image because spaces cannot be introduced in the middle of a gradient. However, you can

I don't know if that is a stupid question or something like that but i want a div to be filled certain percent by one color and remaining part by other. And the gradient property .div{ background: linear-gradient(to right, #000 50%, #fff 50%); } Results into .div{ background: linear-gradient(to right, #000 28%, #fff 72%); } And this results into i want to get the white and black not to mix and be seperated on all percentages. try this .div{ background: -webkit-linear-gradient(left, black 50%, white 0%); background: -moz-linear-gradient(left, black 50%, white 0%); background: -ms-linear

I am using gulp with autoprefixer in my project, and I have to use backgrounds gradient like this: background: linear-gradient(#e98a00, #f5aa2f); but output is: background:-webkit-linear-gradient(#e98a00,#f5aa2f); background:linear-gradient(#e98a00,#f5aa2f); What wrong with me? Part of Gulpfile.js gulp.task('styles', function() { return gulp.src(['css/less/mainPage.less']) .pipe(plumber()) // .pipe(concat('base.scss')) .pipe(less()) .pipe(prefix([{ browsers: ['IE 8', 'IE 9', 'last 5 versions', 'Firefox 14', 'Opera 11.1'] }])) .pipe(minifyCSS({keepBreaks: true})) .pipe(gulp.dest('css')) .pipe

I have a button with a linear-gradient background, orange border, and some text. When I hover over the button, I want the background to become transparent without changing the other properties of the button. I've tried to transition the opacity to 0, but obviously, this will hide the border and text. I've also tried transitioning the background, but it does not work because I don't have an endpoint to transition to since it needs to be transparent. body { background-color: darkblue; } .button { background-image: linear-gradient(red,yellow); border: solid orange 2px; border-radius: 10px; color:

I have problem with linear-gradient in Mozilla Firefox 16. On screenshow bad thing is visible (bad - light line at the bottom of block). Code: <a href="#">Button Text</a> And CSS part: a { background: -moz-linear-gradient(center top , #88EB52, #3CA82D); border: 1px solid #399A29; border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: block; float: left; font-size: 16px; font-weight: bold; line-height: 54px; margin-bottom: 20px; margin-top: 20px; text-align: center; text-decoration: none; width: 376px; } I've changed line-height property on screenshot . Can anyone describe what is it line and

Is it possible to have multiple background color for a Table cell like in the image below? Two color table cell background seems to do something like what I want but it is not exactly diagonal. Both the existing answers are good and this is not at attempt to put them down in any way. This is an improvement on them which can be used if you want responsive design with gradients. As already mentioned in the other two answers (and seen in the snippet below), the gradient's angles should be modified if the height or width of the td changes. This is a drawback when then design has to be responsive

After a good amount of search I am stuck with linear-gradient which works in Firefox but not in Chrome. I added -webkit- before linear-gradient as described in one reference but still not working I think the problem is in gradient axis My code <nav class="top_menu"> <ul class="black_high"> <li class="first active"> <a href="#">Home</a> </li> <li> <a href="#">news</a> </li> </ul> </nav> .top_menu ul li.active a::after { position: absolute; bottom: 8px; left: 0; width: 100%; height: 2px; transform:none; content: ''; opacity: 1; background: #fff; background: linear-gradient(left, transparent 0%,