آموزش box-shadow در css

0 دیدگاه 4,785 آموزش HTML5 و CSS3, آموزش css

آموزش box-shadow در css

فهرست موضوعات در این آموزش

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

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

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

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

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Netshahr</title>

</head>

<body>

<h2>Netshahr</h2>

</body>

</html>

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

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

#box1 {
    width:300px;
    height:200px;
    background-color:red;
    box-shadow:10px 10px 15px 10px black;
}

#box1 {

width:300px;

height:200px;

background-color:red;

box-shadow:10px 10px 15px 10px black;

}

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

آموزش box-shadow در css