آموزش box-shadow در css

//

آموزش box-shadow در css

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

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

آموزش css

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

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

آموزش CSS3 آموزش transition در CSS3
یک آموزش جذاب دیگه!

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

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

 

میانگین رتبه 5/5 تعداد رای : 2

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!