سبد (0)

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

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


گام شماره 1: 

ابتدا در داخل div با کلاس inner. یک عنصر div با کلاس percent. قرار دهید. سپس در داخل این عنصر، یک عنصر span قرار دهید و مقدار 67 را بین آن بنویسید. سپس از یک نماد % استفاده کنید: 

مثال 1.1

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

<div class="percent"><span>67</span>%</div>

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

 


 گام شماره 2:

حالا برای عنصر div که از کلاس percent. استفاده می کند، ابتدا کدهای CSS زیر را می نویسم و سپس کدهای دیگری را به آنها اضافه می کنیم: 

مثال 1.2

.green .progress .inner .percent {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 ابتدا ویژگی position از این عنصر را برابر با مقدار absolute قرار داده ایم. 

سپس مقدار ویژگی های top  و left را برابر با 0 قرار داده ایم تا عنصر با کلاس percent. در گوشه ی سمت چپ و بالای عنصر والدش قرار گیرد. 

سپس مقدار ویژگی های width و height را برابر با 100% قرار دادیم تا تمام عرض و ارتفاع عنصر والدش را پوشش دهد و اشغال کند. 


گام شماره 3:

 اکنون کدهای css رنگی شده ی زیر را به کلاس خود اضافه می کنیم: 

Title

.green .progress .inner .percent {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

border:1px solid red;

color: #03c603;
font-size: 92px;
font-weight: bold;

text-align: center;

text-shadow: 0 0 10px #029502;

}

 ابتدا برای اینکه بتوانیم تغییرات ایجاد شده در دایره ی خود را، بعد از نوشتن کدهای بالا، به خوبی مشاهده کنیم، از ویژگی border استفاده می کنیم و رنگ red را به آن می دهیم. 

سپس می خواهیم رنگ متن مقدار 67% را تعیین کنیم. پس از ویژگی color استفاده می کنیم و یک رنگ نزدیک به سبز(در اینجا 03c603) را به آن می دهیم. 

حالا با استفاده از ویژگی font-size میزان بزرگی فونت مقدار 67% را تعیین می کنیم. 

سپس با استفاده از ویژگی font-weight تعیین می کنیم که فونت ما به صورت bold نشان داده شود. 

حالا با استفاده از ویژگی text-align مشخص می کنیم که مقدار 67% در وسط div با کلاس percent. قرار گیرد. 

در آخر نیز، با استفاده از ویژگی text-shadow برای مقدار 67% یک سایه به اندازه ی 10 پیکسل و به رنگی نزدیک به سبز، تعیین می کنیم. 


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

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

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

 

 همان طور که مشاهده می کنید، عبارت 67% در بالای عنصر والد خود قرار گرفته است. برای اینکه این مقدار را در وسط قرار دهیم، می توانیم از ویژگی line-height استفاده کنیم. به خودتان امتحان کنید زیر توجه کنید: 

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

 

 

آموزش صوتی JavaScript

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

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

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