آموزش box-shadow در css
آموزش box-shadow در css
فهرست موضوعات در این آموزش
سلام خدمت همگی دوستان پاسخ وردپرس
.باز هم با آموزشی جدید در خدمت شما هستم.
در این آموزش قصد دارم به ایجاد سایه های زیبایی که تا قبل از آمدن CSS3 فقط می توانستید آنهارا در فتوشاپ ببینید،بپردازم.
حتما شده بود بخواهید به یک المنت ، یک سایه ی زیبا بدید ولی نمیتونستید اونو با کد بنویسید و میرفتید
سراغ فتوشاپ و سایه رو ایجاد میکردید بعد به صورت یه تصویر ذخیره میکردید و بعد …
که باعث میشد حجم صفحه ی وبتون بره بالا و این اصلا خوب نیست؛
هم از نظر سئو و هم از نظر کاربر پسند بودن.نمونه اش رو میتونید در زیر ببینید.
(این مال وقتی بود که نمیتونستم با کد همچنین سایه هایی ایجاد کنم)
آموزش css3 آموزش box-shadow در css فیلم آموزش رایگان
آموزش css3 آموزش box-shadow در css
در سی اس اس برای افزودن سایه به عناصر قرار گرفته روی صفحه می توان
از Property های box-shadow و text-shadow به ترتیب برای باکس ها و متون استفاده نمود.
برای آنکه به طور عملی با این Property ها آشنا شویم، کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <div id="box1"></div> <h2>Netshahr</h2> </body> </html> |
همانطور که در کد فوق می بینیم یک تگ <div> با id یی تحت عنوان box1 به علاوه یک تگ <h2>
حاوای عبارت “Netshahr” قرار داده ایم. در ادامه با استفاده از کدهای سی اس اس (CSS)
قصد داریم تا هم به تگ <div> و هم به تگ <h2> سایه اضافه کنیم. ابتدا کدهای مرتبط با تگ <div> را به فایل سی اس اس (CSS) خود اضافه می کنیم:
1 2 3 4 5 6 |
#box1 { width:300px; height:200px; background-color:red; box-shadow:10px 10px 15px 10px black; } |
هیچ دیدگاهی برای این محصول نوشته نشده است.