افکت های جذاب سایه برای باکس ها و عناصر سایت توسط CSS3

در این آموزش قصد داریم تنها با استفاده از کدهای CSS افکت هایی برای باکس های صفحات وب بوجود آوریم که تا پیش از ظهور CSS3 تنها با استفاده از تصاویر ممکن بود.انداختن سایه توسط تصاویر نه تنها زمان زیادی به واسطه طراحی گرافیکی در فتوشاپ طلب میکرد، بلکه باعث کاهش سرعت بارگزاری و افزایش حجم صفحات وب نیز می شد. اما با استفاده از CSS3 میتوان سایه ها و افکت های بسیار زیبایی را برای انواع باکس ها و جعبه های استفاده شده در وبسایت تنها با چند خط دستور ساده اعمال کرد. استفاده از این تکنیک بسیار ساده است و شما میتوانید با یادگیری فرمت کلی دستور افکت های مورد نظر خود را نیز بوجود آورید.

در زیر تصویری از نمونه نهایی را مشاهده می کنید: انداختن سایه و برجسته کردن عکس ها

خاصیت CSS Box Shadow

برای انجام اینکار دستور کلیدی ما box-shadow خواهد بود که با ایجاد تغییراتی در پارامترهای آن میتوان افکت های گوناگونی ایجاد کرد. این دستور میتواند 2 تا 6 پارامتر داشته باشد. فرم کلی دستور به شکل زیر است:

box-shadow: inset(سایه داخل کادر) horizontal(فاصله افقی سایه) vertical(فاصله عمودی سایه) blur(شفافیت سایه) spread(پخش شدن سایه) colour(رنگ سایه);

از 6 پارامتر فوق 2 تای آنها یعنی horizontal و vertical اجباری و spread و colour اختیاری می باشد

پشتیبانی مرورگرها

تمامی مرورگرهای شناخته شده و جدید از این دستور پشتیبانی میکنند:

  • اینترنت اکسپلورر 9 و بالاتر
  • فایرفاکس 3.5 و بالاتر
  • گوگل کروم 1 و بالاتر
  • سافاری 3 و بالاتر
  • اپرا 10.5 و بالاتر

نکته: مانند بسیاری از دستورات جدید در css3 برای استفاده از این دستور نیز شما نیاز به استفاده از پیشوندهای مرورگرهای مختلف دارید. مثلا برای استفاده از دستورات جدید در فایرفاکس باید از پیشوند -moz و برای کروم و سافاری از -webkit استفاده نمائید.

برای فایرفاکس 3.5 باید از دستور -moz-boz-shadow استفاده کنید اما برای فایرفاکس 4 و بالاتر نیازی به استفاده از پیشوند نمی باشد. همچنین برای گوگل کروم و سافاری نیز باید از دستور -webkit-box-shadow استفاده نمائید.

افکت 1

در این افکت می خواهیم طوری دستورات سایه برای باکس مورد نظر را اعمال کنیم که هر دو گوشه باکس به صورت بلند شده به نظر برسد. برای این منظور استفاده از دو خاصیت :before و :after الزامی است:

کدهای HTML

کدهای CSS

.myBox {
	width:50%;
	height:140px;
}

/* کدهای اصلی افکت */
.effect1
{
  position: relative;
}
.effect1:before, .effect1:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

افکت 2

در این افکت می خواهیم طوری دستورات سایه برای باکس مورد نظر را اعمال کنیم که فقط گوشه سمت چپ باکس به صورت بلند شده به نظر برسد. برای این منظور استفاده از خاصیت :before الزامی است:

کدهای HTML

کدهای CSS

.myBox {
	width:50%;
	height:140px;
}

/* کدهای اصلی افکت */
.effect2
{
  position: relative;
}
.effect2:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

افکت 3

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

کدهای HTML

کدهای CSS

.myBox {
	width:50%;
	height:140px;
}

/* کدهای اصلی افکت */
.effect3
{
  position: relative;
}
.effect3:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}


در پایان به دوستانی که مایلند در کار با سایه ها توسط CSS3 تبحر بیشتری پیدا کنند و یا افکت های بیشتری را تجربه کنند ابزار آنلاین CSS Box Shadow Generator را معرفی میکنم. توسط این ابزار قدرتمند می توانید تمامی خصیصه ها را به صورت آنلاین تغییر داده تا به سایه مورد نظر خود دست یابید، سپس کد تولید شده را به راحتی دریافت و استفاده کنید.

نظرات (10) -

  • محمدامین

    04/18/1393 07:09:20 ب.ظ | پاسخ به این نظر

    خوشحالم که برگشتید Smile

    • Admin

      04/19/1393 12:19:07 ق.ظ | پاسخ به این نظر

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

  • mahsa

    05/08/1393 10:22:15 ب.ظ | پاسخ به این نظر

    chera alaki tarif mikonid aghaye amin
    in coda ro ejra konid
    shayad estefade az kalameye ali monaseb nabashe
    man fekr mikardam age in cod haro egra konam natije chizi shabihe on tasaviri mishe ke rosh neveshte shode:
    افکت1
    افکت2
    ama aslan hachin chizi nabod

  • mahsa

    05/08/1393 10:26:00 ب.ظ | پاسخ به این نظر

    vaaaaaaaaaaaaaaaaaaaaay bebakhshid
    eshtebah az man bod
    bazam zod ghezavat kardam
    hagh ba aghaye mohammad amin hast
    aliiiiiiiiiiiiiiiiii bod
    khaste nabashid

  • ماهان

    05/13/1393 09:10:53 ق.ظ | پاسخ به این نظر

    عالي بود. ممنونم. منم تازه با وبسايت ها آشنا شدم. و بايد بگم كه آموزش هاتون خيلي منحصر به فرد هست

  • فرزانه

    05/25/1393 08:49:16 ب.ظ | پاسخ به این نظر

    از عالی هم بالاتر بود. واقعا از زحماتی که میکشید ممنونم

  • امین پورهادی

    05/26/1393 02:20:52 ق.ظ | پاسخ به این نظر

    خیلی ممنون از آموزش خوبتون Smile

    • ابزار وبلاگ

      02/04/1394 02:12:04 ب.ظ | پاسخ به این نظر

      دستتون درد نکنه بابت وقی که برای اموزش میذارید

Loading