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

چاپ

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


گام شماره 1: 

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

مثال 1.1

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

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

</div>
</div>
</div>

 


 گام شماره 2:

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

مثال 1.2

.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 رنگی شده ی زیر را به کلاس خود اضافه می کنیم: 

Title

.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.