قابلیت فیلتر کردن(دسته بندی) با CSS3

قابلیت فیلتر کردن(دسته بندی) با CSS3

امروز در این آموزش قصد داریم تا به شما با استفاده از CSS نحوه فیلتر کردن یا همان دسته بندی را به شما آموزش بدهیم.در واقع شما با انتخاب دسته بندی مورد نظر تعیین می کنید که کدام نوع از داده ها نمایش داده شود.

برای مشاهده لینک وارد شود

ما در ابتدا ۴ نوع دسته بندی تعیین خواهیم کرد تا با کلیک بر روی هر کدام از آنها داده ها مربوط به آنها برای کاربران نمایش داده شود و سایر داده ها اندازه شان کوچکتر شده و کم رنگ بشوند.ما از تعدادی radio برای تعیین دسته بندی ها استفاده خواهیم کرد.ما در ابتدا از radio ای که برای نمایش تمام داده ها است اسفاده می کنیم که بصورت پیش فرض تمام آیتم ها برای کاربران نمایش داده بشود.ما برای هر radio یک عنوان را نیز قرار می دهیم که بسته با نام آنها ،دسته بندی آنجام خواهد شد.

<ul class="ff-items">
	<li class="ff-item-type-2">
	  <a href="http://dribbble.com/shots/366400-Chameleon">
	    <span>آفتاب پرست</span>
	    <img src="images/1.jpg" />
	  </a>
	</li>
	<li class="ff-item-type-1">
	   <a href="http://dribbble.com/shots/272575-Tutorials-wip-">
		<span>صفحه شخصی من</span>
		<img src="images/2.jpg" />
	   </a>
	</li>
	<li class="ff-item-type-1">
	   <a href="http://dribbble.com/shots/138484-Symplas-website">
		<span>Symplas وبسایت</span>
		<img src="images/4.jpg" />
	   </a>
	</li>
	<li class="ff-item-type-2">
	   <a href="http://dribbble.com/shots/372566-Flower">
		<span>گل</span>
		<img src="images/3.jpg" />
	   </a>
	</li>
	<li class="ff-item-type-3">
	    <a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-">
		<span>TRON: نسخه موبایلی</span>
		<img src="images/5.jpg" />
	     </a>
	</li>
	.	
	.
        .
        .
        .

</ul>

در ادامه ما استایل های کلی را بایتان توضیح می دهیم.

بخش اصلی نمایش آیتم ها دارای عرض خاصی است.

.ff-container{
	width: 564px;
	margin: 10px auto 30px auto;
	display: block;
}

ما به عناوین که روی radioها را پوشانده اند استایل های زیر را اعمال می کنیم.

.ff-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	width: 25%;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	float:right;
	box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);
}

ما برای نمایش بهتر دسته بندی ها دو لیبل ابتدایی و انتهایی را با استفاده از خاصیت radius کمی گرد می کنیم که برای این کار از تکه کد زیر استفاده می کنیم.

.ff-container label.ff-label-type-all{
	border-radius: 0px 3px 3px 0px;
}
.ff-container label.ff-label-type-3{
	border-radius: 3px 0px 0px 3px;
}

ما برای اینکه مشخص کنیم کدام سربرگ انتخاب شده است یک زنگ متمایز به سربرگ انتخاب شده اعمال می کنیم که کد آن را در زیر  مشاهده می کنید.

.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
	color: #424d71;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset;
}

خوب حالا استایل های مربوط به آیتم ها را می نویسیم.

.ff-items{
	position: relative;
	margin: 0px auto;
	padding-top: 20px;
}
.ff-items a{
	display: block;
	position: relative;
	padding: 4px;
	background: #F9F9F9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	margin: 10px;
	width: 160px;
	height: 120px;
}
.ff-items a span{
	display: block;
	background: rgba(113,123,161, 0.9);
	font-style: italic;
	color: #fff;
	font-weight: bold;
	padding: 20px;
	position: absolute;
	bottom: 4px;
	left: 4px;
	width: 120px;
	height: 0px;
	overflow: hidden;
	opacity: 0;
	text-align: center;
	text-shadow: 1px 1px 1px #303857;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.ff-items a:hover span{
	height: 80px;
	opacity: 1;
}
.ff-items li img{
	display: block;
}

در این آموزش ما با انتخاب کردن یم دسته بندی آیتم های مربوط به آن بزرگتر شده و سایر آیتم ها کوچکتر و کم رنگ تر می شوند .ما در ادامه استایل مربوط به این بخش را می نویسیم.

ما قابلیت جابجایی(transition ) را به آیتم ها اضافه می کنیم.

.ff-items li{
	margin: 0px;
	float: left;
	width: 188px;
	height: 148px;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

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

برای بزرگتر شدن آیتم ها مربوطه از کد زیر:

.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{	
	opacity: 1;
	transform: scale(1.1);
}

و برای کوچک شدن و کم رنگ شدن سایر آیتم ها از کد زیر:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){
	opacity: 0.1;
	transform: scale(0.5);
}

استفاده می کنیم.همچنین برای غیر فعال کردن نمایش نام آیتم های انتخاب نشده از تکه کد زیر استفاده خواهیم کرد.

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{
	display:none;
}

 

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

یک دیدگاه

  1. سلام و درود ممنونم از وب سایت خوبتون
    هر چی من بهش نیاز دارم در این وب سایت پیدا می کنم
    با تشکر فراوان

دیدگاه خود را برای کوتاه کننده لینک بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


× نُه = 9

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>