مثال هایی از تغییر تدریجی رنگ پس زمینه یک عنصر div (با استفاده از gradient)، با مشخصه های -webkit-linear-gradient و -webkit-radial-gradient و -webkit-repeating-linear-gradient و -webkit-repeating-radial-gradient ، در CSS
در این مبحث، مثال هایی از تغییر تدریجی رنگ پس زمینه یک عنصر div (با استفاده از gradient) را ذکر می کنیم.
به عنوان مثالی برای شروع، برای تغییر تدریجی رنگ پس زمینه یک عنصر div با id برابر myId ، کد CSS زیر را می نویسیم :
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(aqua, white);
}
width:200px;
height:200px;
background: -webkit-linear-gradient(aqua, white);
}
این کد را در مثال کامل زیر به کار برده ایم (پس از آن، مثال های دیگری ذکر شده است) :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(aqua, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(aqua, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(red, yellow, orange, green, blue, purple);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(red, yellow, orange, green, blue, purple);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left, black, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left, black, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(bottom right, black, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(bottom right, black, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(45deg, black, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(45deg, black, white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left, white, cornflowerblue 90%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left, white, cornflowerblue 90%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left,black,blue 10%,blue 90%,black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left,black,blue 10%,blue 90%,black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left,white,blue 50%,purple 50%,white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(left,white,blue 50%,purple 50%,white);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white,black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white,black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(circle, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(circle, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(30% 30%, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(30% 30%, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(30% 10%, closest-corner, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(30% 10%, closest-corner, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(30% 10%, circle closest-corner, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(30% 10%, circle closest-corner, white, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, green, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, green, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, red 20%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, red 20%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, red 10%, red 90%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, red 10%, red 90%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, yellow 20%, red 20%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(white, yellow 20%, red 20%, black);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(red, blue 25%, red 50%, blue 75%, red);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-linear-gradient(red, blue 25%, red 50%, blue 75%, red);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(red, blue 25%, red 50%, blue 75%, red);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-radial-gradient(red, blue 25%, red 50%, blue 75%, red);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-repeating-linear-gradient(plum, powderblue 10%, plum 20%);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-repeating-linear-gradient(plum, powderblue 10%, plum 20%);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
کدهای صفحه HTML را به صورت زیر می نویسیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-repeating-radial-gradient(plum, powderblue 10%, plum 20%);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#myId {
width:200px;
height:200px;
background: -webkit-repeating-radial-gradient(plum, powderblue 10%, plum 20%);
}
</style>
</head>
<body>
<div id="myId">
</div>
</body>
</html>
نتیجه :
دسته بندی رنگ ها (Color) و تعیین رنگ، در CSS
نویسنده علیرضا گلمکانی
شماره کلید 3491
گزینه ها 
نظرات 0 0 0