قبل از CSS3 برای ایجاد سایه و یا حالت های مختلف برای نوشته ها و اشتیاء موجود در صفحه باید از تصویر استفاده میکردیم که این کار هم آزاردهنده بود و هم صفحه طراحی شده را سنگین میکرد… اما بعد از معرفی CSS3 به راحتی میتوانیم از ویژگی های آن استفاده کنیم.
یکی از ویژگی های بسیار کاربردی CSS3 قابلیت سایه یا Shadow می باشد. در این پست قصد دارم تا نحوه استفاده از Text-shadow و Box-shadow را به شما به صورت ساده و مختصر آموزش دهم.
به تصویر زیر که با فتوشاپ طراحی شده نگاه کنید. میبینید که یک سایه سیاه زیر باکس قرار دارد و یک سایه سفید زیر متن. حالا قصد داریم تا همین کار را با CSS3 انجام دهیم .
ابتدا یک تگ H1 ایجاد میکنیم و نوشته مورد نظر را در آن قرار می دهیم.
<body><h1>IRANHEX.COM</h1></body>
حالا به صورت زیر استایل های مورد نظر را به صفحه و تگ H1 میدهیم.
body{
background-image: url(Pattern.png);
}
h1{
padding: ۶px;
color: #۲۳۲۳۲۳;
background-color: #dd3333;
width: ۲۲۳px;
border: ۲px solid #dd3333;
border-radius: ۱۰px;
}
تا اینجای کار باید کار شما مانند تصویر زیر شده باشد.
حالا نوبت ایجاد سایه است! ابتدا در مورد کد Box-shadow توضیح میدهم.
به عکس زیر توجه کنید.
به عبارت دیگر شکل کلی Box Shadow به صورت زیر میباشد :
Box-shadow: x-axis y-axis blur #Color ;
و یا به عبارت خیلی ساده تر مقدار اول مربوط به جهت افقی سایه، مقدار دوم مربوط به جهت عمودی، مقدار سوم مربوط به میزان محو شدگی و آخرین مقدار نیز مربوط به رنگ سایه است.
حالا برای ایجاد سایه برای H1 کافیست تا کدهای زیر را به کدهای CSS نوشته شده برای آن اضافه کنید.
box-shadow: 2px 2px 5px #000;
-moz-box-shadow: 2px 2px 5px #000;
-webkit-box-shadow: 2px 2px 5px #000;
تا اینجا به باکس نوشته سایه اضافه کردیم. در ادامه باید به نوشته هم سایه بدهیم. این کار را با Text-shadow انجام میدهیم که تنظیمات و کد آن مانند Box-shadow است. به صورت زیر :
کد زیر را نیز به کدهای CSS مربوط به تگ H1 اضافه کنید.
text-shadow: 1px 1px 2px #fff;
حالا کار شما باید به صورت زیر در آمده باشد.
همچنین میتوانیم سایه ها را به صورت Multiple نیز استفاده کنیم. به صورت زیر :
box-shadow: 2px 2px 5px rgba(0 , 0 , 0 , 0.8) , -2px -2px 5px rgba(0 , 0 , 0 , 0.8);
-moz-box-shadow: 2px 2px 5px rgba(0 , 0 , 0 , 0.8) , -2px -2px 5px rgba(0 , 0 , 0 , 0.8);
-webkit-box-shadow: 2px 2px 5px rgba(0 , 0 , 0 , 0.8) , -2px -2px 5px rgba(0 , 0 , 0 , 0.8);
همچنین برای Text-shadow :
text-shadow: 1px 1px 2px #fff , -۱px -1px 2px #fff;
تا اینجا به صورت کلی با Shadow در CSS آشنا شدید. امیدوارم مورد استفاده قرار بگیرد. موفق باشید.
۸ دیدگاه برای این مطلب ارسال شده است.
سلام آقا محمد من یه مشکلی در یکی از پست ها تون دارم سوالمو اونجا مطرح کردم ولی انگار شما ندیدید میشه برام اونو توضح بدین ؟!
http://www.iranhex.com/site-images-in-css3-border-tutorial/
[پاسخ]
محمد رضا محمودی پاسخ در تاريخ آذر ۱۹م, ۱۳۹۰ ۹:۰۵ ق.ظ:
سلام . فرقی نداره…
[پاسخ]
سلام.امکان استفاده از شادوو تکست و شادوو باکس برای فونت های فارسی وجود نداره. درسته؟
آخه من قالب Advanced رو دانلود کردم اما در فارسی کردنش به مشکل برخوردم.شادوو ها فارسی میشن اما نمایش داده نمیشن!!! راه حلی هست؟
[پاسخ]
محمد رضا محمودی پاسخ در تاريخ دی ۱۰م, ۱۳۹۰ ۱۱:۰۱ ق.ظ:
سلام . چرا کاربرد داره…اون قالب فونت هاش با استفاده از فایل های جاوا فراخوانی شده…باید اون فایل های جاوا رو حذف کنید.
[پاسخ]
duste azizam. man taze karam. kode avalo IRANHEX.COM bayad koja vared konam? tu css?
badesh koda badio painesh b tartib paste konam ?
[پاسخ]
محسن خاک بیز پاسخ در تاريخ دی ۲۲م, ۱۳۹۰ ۹:۵۶ ب.ظ:
سلام . نه . اون تگ H1 رو باید توی فایل HTMLتون بذارید . بعدش اون کدا رو هم توی فایل CSSتون بنویسید . کپی پیست نکنید ! نوشتن بیشتر میتونه به یادگیریتون کمک کنه
[پاسخ]
mohammad پاسخ در تاريخ دی ۲۳م, ۱۳۹۰ ۸:۲۱ ب.ظ:
khob moshkel injas man asan file html nadare wordpressam
hame php e
tu kodomesh bayad brizam ?
[پاسخ]
محسن خاک بیز پاسخ در تاريخ دی ۲۳م, ۱۳۹۰ ۱۰:۱۸ ب.ظ:
آها پس واسه وردپرس میخواین . پس بهتره از اینجا شروع کنید
و بعد واسه استایل دادن معمولا توی پوشه Css قالبتون یه فایل به اسم Style.css هست که کدها رو میتونید اونجا وارد کنید