دستور text-shadow در CSS

کاربرد دستور text-shadow در CSS :

دستور text-shadow در CSS جهت سایه زدن متن استفاده می شود.

در این بخش از آموزش CSS به آموزش دستور text-shadow می پردازیم.

دستور text-shadow در CSS یکی از دستورات جذاب میباشد و اگر بصورت حرفه ای از آن استفاده شود می تواند باعث زیبایی قالب سایت گردد.

آموزش دستور text-shadow :

در این بخش از آموزش دستور text-shadow ، روش های سایه دادن به متن را می آموزید.

برای سایه دادن به متن از دستور text-shadow استفاده می کنیم. این دستور یکی از دستورات CSS میباشد که بسیار جذاب می باشد.

دراین بخش روش کار با دستور text-shadow در CSS را می آموزید.

برای اجرای کد html پایین و کد CSS ، آن را در یک فایل با پسوند html ذخیره کنید و سپس اجرا نمایید.

 

<!DOCTYPE html>
<html>
<head>
<title>SH711.COM</title>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>SH711.COM</h1>
<p>Text-shadow effect</p>
</body>
</html>

 

در مثال بالا دستور text-shadow در CSS را مشاهده کردید . این دستور برای سایه داده به متن استفاده می شود و دارای دو ورودی میباشد. عدد اول سایه افقی و دیگری سایه عمودی میباشد.

این اعداد را تغییردهید تا با دستور text-shadow و نحوه سایه زدن آن بیشتر آشنا شوید.

در مثال پایین به متن سایه آبی داده ایم یعنی گزینه دیگری اضافه کرده ایم.

گزینه سوم رنگ سایه می باشد. در قالب سایت به نسبت قالب و رنگ هایی که استفاده کرده ایم می توانیم رنگ سایه را مشخص کنیم.

 

<!DOCTYPE html>
<html>
<head>
<title>SH711.COM</title>
<style>
h1 {
text-shadow: 2px 3px blue;
}
</style>
</head>
<body>
<h1>SH711.COM</h1>
<p>Text-shadow effect</p>
</body>
</html>

 

در مثال سوم و پایین با میزان بلوری (blur) یا شفافیت آشنا میشویم.

در دستور text-shadow در CSS عدد سوم نشانه بلوری یا شفافیت سایه است.

هر چه این عدد بزرگتر باشد سایه بیشتر پخش می شود و شفاف تر می شود.

 

<!DOCTYPE html>
<html>
<head>
<title>SH711.COM</title>
<style>
h1 {
text-shadow: 1px 1px 5px green;
}
</style>
</head>
<body>
<h1>SH711.COM</h1>
<p>Text-shadow effect</p>
</body>
</html>

 

در مثال زیر یک متن سفید با سایه مشکی را مشاده می کنید.

در مثال زیر دستور text-shadow دارای سه عدد و یک رنگ میباشد.

رنگ متن سفید و سایه مشکی ، دو عدد اول سایه افقی و عمودی و عدد سوم میزان شفافیت را مشخص می کند.

<!DOCTYPE html>
<html>
<head>
<title>SH711.COM</title>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>SH711.COM</h1>
<p>Text-shadow effect</p>
</body>
</html>

 

در مثال زیر یک سایه قرمزرنگ به متن خواهیم داد.

مثال زیر را در یک فایل HTML قرار داده و ذخیره کنید سپس اجرا کنید.

 

<!DOCTYPE html>
<html>
<head>
<title>SH711.COM</title>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>SH711.COM</h1>
<p>Text-shadow effect</p>
</body>
</html>

 

سایه زدن در CSS :

در این بخش از آموزش CSS می خواهیم به آموزش سایه زدن در CSS بپردازیم.

سایه ها قالب سایت را بسیار زیبا می کند. در طراحی قالب سایت ، از سایه زدن زیاد استفاده می شود.

به همین خاطر در این آموزش قصد داریم روش های سایه زدن در CSS و دستورات آن را توضیح دهیم.

کارهای زیبایی را می توان با CSS و CSS3 انجام داد یکی ازاین کارها سایه زدن است.

دستورات مختلفی برای این کار وجود دارد که در این مقاله توضیح و آموزش خواهیم داد.

با استفاده از CSS می توان به متن یا عناصر سایه داد.


نویسنده : هدایت عباسی

ثبت نظر