Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Rounded gradients

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

  • #2
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Belgium
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you maybe just use border-radius and schadow-box? with a little testing you maybe get the perfect combination!!

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,703
    Thanks
    0
    Thanked 233 Times in 228 Posts
    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

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by coothead View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •