دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS3 » آموزش Box-shadow و Text-shadow در CSS3
آموزش Box-shadow و Text-shadow در CSS3

آموزش Box-shadow و Text-shadow در CSS3

box-shadow و text shadow در این قسمت از فیلم آموزش CSS3  در سایت وب سیتی توضیح داده شده است . که در طراحی سایت زیاد استفاده می شود و باعث می شود طرح های شما زنده تر به نظر برسند .

box-shadow چیست ؟

shadow به معنی سایه است و با استفاده از box-shadow می تونیم به همه عناصر HTML سایه بدیم و نحوه مقدار دهی اون هم به صورت زیره :

مقدار اول : مشخص کننده سایه به صورت افقی است ، در مقدار بالا سایه به سمت راست می رود ولی اگر مقدار منفی بهش بدید سایه به سمت چپ می رود .

مقدار دوم : مشخص کننده سایه به صورت عمودی است ، در مقدار دوم باعث میشه که سایه در پایین عنصر ایجاد بشه اگر بهش مقدار منفی بدیم سایه در بالای تصویر ایجاد می شود .

مقدار سوم : مشخص کننده Blur هستش هر چقدر مقدار آن زیاد باشد سایه به صورت پخش شده نشان دداده می شود و اگر مقدار آن را کمتر قرار دهید سایه به صورت متراکم نشان داده خواهد شد .

مقدار چهارم : مشخص کننده رنگ سایه است که می توانید هر رنگی را برای آن انتخاب کنید و از متد های رنگ هگزا دسیمال و RGBA برای رنگ دهی به سایه می توانید استفاده کنید .

حتی می توانید بیش تر از یک سایه به عنصر مورد نظر بدهید مثلاً یکی از سایه ها آبی باشه و اون یکی سایه قرمز باشه ، برای این کار باید سایه ها را با علامت کاما از هم جدا کنید ، این ها را در آموزش تصویری CSS3 توضیح داده ایم .

text-shadow چیست ؟

از text-shadow برای سایه دادن به متن استفاده می کنیم یعنی می توانید به متن هایی که در HTML نوشته اید سایه بدید ، مقدار دهی text-shadow هم مثل box-shadow است .

در text-shadow هم می توانید بیش از یک سایه به متن ها بدهید ، برای این کار باید آن ها را با علامت کاما از هم جدا کنید .

برای دانلود فیلم آموزش CSS3 اینجا را کلیک کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *