www.webdeveloper.com
Results 1 to 12 of 12

Thread: Color

Hybrid View

  1. #1
    Join Date
    May 2013
    Posts
    55

    Color

    Hello, how can I color the background of a div tag that fades slowly? Is there anyway without using a image?

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Harith,

    this could probably be done with CSS.

    Can you give us specific details of the effect that you require?


    coothead

  3. #3
    Join Date
    May 2013
    Posts
    55
    Ya sure, the color goes from golden to light yellow and then it ends with white

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Harith,

    here is your example code...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>gold to white</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    #box {
        width:486px;
        height:300px;
        background-color:#ffd700;
        border:1px solid #000;
        border-radius:10px;
        margin:auto;
        line-height:300px;
        font-size:72px;
        font-weight:bold;
        color:#fff;
        text-shadow:0 0 1px #000,0 0 2px #000,0 0 4px #000;
        text-align:center;
    
        -webkit-animation-delay:2s;
        -webkit-animation-duration:5s;
        -webkit-animation-name:newColor;
        -webkit-animation-fill-mode:forwards;
    
        animation-delay:2s;
        animation-duration:5s;
        animation-name:newColor;
        animation-fill-mode:forwards;
     }
    @-webkit-keyframes newColor {
      from {
        box-shadow:inset 0 0 16px rgba(0,0,0,0.0);
        border-color:#000;
        background-color:#ffd700;   
      }
      50% {
        box-shadow:inset 0 0 16px rgba(0,0,0,0.3);
        border-color:#666;
        background-color:#ffffe0;
      }
     100% {
        box-shadow:inset 0 0 16px rgba(0,0,0,0.6);
        border-color:#ccc;
        background-color:#fff;
      }
     }
    @keyframes newColor {
      from {
        box-shadow:inset 0 0 16px rgba(0,0,0,0.0);
        border-color:#000;
        background-color:#ffd700;   
      }
      50% {
        box-shadow:inset 0 0 16px rgba(0,0,0,0.3);
        border-color:#666;
        background-color:#ffffe0;
      }
     100% {
        box-shadow:inset 0 0 16px rgba(0,0,0,0.6);
        border-color:#ccc;
        background-color:#fff;
      }
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">TEST</div>
    
    </body>
    </html>
    coothead

  5. #5
    Join Date
    May 2013
    Posts
    55
    Wow, didn't knew the code would be so long. Does it works for CSS2?

  6. #6
    Join Date
    May 2013
    Posts
    55
    It does work. But I didn't wanted it to change wholly, I just wanted like it starts from dark at the top and as it goes down it fades.

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Harith,

    Oh I see, what you require is CSS gradient....
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>gold to white</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    #box {
        width:486px;
        height:300px;
        background: linear-gradient(to bottom,#ffd700,#fff);
        border:1px solid #eec600;
        border-radius:10px;
        margin:auto;
        box-shadow:10px 10px 10px rgba(0,0,0,0.4);
     }
    </style>
    
    </head>
    <body>
    
    <div id="box"></div>
    
    </body>
    </html>
    coothead

  8. #8
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    This free online gradient maker may give you other options:

    CSS 3 Gradient Maker

    or this one: Image Maker. Stripes and Button

  9. #9
    Join Date
    Jul 2013
    Posts
    9
    you can also try this cool css3 gradient generator http://www.cssbuttoncode.com/gradient.php

  10. #10
    Join Date
    May 2013
    Posts
    55
    Thanks guys!

  11. #11
    Join Date
    Jul 2013
    Posts
    4
    yeah! i am also learn CSS language its vey useful to me. there are lot of color coding is available in CSS3. so you have try to these

  12. #12
    Join Date
    May 2013
    Posts
    55
    Ya, but I know CSS2. I am planning to learn HTML5 and CSS3

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles