طراحی نوار وضعیت حبابی(قسمت هفتم)
در این قسمت از آموزش طراحی نوار وضعیت حبابی، قصد داریم در داخل دایره ی سبز رنگ، یک دایره ی دیگر ایجاد کنیم. سپس به این دایره ی جدید یک border به ضخامت 5 پیکسل می دهیم. درواقع قصد داریم که یک فاصله به اندازه ی 5 پیکسل، بین دایره ی سبز رنگ و محتویات درون دایره ی دوم ایجاد کنیم. برای انجام این کار، گام های زیر را انجام دهید:
گام شماره 1:
ابتدا یک عنصر div با کلاس inner. را در بین عنصر div با کلاس progress. ایجاد می کنیم:
مثال 1.1
<div class="green">
<div class="progress">
<div class="inner">
</div>
</div>
</div>
سپس کدهای CSS زیر را به این عنصر اختصاص می دهیم:
مثال 1.2
.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 زیر را نیز به کدهای بالا اضافه می کنیم. که به صورت رنگی نشان داده شده اند:
مثال 1.3
.green .progress .inner {
width: 240px;
height: 240px;
background-color: blue;
border: 5px solid red;
border-radius: 50%;
z-index: 2;
position: absolute;
}
ابتدا در مورد کدهای آبی رنگ بالا، به نکات مهم زیر توجه کنید:
نکات مهم1:
هرچه z-index یک عنصر بیشتر باشد، عنصر مورد نظر ما بالاتر از عناصری که z-index کمتری دارند، نشان داده می شود.
نکته مهم: دستور z-index تنها در عناصری که توسط دستورات زیر موقعیت دهی شده باشند، کار می کند:
position: absolute
position: relative
position: fixed
نکات مهم 2:
هر عنصری که دارای position:absolute باشد، نسبت به نزدیک ترین والد خود(جد خود) که دارای position باشد، موقعیت دهی می شود.
در کدهای مثال 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.
- نوشته شده توسط احسان عباسی
- بازدید: 4363
