سبد (0)

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

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


گام شماره ی 1: 

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

مثال 1.1

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

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

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

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

مثال 1.2

.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% از ارتفاع والدش به سمت پایین می بریم: 

مثال 1.3

.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% از عرض والدش، به سمت چپ می بریم:

مثال 1.4

.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% استفاده می کنیم: 

مثال 1.5

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

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

 

آموزش صوتی JavaScript

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه