خانه وبلاگ کدنویسی ایجاد سایه در متن و تصاویر با استفاده از Css3

ایجاد سایه در متن و تصاویر با استفاده از Css3

وبلاگ - کدنویسی

شاید شما تا به حال با css3 و دستورات مربوط به آن آشنا شده باشید.

با ورود css3 به نوعی انقلابی در طراحی وب سایت بوجود آمده است.با css3 دیگر نیاز به استفاده از تصاویر در طراحی صفحات وب نیست، و شما به راحتی جلوه هایی را که با تصاویر به صفحات وب می دادید توسط سی اس اس3 ایجاد کنید.

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

یعنی شما به راحتی میتوانید عرض صفحات را به صورت درصدی تعیین کنید و با تغییر اندازه صفحه نمایش عرض سایت شما هماهنگ با ریزولوشن صفحه نمایش تغییر کند. یکی از مشکلات استفاده از تصاویر ،این بود که با تغییر اندازه صفحه به دلیل ثابت بودن عرض تصویر، صفحه شما به صورت صحیح و درست نمایش داده نمی شد.

یکی از ابزارهای مربوط به css3 ایجاد سایه برای متن است.

شما برای ایجاد سایه برای متون خود میتوانید از کد زیر استفاده کنید:

.text-shadow{text-shadow:1px 1px 1px #000;

در مورد این کد مقدار 1px اول مربوط به مایل بودن سایه در متن است.یعنی هر چه این عدد بیشتر شود مایل بودن سایه در متن نیز بیشتر میشود

مفدار 1px دوم نیز مربوط به کشیدگی سایه در زیر متن است.یعتی وقتی مقدار این عدد را افزایش دهید طول سایه در زیر متن بیشتر می شود و سایه بزرگتر می شود.

مقدار 1px سوم نیز مربوط به حالت پخش سایه یا همان محو شدگی سایه است.این مقدار تعیین میکند که سایه شما چه مقدار حالت محو و پخش شدگی داشته باشد.

خوب میرسیم در مورد سایه مربوط به تصاویر و اشیاء، برای ایجاد سایه از این کد استفاده کنید:

.box-shadow{
-moz-box-shadow: 0 0 3px #B3B3B3;;
-webkit-box-shadow: 0 0 3px #B3B3B3;
 box-shadow: 0 0 3px #B3B3B3;

کد moz مخصوص ایجاد سایه در مرورگر firefox است و کد webkit مخصوص ایجاد سایه در مرورگرهای chrome,safari است و کد آخر هم مخصوص به IE9 و تمام مرورگرهایی که css3 را ساپورت میکنند.

در مورد اعداد این کد،این کد هم شبیه به همان کد مربوط به ایجاد سایه برای متن هست.

 

به علت ارسال اسپم های فراوان، قسمت نظرات سایت در حال حاضر غیرفعال می باشد.
به این دلیل از شما کاربران گرامی عذرخواهی می کنیم.

ایمن شده بوسیله وب سایت تک وب دیزاین تک وب دیزاین