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

هاست هاست هاست

تغییر دیزاین تگ Progress ( تگ پیشرفت کار ) توسط Css3

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

همانطور که میدانید , در html5 تگی جدید به نام <progress> اضافه شد که کار آن نمایش پیشرفت کار می باشد .

یکی از کاربرد های این تگ در همین سایت و در صفحه درباره وحید مجیدی از آن استفاده شده است .

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

این تگ دارای 2 خاصیت max و value میباشد که تعیین کننده کل مقدار و مقدار پر شونده می باشد .

مثلا اگر بخواهیم نصف این نوار را پرکنیم . کافیست خط زیر را در html بنویسیم .

پس از انجام این کار , کافیست کد های زیر را در css قرار دهید تا تمامی تگ های progress در سایت , به حالت زیر درآید .

تغییر دیزاین تگ Progress ( تگ پیشرفت کار ) توسط Css3

شما بجز تعویض رنگ که در بالا قرار داده شده , میتوانید خاصیت های دیگری در CSS از جمله border-radius , box-shadow , border , outline و … به آنها اضافه کنید .

نکته مهم این است که موارد بالا در internet explorer ساپورت و پشتیبانی نمیشود .

گرداوری : وحید مجیدی

پخش اختصاصی

نمونه آماده شده و دمو

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *