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

در چهار مقاله ی قبلی، به آموزش ظرف ها و عناصر انعطاف پذیر پرداختیم، و با انواع خصوصیات آنها آشنا شدیم. اما در این مقاله وارد بخش عملی طراحی نوار وضعیت حبابی می شویم. 

 برای شروع کار، قصد داریم یک دایره ی سبز رنگ ایجاد کنیم. برای ایجاد این دایره، گام های زیر را دنبال کنید: 

گام شماره ی 1: 

ابتدا یک عنصر div ایجاد می کنیم  و کلاس green. را به آن می دهیم. دایره ی ما قرار است در داخل این عنصر قرار بگیرد: 

<div class="green">

</div>

 حالا یک عنصر div دیگر در داخل عنصر دربرگیرنده ی بالا قرار می دهیم که خودِ دایره ی سبز رنگ ما می باشد، و کلاس progress. را به آن می دهیم: 

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

اکنون می خواهیم از CSS استفاده کنیم و به این دایره ی سبز رنگ، رنگ و لعاب بدهیم. بعنوان اولین کدهای CSS از دستورات زیر استفاده می کنیم: 

html,
body {
 
 margin:0;
 padding:0;
 
}

body {
 
 background-color:black ;
 
}

در کدهای بالا، ابتدا ویژگی های margin و padding برای عناصر html و body را برابر با 0 قرار می دهیم. این کار باعث می شود که margin ها و padding های پیش فرض مرورگر از بین بروند. 

سپس با استفاده از ویژگی background-color، رنگ پس زمینه ی بخش body را برابر با black (سیاه) قرار می دهیم. 

حالا می خواهیم به عنصر div که از کلاس progress. استفاده می کند، استایل دهی کنیم، بنابراین به صورت زیر عمل می کنیم: 

.green .progress {
 
 position: relative;
 border-radius: 50%;
 
 width: 250px;
 height: 250px;
 
 border: 5px solid #53fc53;
 
 box-shadow: 0 0 20px #029502;
 
}

 سلکتور کلاس بالا، می گوید که برای عنصر با کلاس progress. که در داخل عنصر با کلاس green. قرار دارد، دستورات زیر را اعمال کن. 

در دستورات بالا، ابتدا مقدار position را برابر با مقدار relative قرار داده ایم تا موقعیت  عنصر div با کلاس progress. نسبت به عنصر والد خود، سنجیده شود(و با تغییر یافتن موقعیت عنصر والد، این عنصر نیز تحت تاثیر قرار گیرد). 

سپس برای اینکه عنصر ما(یعنی همین عنصر مورد نظر) به شکل دایره در بیاید، از دستور border-radius استفاده کردیم و مقدار آن را برابر با 50% قرار دادیم. (برای ایجاد یک دایره ی کامل باید این کار را انجام دهید). 

سپس با استفاده از ویژگی border ضخامت کادر دایره را برابر با 5 پیکسل قرار دادیم و از مقدار solid و یک رنگ سبز (53fc53) برای این کادر استفاده نمودیم. 

 در دستور آخر نیز، از ویژگی box-shadow استفاده کردیم تا یک سایه ی سبز رنگ را به دور دایره ی سبز، اضافه کنیم. 

پس از انجام مراحل بالا، آنچه به دست می آوریم، به صورت زیر خواهد بود: 

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

• قبلی
• بعدی