طراحی نوار وضعیت حبابی(قسمت هشتم)

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

گام شماره 1: 

ابتدا در داخل div با کلاس inner. یک عنصر div با کلاس percent. قرار دهید. سپس در داخل این عنصر، یک عنصر span قرار دهید و مقدار 67 را بین آن بنویسید. سپس از یک نماد % استفاده کنید: 

<div class="green">
 <div class="progress">
 <div class="inner">

 <div class="percent"><span>67</span>%</div>
 
 </div>
 </div>
 </div>

 گام شماره 2:

حالا برای عنصر div که از کلاس percent. استفاده می کند، ابتدا کدهای CSS زیر را می نویسم و سپس کدهای دیگری را به آنها اضافه می کنیم: 

.green .progress .inner .percent {
 
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

 ابتدا ویژگی position از این عنصر را برابر با مقدار absolute قرار داده ایم. 

سپس مقدار ویژگی های top  و left را برابر با 0 قرار داده ایم تا عنصر با کلاس percent. در گوشه ی سمت چپ و بالای عنصر والدش قرار گیرد. 

سپس مقدار ویژگی های width و height را برابر با 100% قرار دادیم تا تمام عرض و ارتفاع عنصر والدش را پوشش دهد و اشغال کند. 

گام شماره 3:

 اکنون کدهای css رنگی شده ی زیر را به کلاس خود اضافه می کنیم: 

.green .progress .inner .percent {
 
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 
 border:1px solid red;
 
 color: #03c603;
 font-size: 92px;
 font-weight: bold;
 
 text-align: center;
 
 text-shadow: 0 0 10px #029502;
 
}

 ابتدا برای اینکه بتوانیم تغییرات ایجاد شده در دایره ی خود را، بعد از نوشتن کدهای بالا، به خوبی مشاهده کنیم، از ویژگی border استفاده می کنیم و رنگ red را به آن می دهیم. 

سپس می خواهیم رنگ متن مقدار 67% را تعیین کنیم. پس از ویژگی color استفاده می کنیم و یک رنگ نزدیک به سبز(در اینجا 03c603) را به آن می دهیم. 

حالا با استفاده از ویژگی font-size میزان بزرگی فونت مقدار 67% را تعیین می کنیم. 

سپس با استفاده از ویژگی font-weight تعیین می کنیم که فونت ما به صورت bold نشان داده شود. 

حالا با استفاده از ویژگی text-align مشخص می کنیم که مقدار 67% در وسط div با کلاس percent. قرار گیرد. 

در آخر نیز، با استفاده از ویژگی text-shadow برای مقدار 67% یک سایه به اندازه ی 10 پیکسل و به رنگی نزدیک به سبز، تعیین می کنیم. 

مشاهده ی نتیجه:

در خودتان امتحان کنید زیر، نتیجه ی حاصل شده را به خوبی مشاهده می کنید:

See the Pen 2.3نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

 همان طور که مشاهده می کنید، عبارت 67% در بالای عنصر والد خود قرار گرفته است. برای اینکه این مقدار را در وسط قرار دهیم، می توانیم از ویژگی line-height استفاده کنیم. به خودتان امتحان کنید زیر توجه کنید: 

See the Pen 2.4نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

• قبلی
• بعدی