مثال هایی از تغییر تدریجی رنگ پس زمینه یک عنصر 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);
}

این کد را در مثال کامل زیر به کار برده ایم (پس از آن، مثال های دیگری ذکر شده است) :

مثال

کدهای صفحه 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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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 را به صورت زیر می نویسیم :


<!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>

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
منابع و لینک های مفید
1
https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW1
دسته بندی رنگ ها (Color) و تعیین رنگ، در CSS
نویسنده علیرضا گلمکانی
شماره کلید 3491
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)


***   نام تو کلید هر چه بستند   ***



Copyright © 2012-2024 www.kelidestan.com
All Rights Reserved
تمامی حقوق محفوظ می باشد


کپی برداری سایر وب سایت ها از محتوای آموزشی کلیدستان ممنوع می باشد (بیشتر بدانید)