It is an interesting feature of Excel about which you wrote in your question. I haven’t known about this before. What you need is to implement a custom formater function. In general is is very easy. You should write a small function which display the cell contain based on the value (text over the color … Read more
After more research, it looks like this is a browser support issue. See: https://code.google.com/p/chromium/issues/detail?id=109212 https://bugs.webkit.org/show_bug.cgi?id=105904 Sadly, I’d come across this question before posting mine, and had thought that surely, in 5-1/2 years, browser support would have caught up – but that doesn’t appear to be the case. As of 2015, apparently Firefox and Opera are … Read more
Just modify the background-position like in the below snippet to get the required output. This works fine in Firefox, Chrome, Opera, IE11 and Edge. body { background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, … Read more
You can use the SMIL animation of SVG. The idea is to animate the color-stop or the offset of the gradient to create the needed effect: svg { border:1px solid; width:200px; } <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” viewBox=”10 10 24 24″> <defs> <linearGradient id=”linear-gradient” x1=”-100%” y1=”0″ x2=”200%” y2=”0″ > <stop offset=”0″ stop-color=”red”> <animate attributeName=”offset” values=”0;0.2;0.5″ dur=”2s” repeatCount=”indefinite” … Read more
mask combined with linear-gradient can do it: .box { height: 200px; width: 300px; background: linear-gradient(to right, rgb(238, 252, 83), rgb(120, 239, 197)) } .box::before { content: “”; display: block; height: 100%; background: linear-gradient(to right, rgb(253, 67, 205), rgb(74, 68, 215)); -webkit-mask: linear-gradient(to bottom,#0000, #000); mask: linear-gradient(to bottom,#0000, #000); } <div class=”box”></div> Another kind of coloration: … Read more
Please try this code: #gradient { height:300px; width:300px; border:1px solid black; font-size:30px; background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); background-size: 200% 200%; -webkit-animation: Animation 5s ease infinite; -moz-animation: Animation 5s ease infinite; animation: Animation 5s ease infinite; } @-webkit-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} … Read more
I know you won’t like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image. If it’s a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the … Read more
This can be achieved using linear-gradient. Setting multiple colors to the gradient can be done by assigning multiple color stops and the blocky effect can be achieved by making the next color start at the exact same place where the current color ends (that is, same stop percentage for the current color’s end position and … Read more
You can use multiple linear-gradient images as background for the parent div container like shown in the below snippet. This is one way to achieve it without adding any extra elements. The background need not be a solid color. This approach can support transparency. The only thing you would need to make note of here … Read more
Start with something like the following: var dom = document.getElementById(‘mainHolder’); dom.style.backgroundImage=”-moz-linear-gradient(” + orientation + ‘, ‘ + colorOne + ‘, ‘ + colorTwo + ‘)’; If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection. Below is an example of … Read more