سبد (0)

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

در این قسمت از آموزش طراحی نوار  وضعیت حبابی، قصد داریم در داخل دایره ی سبز رنگ، یک دایره ی دیگر ایجاد کنیم. سپس به این دایره ی جدید یک 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.

 

آموزش صوتی JavaScript

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

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

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