X

جستجو


آموزش ساخت meter با ایموجی

آموزش ساخت meter با ایموجی
  • اشتراک گذاری

آموزش ساخت meter با استفاده از CSS و HTML

سلام دوستان عزیز شورت کدز ، در این آموزش قصد ساخت meter با استفاده از ایموجی های گوناگون را داریم تا علاوه بر زیبایی بتوانید بجای استفاده از کدهای طولانی ، از این آموزش بهره لازم را ببرید . meter یکی از عناصر فرم های html میباشد که برای نمایش مقداری عددی نسبت به میزان کل یک عنصر استفاده میگردد . به عنوان مثال میزان پیشرفت پروژه ، میزان رای و امتیاز یک محصول و …. ما در این آموزش میخواهیم یک استایل به تگ meter بدهیم تا ظاهری مناسب و کاربردی تر داشته باشد مخصوصا اگر شما میخواهید برای نمایش امتیاز از آن استفاده کنید یا ایموجی های مختلف .

گام نخست : ساخت meter در html

ابتدا یک فایل html بسازید و در آن کد های زیر را درون تگ body خود قرار دهید .

<meter min="0" max="5" value="2.5" ></meter>

در قطعه کد بالا مقدار min حداقل مقدار meter را نمایش میدهد . مقدار max نیز حداکثر مقدار قابل قبول را نمایش میدهد و همچنین مقدار value برابر است با مقدار فعلی عنصر meter ما .

گام دوم : دادن استایل به عنصر meter

ابتدا به عنصر meter خود یک استایل میدهیم که اصلی ترین آن قسمت بکگراند میباشد .

meter{
    margin:150px auto;
    display: block;
    width: 500px;
    height: 150px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -28 67 100" ><text font-size="50" y="0.8em" opacity="0.2">❤️</text></svg>') 0/auto 100%;
}

در قطعه کد بالا ما برای ساخت meter خود با استفاده از ایموجی یک بک گراند ایجاد کرده ایم که در داخل آن از کد های svg استفاده کرده ایم.

در کد بالا مقدار viewBox شامل 4 عدد میباشد که عدد صفر فاصله از سمت راست را نمایش میدهد ، عدد -28 فاصله از پایین را مشخص میکند که در مقدار فوق ما 28 پیکسل از سمت بالا فاصله گرفته ایم . مقدار 67 نمایانگر عرض کادر svg ما میباشد و عدد 100 نیز ارتفاع آن را مشخص میکند .

تگ text برای وارد کردن ایموجی میباشد که مقدار font-size باید بر اساس نوع ایموجی شما تغییر یابد . مقدار y نیز مانند line-height عمل کرده و فاصله در محور y یا عمودی را مشخص میکند . مقدار opacity برای دادن شفافیت به ایموجی میباشد . شما به جای ❤️ میتوانید استیکر دلخواه خود را از اینجا کپی کرده و قرار دهید .

گام سوم : دادن استایل به نوار وضعیت meter

برای این منظور ابتدا کد css زیر را قرار میدهیم .

meter::-webkit-meter-optimum-value{
   
    width: 500px;
    height: 150px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 67 100" ><text font-size="50" y="0.8em">❤️</text></svg>') 0/auto 100%;
}

در قطعه کد بالا تنها مقادیری از svg جهت فیکس شدن بر روی کادر تغییر کرده است تا ایموجی هایی با شفافیت 0.2 کاملا در پشت این ایموجی های بدون opacity قرار گیرند . آموزش ما رو به اتمام رسید اما جهت زیبایی بیشتر و جهت حذف بک گراند هنگام ساخت meter میتوانید از کد زیر استفاده کنید .

meter::-webkit-meter-bar{
    border:0 solid;
    background: transparent;
}

ویدیو آموزشی ساخت meter با استفاده از ایموجی ها