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

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

گام شماره 1: 

ابتدا یک عنصر div با کلاس inner. را در بین عنصر div با کلاس progress. ایجاد می کنیم: 

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

 سپس کدهای CSS زیر را به این عنصر اختصاص می دهیم: 

.green .progress .inner {
 
 width: 240px;
 height: 240px;
 
 background-color: blue;
 
 border: 5px solid red;
 
 border-radius: 50%;
}

 اگر به یاد داشته باشید، برای دایره ی سبز رنگ، که قبلا آن را ایجاد کردیم، برای width و height مقدار 250 پیکسل را تنظیم کردیم. حالا برای دایره ی دوم، باید مقدار width و height را برابر با 240 پیکسل قرار دهیم تا در درون دایره ی سبز رنگ، جا شود. 

سپس برای اینکه به شما نشان دهیم که دقیقا می خواهیم چه کاری را انجام دهیم، رنگ پس زمینه ی این دایره را با استفاده از ویژگی background-color برابر با blue (آبی) قرار می دهیم. 

سپس رنگ کادر دور این عنصر را قرمز(red) قرار می دهیم و ضخامت آن را 5 پیکسل قرار می دهیم.

سپس با استفاده از دستور border-radius این عنصر را به یک دایره تبدیل می کنیم.  

سپس کدهای CSS زیر را نیز به کدهای بالا اضافه می کنیم. که به صورت رنگی نشان داده شده اند:

.green .progress .inner {
 
 width: 240px;
 height: 240px;
 
 background-color: blue;
 
 border: 5px solid red;
 
 border-radius: 50%;
 
 z-index: 2;
 position: absolute;
}

 ابتدا در مورد کدهای آبی رنگ بالا، به نکات مهم زیر توجه کنید: 

 در کدهای مثال 1.3، ویژگی z-index دایره ی داخی را برابر با 2 قرار دادیم تا بالاتر از دایره ی آبی رنگ نشان داده شود. و برای اینکه بتوانیم از دستور z-index استفاده کنیم، ویژگی position را برابر با absolute قرار دادیم. و بنابر نکته ی مهم 2، این عنصر نسبت به عنصر با کلاس progress. موقعیت دهی می شود. 

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

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

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

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

گام شماره 1: 

در داخل کلاس green .progress .inner. ویژگی background-color را به کامنت تبدیل کنید، تا رنگ پس زمینه ی آبی از بین برود. 

گام شماره 2: در داخل کلاس مذکور، رنگ ویژگی border را از red (قرمز) به 1a1a1a# تغییر دهید. این رنگ نسبت به رنگ black کمی روشن تر است. 

گام شماره 3: در داخل کلاس green. ویژگی border را به کامنت تبدیل کنید تا خط قرمز رنگ به دور این عنصر از بین برود. 

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

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