Rounded gradients

webdevs · 01-01-2013, 11:24 AM

Please help to make CSS as a rounded fade effect with CSS3. Any idea how to make css?

Fr33z · 01-01-2013, 03:37 PM

can you maybe just use border-radius and schadow-box? with a little testing you maybe get the perfect combination!!

coothead · 01-02-2013, 12:28 PM

Hi there webdevs,

here is an example that works in Firefox, Safari, Chrome and partially in Opera...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>radial gradient</title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
div {
    width:400px;
    height:400px;
    border:1px solid #5af;
    margin:50px auto;
    border-radius:201px;
    box-shadow:16px 16px 16px rgba(0,0,0,0.4);
    background:-webkit-radial-gradient( circle, #0ff 0%,rgba(0, 0, 255, 0) 100%, #00f 95%);
    background:radial-gradient( circle, #0ff 0%, rgba(0, 0, 255, 0) 100%, #00f 95%);
 }
</style>

</head>
<body>

<div></div>

</body>
</html>

..and some...

Further reading:-

coothead

Arbitrator · 01-03-2013, 07:47 AM

Quote:

Originally Posted by coothead

here is an example that works in Firefox, Safari, Chrome and partially in Opera...

Code:

[...]
background:radial-gradient( circle, #0ff 0%, rgba(0, 0, 255, 0) 100%, #00f 95%);

Chrome and Firefox appear to be the bugged browsers here.

If you substitute the keyword transparent for rgba(0, 0, 255, 0) (both of those values refer to the same color), the resulting radial gradient changes in Firefox 17 and Chrome 23 to include a gray hue, indicating that those two browsers have rendering issues: rgba(0, 0, 255, 0) is not be treated as the equivalent of transparent, and transparency in general is broken.

In Internet Explorer 10 RP1 and Opera 12.1, the rendering is the same using either value and both browsers render the gradient identically.

Basically, the Chrome/Firefox gradient has to be scrapped or recreated using different color stops to be cross-browser-compatible.

On another note, the color stop #00f 95% (blue 95%) doesn't appear to do anything. The latest draft of the spec, unfortunately, doesn't appear say what to do with color stops that are specified after the final color stop at 100%. All four browsers seem to silently ignore the last stop in this code. I noticed that an almost identical useless stop appears in Mozilla's (outdated) documentation on radial gradients, so maybe that's where this stop came from.