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

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

گام شماره ی 1: 

ابتدا در داخل عنصر div با کلاس percent. یک عنصر div دیگر ایجاد می کنیم، و کلاس آن را water. قرار می دهیم. این عنصر قرار است آب سبز رنگ مواج را شبیه سازی کند: 

<div class="green">
 <div class="progress">
 <div class="inner">
 <div class="percent"><span>67</span>%</div>

 <div class="water"></div>
 
 </div>
 </div>
 </div>

 حالا در داخل کدهای CSS خود، به این کلاس استایل های خود را انتساب می دهیم: 

.green .progress .inner .water {

 position: absolute;
 z-index: 1;
 width: 200%;
 height: 200%;
 background: rgba(83,252,83,0.5);
 /*top: 25%;*/
 /*left: -50%;*/
 /*border-radius: 40%;*/
 
}

 در کدهای بالا، ابتدا ویژگی position عنصر div که از کلاس water. استفاده می کند را برابر با مقدار absolute قرار می دهیم. 

سپس ویژگی z-index را برابر با 1 قرار می دهیم. تا در زیر عنصر با کلاس inner. قرار گیرد. 

حالا با استفاده از ویژگی های width و height تعیین می کنیم که عرض و ارتفاع عنصر با کلاس water. هرکدام دو برابر(200%) عنصر با کلاس inner. باشد. 

اکنون با استفاده از ویژگی background و دستور rgba یک رنگ متمایل به سبز را برای پس زمینه ی عنصر با کلاس water. انتخاب می کنیم و با استفاده از آرگومان آخر این دستور(یعنی مقدار 0.5) تعیین می کنیم که پس زمینه ی این عنصر نیمه شفاف باشد. 

دستوراتی که به رنگ طلایی نشان داده شده اند، را کامنت کرده ایم تا بعدا به توضیح هریک از آنها بپردازیم. 

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

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

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

 برای مشاهده ی نتیجه به صورت تمام صفحه، اینجا کلیک کنید. 

 گام شماره 2: 

حالا با استفاده از ویژگی top، این مستطیل سبز رنگ را به اندازه ی 25% از ارتفاع والدش به سمت پایین می بریم: 

.green .progress .inner .water {
 
 
 position: absolute;
 z-index: 1;
 width: 200%;
 height: 200%;
 background: rgba(83,252,83,0.5);
 top: 25%;
 /*left: -50%;*/
 /*border-radius: 40%;*/
 
}

 نتیجه به صورت زیر خواهد بود: 

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

گام شماره 3:

حالا با استفاده از ویژگی left، این مستطیل را به اندازه ی 50% از عرض والدش، به سمت چپ می بریم:

.green .progress .inner .water {
 
 
 position: absolute;
 z-index: 1;
 width: 200%;
 height: 200%;
 background: rgba(83,252,83,0.5);
 top: 25%;
 left: -50%;
 /*border-radius: 40%;*/
 
}

 نتیجه به صورت زیر خواهد بود:

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

گام شماره 4:

حالا با استفاده از ویژگی border-radius تقریبا گوشه های این مستطیل را گرد می کنیم. یعنی برای این ویژگی، از مقدار 40% استفاده می کنیم: 

.green .progress .inner .water {
 
 
 position: absolute;
 z-index: 1;
 width: 200%;
 height: 200%;
 background: rgba(83,252,83,0.5);
 top: 25%;
 left: -50%;
 border-radius: 40%;
 
}

 نتیجه به صورت زیر خواهد بود: 

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

 برای مشاهده ی نتیجه به صورت تمام صفحه، اینجا کلیک کنید.