آموزش css3 آموزش box-shadow در css | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

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

آموزش css3 آموزش box-shadow در css فیلم آموزش رایگان

آموزش css

آموزش css3 آموزش box-shadow در css

در سی اس اس برای افزودن سایه به عناصر قرار گرفته روی صفحه می توان
از Property های box-shadow و text-shadow به ترتیب برای باکس ها و متون استفاده نمود.
برای آنکه به طور عملی با این Property ها آشنا شویم، کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:

همانطور که در کد فوق می بینیم یک تگ <div> با id یی تحت عنوان box1 به علاوه یک تگ <h2>
حاوای عبارت “Netshahr” قرار داده ایم. در ادامه با استفاده از کدهای سی اس اس (CSS)

بیشتر بخوانید :
آموزش ساخت منوی آبشاری در html و css قسمت اول

آموزش box-shadow در css
قصد داریم تا هم به تگ <div> و هم به تگ <h2> سایه اضافه کنیم. ابتدا کدهای مرتبط با تگ <div> را به فایل سی اس اس (CSS) خود اضافه می کنیم:

 

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *