Menu
Community /Pin to ProfileBookmark
@cootheadJul 13.2013 — #Hi there Harith,
this could probably be done with CSS. ?
Can you give us specific details of the effect that you require?
[i]coothead[/i]@cootheadJul 13.2013 — #Hi there Harith,
here is your example code...
[i]coothead[/i]@cootheadJul 13.2013 — #Hi there Harith,
Oh I see, what you require is CSS gradient....
[i]coothead[/i]
Color
Hello, how can I color the background of a div tag that fades slowly? Is there anyway without using a image?
Sign in
to post a comment11 Comments(s) ↴
0
@cootheadJul 13.2013 — #Hi there Harith,this could probably be done with CSS. ?
Can you give us specific details of the effect that you require?
[i]coothead[/i]
0
@cootheadJul 13.2013 — #Hi there Harith,here is your example code...
[color=navy]
<!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;
<i> </i>-webkit-animation-delay:2s;
<i> </i>-webkit-animation-duration:5s;
<i> </i>-webkit-animation-name:newColor;
<i> </i>-webkit-animation-fill-mode:forwards;
<i> </i>animation-delay:2s;
<i> </i>animation-duration:5s;
<i> </i>animation-name:newColor;
<i> </i>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; <br/>
}
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; <br/>
}
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>[/color][i]coothead[/i]
0
@cootheadJul 13.2013 — #Hi there Harith,Oh I see, what you require is CSS gradient....
[color=navy]
<!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>[/color][i]coothead[/i]