illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ایجاد سایه های بسیار زیبا برای یک باکس تنها با CSS

12292 ۱۳ بهمن ۹۲

بنام یگانه هستی بخش

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

old_shadows

خب حالا می خواهیم همین سایه هارو با CSS3 بنویسیم.مثلا سایه های زیر رو با سی اس اس بنویسیم.

Capture2

میتونید دموی کار رو از اینک زیر ببینید.

سایه

می خواهیم توسط box-shadow این سایه هارا ایجاد کنیم.این خاصیت 2 تا 6 مقدار را میپذیرد.به صورت زیر

که inset باعث میشود سایه در داخل جعبه ایجاد شود؛horizontal مقدار افقی سایه را مشخص میکند؛vertical مقدار عمودی سایه را مشخص میکند؛blur میزان خیرگی یا تیرگی را مشخص میکند؛و مقدار بعدی یعنی spread میزان گسترش سایه را مشخص میکند که میتوانیم به همه مقادیر منفی نیز بدهیم؛و colour هم رنگ سایه را مشخص میکند.

مقادیر افقی و عمودی سایه اجباری هستند و بقیه اختیاری.میتوانید به صورت زیر سایه را مقدار دهی کنید.دقت داشته باشید میتوانید سایه های چندگانه بدید که میشه اونهارو با ویرگول از هم جدا کرد(خط چهارم).

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

تمام مروگر هایی که از CSS3 پشتیبانی میکنند میتوانند این سایه هارا به درستی نمایش دهند.میتوانید در اینجا ، مرورگر هایی که از box-shadow پشتیبانی میکنند را ببینید.

 

چون برخی از کد ها تکرار می شوند، کد های تکراری را در این قسمت قرار میدم.

کد HTML:

کد CSS:

 

افکت سایه اول

shadow1

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

CSS:

توضیح:یک سایه ی ساده دادیم و فقط تنها کاری که کردیم این بود که سایه را مقداری به بالا بردیم(-6px) تا همه ی آن نمایش داده نشود.

یادآوری : برای اینکه سایه ی مارا مرورگر کروم و فایرفاکس به درستی نشان دهند ، باید یک بار دیگر آن سایه را با پیشوند آنها بنویسیم(به صورت بالا).

افکت سایه دوم

shadow2

از این به بعد سایه هایی که میدهیم کمی حرفه ای تر میشن و نمیشه به طور معمول اون هارو روی باکسمون اعمال کنیم و از شبه عناصر before و after استفاده میکنیم.(برای اطلاعات بیشتر کلیک کنید)

نکته : چون در هر قسمت باز هم کدهایی تکرار شده است فقط برای بار اول کمی در مورد اونا توضیح میدم

CSS:

توضیح:در خط 3 ،همونطور که کد هارو دیدید به کلاس shadow2 (به هر دایو دو کلاس دادیم که کلاس box ثابت هست و کلاس سایه ها متغیر هستن)، position:relative دادیم تا وقتی به المنت های داخل باکس position:absolute دادیم،موقعیت آنها نسبت به پنجره ی مرورگر تعیین نشود ، بلکه نسبت به عنصر والد آن(یعنی div.shadow2) ، تعیین شود.

نکته : چون استایل شبه کلاس های before و after خیلی شبیه به هم هستند و تنها کمی با هم تفاوت دارند، استایلی رو که می خواهیم به ::before بدیم، به ::after هم میدیم (خط 5)و بعد ، از دادن استایل های تکراری به ::after جلوگیری میکنیم.

بعد مهم ترین قسمت z-index ای هست که به صورت -1 دادیم تا شبه عناصر before و after در پشت باکسمون قرار بگیره.در خط 8 به آنها پوزیشن با مقدار absolute دادیم تا بتونیم به راحتی مکانشو تعیین کنیم.

شاید براتون سوال پیش بیاد که کد خط نهم(9) چیکار میکنه؟!!جواب اینه که باعث میشه شبه عناصر نمایش داده بشن و اگر این خط رو پاک کنیم دیگه ::before و ::after نشون داده نمیشه.

در خط 14 هم تعیین میکنیم تا اندازه ی ::before و ::after با بزرگ بودن عرض پنجره ی کاربر از 300 پیکسل بیشتر نشه تا سایه زیباییشو از دست نده.

بعد در خط های 16تا18 به ::before و ::after سایه ای دادیم و بعد در خط های 19 تا 23 و 27تا31 گفتیم تا آنها مقداری بچرخند.

در خط 32 و 33 هم مکان ::after را تعیین کردیم(گفتیم در سمت راست قرار بگیرد).

حالا اگر بخواهیم ببینیم واقعا چطوری این سایه اعمال شده است z-index آنها را از -1 به 1 تغیییر دهید تا کاملا بفهمید چه شده است.(میتوانید نتیجه را در تصویر زیر ببینید)

test2

 افکت سایه سوم

shadow3

 

CSS:

این سایه هم شبیه سایه ی شماره دو هست فقط از ::after استفاده نکردیم.

افکت سایه چهارم

shadow4

CSS:

این سایه هم شبیه سایه ی شماره دو هست فقط از ::before استفاده نکردیم.

افکت سایه پنجم

shadow5

CSS:

این سایه دقیقا شبیه سایه ی شماره 2 هست تنها کاری که کردیم این است که درجه ی چرخش آنها را افزایش دادیم(از 3 پیکسل به 8 پیکسل تغییر دادیم).

افکت سایه ششم 

shadow6

CSS:

توضیح:در خط 5 تا 7 دو سایه به باکس دادیم که یکی از آنها در داخل باکس(inset) اعمال شده است.در خط 21 و 22 هم به آنها border radius دادیم.(برای اطلاعات بیشتر کلیک کنید).اگر همانند افکت سایه ی شماره 2 ، z-index:-1 را به z-index:1 تغییر دهیم شاهد تصویر زیر هستیم(خط 13)

test6

 

 

افکت سایه هفتم 

shadow7

CSS:

این سایه هم مثل سایه ی شماره 6 هست فقط تفاوتش اینه که از ::after استفاده نکردیم و فاصله ی ::before رو از بالا و پایین 0 قرار دادیم(خط 17 و 18).یعنی ارتفاع ::before به اندازه ی ارتفاع div.shadow7 شده و در نتیجه سایه ی ::before از بالا هم قابل مشاهده هست.

افکت سایه هشتم

shadow8

CSS:

 

میتونید سورس کد رو از پایی دانلود کنید.

نتیجه گیری

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

امیدوارم که خسته نشده باشید(من که حسابی خسته شدم :) )

در پناه حق باشید یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 19 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    seyyedali farrokh(۸ فروردین ۱۳۹۳)

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

    • ‏‏
      علی امینی(۱۰ فروردین ۱۳۹۳)

      سلام
      اینطور که از توضیح شما فهمیدم، به نظرم باید از مقدار سوم(خیرگی) و چهارم(گسترش) استفاده کنید.یه چیزی مثل کدزیر:
      box-shadow:0 0 6px 5px #777;

  • ‏‏

    سلام و سپاس از مطلب مفیدی که منتشر کردید. یه سوال دارم از حضورتون؛ من چند تا باکس با css طراحی کردم، چطور باید این سایه ها رو براشون به کار ببرم؟

    • ‏‏
      لقمان آوند(۷ مرداد ۱۳۹۳)

      تو مطلب که خوب توضیح داده شده .
      کافیه کلاس های css شامل سایه ها رو تعریف کنید و اون کلاس رو بدید به باکس ها تون . (به تگ های div)

  • ‏‏

    شماره هشتش برا شما فقط ذوورش سایه داره ولی برا من بالا پایینم سایه دارم چی کار کنم؟!؟؟!

    • ‏‏
      علی امینی(۱۱ شهریور ۱۳۹۳)

      شماره هشت بالا پایینشم یه مقدار سایه داره. میشه یه عمی چیزی قرار بدید؟

  • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram