آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۱۷) : Counter یا شمارنده – قسمت ۲

css3 attributes

همونطور که در جلسه قبل دیدید در مورد CSS Counter توضیحات مقدماتی رو خدمتتون دادیم و گفتیم که شمارشگرها در CSS دو جزء اصلی دارن. یکی reset هست که با استفاده از اون یک شمارشگر جدید رو میسازیم و یا قبلی رو Reset و به حالت اول برمیگردونیم و دیگری increment هست که شمارشگر ایجاد شده با استفاده از reset رو زیاد میکنیم و تغییر میدیم. خب برای اینکه بصورت کامل با شمارشگرها آشنا بشید مثالهایی رو براتون قرار میدیم. در ابتدا کد HTML زیر رو در نظر بگیرید:

  • Lorem ipsum dolor sit amet
  • consectetur adipisicing elit
  • Ut enim ad minim veniam
  • Excepteur sint occaecat cupidatat

همونطور که میبینید یک لیست نامرتب قرار داده شده و ۴ آیتم درون اون قرار گرفته.  قصد داریم که درون هر span با کلاس numbered-list__counter شماره مورد نظر با استفاده از شمارشگر رو قرار بدیم. اگر کد بالا رو درون مرورگر باز کنیم، بصورت زیر خواهد شد:css counter

همونطور که دیدید لیست نامرتب با Bullet‌های کنارشون قرار داده شده. همونطور که میبینید آیتم‌ها شماره ندارن و برای اینکار میتونین بجای ul از ol استفاده کنید. ما در اینجا میخوایم با استفاده از CSS Counter المنت ul رو تقریبا مثل ol شماره گذاری کنیم. برای اینکار در ابتدا با استفاده از list-style دایره‌های کنار آیتمها رو برمیداریم. کدهای اولیه CSS زیر رو قرار میدیم:

ul {
	list-style: none;
}
ul li {
	margin: 10px;
}
ul li span.numbered-list__counter {
	display: inline-block;
	text-align: center;
	color: #fff;
	width: 20px;
	height: 20px;
	background-color: blue;
	border-radius: 50%;
}

میبینید که استایلهای اولیه رو قرار دادیم. خروجی در مرورگر بصورت زیر میشه:css counter 2

همونطور که دیدید قبل از هر آیتم با استفاده از کلاس کاذب Before یک دایره آبی قرار داده شده که قصد داریم شماره‌های با استفاده از CSS Counter رو درون اون قرار بدیم. خب در ابتدا یک شمارشگر رو برای ul قرار میدیم. اسم اون رو هر چیزی میتونیم قرار بدیم. ما در اینجا اسم شمارشگر رو increase قرار میدیم. بصورت زیر:

.numbered-list {
    counter-reset: increase;
}

خب حالا میخوایم به ازای هر آیتم درون ul یک شماره به شمارشگر اضافه بشه. برای اینکار باید از ویژگی counter-increment استفاده کنیم. بصورت زیر:

.numbered-list__counter {
    counter-increment: increase;
}

تا اینجا محاسبات در پشت صحنه انجام شده و هنوز چیزی در خروجی نمایش داده نمیشه. شمارشگرها مقدارشون رو بصورت content تولید میکنن و شما میتونین درون کلاسهای کاذب before و after و درون ویژگی content، مقدار شمارشگر رو قرار بدین. برای اینکار بصورت زیر عمل میکنیم:

.numbered-list__counter:before {
    content: counter(increase);
}

میبینید که درون کلاس کاذب before از ویژگی counter استفاده کردیم و نام شمارشگر ساخته شده خودمون رو قرار دادیم. با اینکار خروجی در مرورگر بصورت زیر خواهد شد:css counter 3

همونطور که دیدید شماره‌های آیتمها رو درون دایره‌های آبی رنگ قرار دادیم و با اینکار ظاهری شبیه به ol رو برای ul با استفاده از CSS Counter شبیه سازی کردیم. در جلسه بعد موارد حرفه ای‌تر رو بیان میکنیم.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0