linear-gradients | 易学教程

Gradient text color

阅读更多关于 Gradient text color

Is there a generator , or an easy way to generate text like this but without having to define every letter So something like this: .rainbow { background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9

css gradient for triangle shaped arrow

阅读更多关于 css gradient for triangle shaped arrow

问题 Please take a look at http://jsfiddle.net/ghAgQ/ I need the same gradient for arrow, as it is for the rectangle. Any ideas how thats done? Thanks .rectangle { background-color: #EEE; height: 80px; width: 240px; border: 1px solid #CCC; background: white; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(37%,#F1F1F1), color-stop(57%,#E1E1E1), color-stop(100%,#F6F6F6)); float: left; } .arrow { border-top: 41px solid transparent; border

How to create a curve between two gradient divs in CSS?

阅读更多关于 How to create a curve between two gradient divs in CSS?

问题 I have two divs with distinct gradient background and I need to create a S-Shape curve between them. Here's the example fiddle for gradient divs: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/ <div id="section1"> </div> <div id="section2"> </div> #section1{ height:200px; background: linear-gradient(to bottom right, #ad3, #add); } #section2{ height:200px; background: linear-gradient(to bottom right, #de350b, #0065ff); } There are couple of things which crossed my mind but: - svg: don't know how

Weird gradient border effect

阅读更多关于 Weird gradient border effect

问题 When applying a transparent border over an element with a linear-gradient as the background, I get a weird effect. Notice the left and right sides of the element don't have the proper colours (they're some way switched) and are weirdly flat . HTML <div class="colors"> </div> CSS .colors { width: 100px; border: 10px solid rgba(0,0,0,0.2); height: 50px; background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5); } Why is this showing a weird

Why can't I reference an SVG linear gradient defined in an external file (paint server)?

阅读更多关于 Why can't I reference an SVG linear gradient defined in an external file (paint server)?

问题 Please have a look at this Pen: http://codepen.io/troywarr/pen/VYmbaa What I'm doing here is: defining an SVG symbol ( <symbol> ) defining an SVG linear gradient ( <linearGradient> ) using the <use> element to reference the SVG symbol I've created in the CSS, defining two classes: external , which references the linear gradient defined in this external .svg file (right click and view source) internal , which references the linear gradient defined in the local HTML (which is, I believe,

In-cell data bars in jqGrid - possible or not?

阅读更多关于 In-cell data bars in jqGrid - possible or not?

问题 I generally don't like using Excel and Microsoft products in general, but Excel 2007/2010 has some very nice conditional formatting features which, sadly, I haven't seen in many other places so far. One of these which I use extensively in business reports is data bars. http://blogs.msdn.com/b/excel/archive/2009/08/07/data-bar-improvements-in-excel-2010.aspx In my opinion, these data bars are extremely helpful in understanding the meaning of data beyond the numbers. While the difference

CSS3 cross browser linear gradient

阅读更多关于 CSS3 cross browser linear gradient

What will be Opera and IE alternatives of following code? background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF)); background-image: -moz-linear-gradient(right, #0C93C0, #FFF); Note , I've tested following rules. All browsers supports them. But they are vertical gradients. Can anyone help me to modify them to horizontal ones? background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); background-image: -moz-linear-gradient(top, #0C93C0, #FFF); background-image: -ms-linear-gradient(top, #0C93C0, #FFF); background-image: -o-linear-gradient(top, #0C93C0,

Blocky gradient effect in CSS3

阅读更多关于 Blocky gradient effect in CSS3

问题 Is it possible to make the below gradient look more \"blocky\", so that instead of switching from green to red gradually, it\'s done in steps like the below picture? Desired effect: Currently: #gradients { background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #00FF00), color-stop(0.5, #FFFF00), color-stop(1, #FF0000)); background-image: -o-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); background-image: -moz-linear-gradient(right, #00FF00 0%,

Border Gradient with Border Radius

阅读更多关于 Border Gradient with Border Radius

问题 I have the following CSS:- a.btn.white-grad { background: $lgrey; color: #313149 !important; border: 1px solid #000; border-image-source: linear-gradient(to right, #9c20aa, #fb3570); border-image-slice: 20; float: left; @include font-size(26); margin: 75px 0; } Adding border-radius: 5px doesn\'t seem to do anything, I figured it\'s because I\'m using border gradient, is there a way for me to achieve the desired 5px border radius at all? 回答1: You cannot use border-radius with gradient. Here is

How to add border to a container with transparent gaps in between

阅读更多关于 How to add border to a container with transparent gaps in between

问题 Here is an image of the design which I am trying to achieve with only CSS. How do I achieve such border for the container div so that I can place transparent logo and text in between the gaps. This design will go on a video background. The black background is just for illustration purpose. So far I have tried to achieve something like this as a test: body { background: black; } p { color: #ffffff; font-size: 16px; text-align: center; padding: 30px; } .steps-frame-1 { margin-top: 60px; width: