تخفیف ویژه

استایل زیبا برای Select ( نمونه 3)

دسته بندی: HTML و CSS
زمان مطالعه: 3 دقیقه
۱۵ آذر ۱۳۹۴

در این مطلب نمونه 3 برای Select در اختیارتون قرار میگیره که با استفاده از CSS حالت زیبایی رو برای اونا بوجود میاره که سایت و ظاهر رو کاربرپسندتر میکنه. شما میتونین از این استایلها در جاهایی که Select دارید استفاده کنید و به زیبایی سایتتون بیافزایید.Select-Inspiration

کد HTML :

<select class="cs-select cs-skin-elastic">
	<option value="" disabled selected>Select a Country</option>
	<option value="france" data-class="flag-france">France</option>
	<option value="brazil" data-class="flag-brazil">Brazil</option>
	<option value="argentina" data-class="flag-argentina">Argentina</option>
	<option value="south-africa" data-class="flag-safrica">South Africa</option>
</select>

کد CSS :

body {
	background-color: #00b6ad;
	color: #fff;
	text-align: center;
	padding-top: 50px;
}
/* Default custom select styles */
div.cs-select {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-align: left;
	background: #fff;
	z-index: 100;
	width: 100%;
	max-width: 500px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.cs-select:focus {
	outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
	display: none;
}

.cs-select span {
	display: block;
	position: relative;
	cursor: pointer;
	padding: 1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Placeholder and selected option */
.cs-select > span {
	padding-right: 3em;
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
	speak: none;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
	content: '\25BE';
	right: 1em;
}

.cs-select .cs-selected span::after {
	content: '\2713';
	margin-left: 1em;
}

.cs-select.cs-active > span::after {
	-webkit-transform: translateY(-50%) rotate(180deg);
	transform: translateY(-50%) rotate(180deg);
}

/* Options */
.cs-select .cs-options {
	position: absolute;
	overflow: hidden;
	width: 100%;
	background: #fff;
	visibility: hidden;
}

.cs-select.cs-active .cs-options {
	visibility: visible;
}

.cs-select ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.cs-select ul span {
	padding: 1em;
}

.cs-select ul li.cs-focus span {
	background-color: #ddd;
}

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
	padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
	cursor: default;
}

/* cs-skin-border */
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-rdnm34');
	src:url('fonts/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
		url('fonts/icomoon.woff?-rdnm34') format('woff'),
		url('fonts/icomoon.ttf?-rdnm34') format('truetype'),
		url('fonts/icomoon.svg?-rdnm34#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

div.cs-skin-elastic {
	background: transparent;
	font-size: 1.5em;
	font-weight: 700;
	color: #5b8583;
}

@media screen and (max-width: 30em) {
	div.cs-skin-elastic { font-size: 1em; }
}

.cs-skin-elastic > span {
	background-color: #fff;
	z-index: 100;
}

.cs-skin-elastic > span::after {
	font-family: 'icomoon';
	content: '\e005';
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cs-skin-elastic .cs-options {
	overflow: visible;
	background: transparent;
	opacity: 1;
	visibility: visible;
	padding-bottom: 1.25em;
	pointer-events: none;
}

.cs-skin-elastic.cs-active .cs-options {
	pointer-events: auto;
}

.cs-skin-elastic .cs-options > ul::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-transform: scale3d(1,0,1);
	transform: scale3d(1,0,1);
	background: #fff;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.cs-skin-elastic.cs-active .cs-options > ul::before {
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition: none;
	transition: none;
	-webkit-animation: expand 0.6s ease-out;
  	animation: expand 0.6s ease-out;
}

.cs-skin-elastic .cs-options ul li {
	opacity: 0;
	-webkit-transform: translate3d(0,-25px,0);
	transform: translate3d(0,-25px,0);
	-webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
	transition: opacity 0.15s, transform 0.15s;
}

.cs-skin-elastic.cs-active .cs-options ul li {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity: 1;
	-webkit-transition: none;
	transition: none;
	-webkit-animation: bounce 0.6s ease-out;
  	animation: bounce 0.6s ease-out;
}

.cs-skin-elastic .cs-options span {
	background-repeat: no-repeat;
	background-position: 1.5em 50%;
	background-size: 2em auto;
	padding: 0.8em 1em 0.8em 4em;
}

.cs-skin-elastic .cs-options span:hover,
.cs-skin-elastic .cs-options li.cs-focus span,
.cs-skin-elastic .cs-options .cs-selected span {
	color: #1e4c4a;
}

.cs-skin-elastic .cs-options .cs-selected span::after {
	content: '';
}

.cs-skin-elastic .cs-options li.flag-france span {
	background-image: url(svg/france.svg);
}

.cs-skin-elastic .cs-options li.flag-brazil span {
	background-image: url(svg/brazil.svg);
}

.cs-skin-elastic .cs-options li.flag-safrica span {
	background-image: url(svg/south-africa.svg);
}

.cs-skin-elastic .cs-options li.flag-argentina span {
	background-image: url(svg/argentina.svg);
}

@-webkit-keyframes expand { 
	0% { -webkit-transform: scale3d(1,0,1); }
	25% { -webkit-transform: scale3d(1,1.2,1); }
	50% { -webkit-transform: scale3d(1,0.85,1); }
	75% { -webkit-transform: scale3d(1,1.05,1) }
	100% { -webkit-transform: scale3d(1,1,1); }
}

@keyframes expand { 
	0% { -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); }
	25% { -webkit-transform: scale3d(1,1.2,1); transform: scale3d(1,1.2,1); }
	50% { -webkit-transform: scale3d(1,0.85,1); transform: scale3d(1,0.85,1); }
	75% { -webkit-transform: scale3d(1,1.05,1); transform: scale3d(1,1.05,1); }
	100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}


@-webkit-keyframes bounce { 
	0% { -webkit-transform: translate3d(0,-25px,0); opacity:0; }
	25% { -webkit-transform: translate3d(0,10px,0); }
	50% { -webkit-transform: translate3d(0,-6px,0); }
	75% { -webkit-transform: translate3d(0,2px,0); }
	100% { -webkit-transform: translate3d(0,0,0); opacity: 1; }
}

@keyframes bounce { 
	0% { -webkit-transform: translate3d(0,-25px,0); transform: translate3d(0,-25px,0); opacity:0; }
	25% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
	50% { -webkit-transform: translate3d(0,-6px,0); transform: translate3d(0,-6px,0); }
	75% { -webkit-transform: translate3d(0,2px,0); transform: translate3d(0,2px,0); }
	100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; }
}

کد JS:

در این مطلب از classie.js و selectFx.js استفاده شده است.

(function() {
	[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {	
		new SelectFx(el);
	} );
})();

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

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

نظرات کاربران

حمید رضا مصطفی زاده

سلام
ممنون جناب اسفندیاری بابت زحمت هایی که میکشید.
تو انجمن یکی از دوستان مطلبی رو گذاشته بود در مورد Seo وارد سایتش که شدم header خیلی جذاب بود آدرس سایتش sorooshpardaz.com
لطفا اگر مشابه چنین هدری رو گذاشتید راهنمایی کنید.
راستی
تبریک بنده را جهت روز دانشجو پذیرا باشید.روزت مبارک مهندس

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

با سلام
این سایت از این ابزار استفاده کرده:
http://vincentgarreau.com/particles.js/
ممنون بابت تبریکتون ولی دیگه دانشجویی تموم شده:)
موفق باشید

حمید رضا مصطفی زاده

ممنون به سلامتی هرجا هستید موفق باشید.
آقای اسفندیاری اگر مطالبی هم در مورد codeigniter یه فایل pdf مثه همون good-ui که درست کردید انجام بدید که ممنون میشیم.
بابت تمام زحمت های شما سپاس

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

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

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :