ساخت نوار هشدار باCSS3

ساخت نوار هشدار باCSS3

در این آموزش ما به شما نحوه ایجاد یک نوار هشدار با استفاده از CSS رو میدیم.

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

ما کار را با ایجاد سند HTML شروع می کنیم.

به ترتیب کد های زیر را وارد می کنیم

<div class="notification-bar">
	<input id="hide" type="radio" name="bar" value="hide">
	<input id="show" type="radio" name="bar" value="show" checked="checked">

	<label for="hide">hide</label>
	<label for="show">show</label>

	<div class="notification-text">خوش آمدید!این یک نوار هشدار است.برای بستن روی علام  کلیلک کنید</div>
</div>

همانطور که در بالا شما مشاهده می کنید ما از دوتا Radio برای کنترل کردن نوار هشدار استفاده کردیم و همانطور که مشاهده میکنید حالت show به طور پیش فرض انتخاب شده است.

اکنون تعدادی کد css  رو مینویسیم تا شکل نوار هشدار ما کمی بهتر شود.ما در این کد ها رنگ پس زمینه،رنگ متن،ایکون نمایش دادن و یا مخفی کردن نوار هشدار را تعیین می کنیم.

CSS

.notification-bar {
	position: absolute;
	width: 100%;
}
.notification-text {
	background-color: #2980B9;
	padding: 15px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	position: absolute;
	width: 100%;
}
.notification-bar input {
	display: none;
}
.notification-bar label {
	cursor: pointer;
	color: #fff;
	position: absolute;
	z-index: 5;
	display: inline-block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.notification-bar label[for=hide] {
	right: 15px;
	top: 11px;
	width: 24px;
	height: 24px;
	background: url('../img/close.png') no-repeat center center;
}
.notification-bar label[for=show] {
	width: 45px;
	height: 50px;
	border-radius: 0px 0px 3px 3px;
	right: 10px;
	background: url('../img/show.png') no-repeat center center #2980B9;
}

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

first-preview

این یک مثال ساده است شما میتونید هر نوع تغییری که خواستید در style ها بدید.

ساختن توابع

ما با استفاده دکمه های Radio میتونیم کد های css رو متناسب با نوع دکمه تعیین کنیم(به عنوان مثال نمایش داده شود یا بسته شود)

.notification-bar input[value=show]:checked ~ label[for=show] {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;

	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}

با توجه به کد بالا،هنگامی که Radio input با آی دی show انتخاب شود متن پیام در ۱۰۰% عرض صفحه نمایش نشان داده میشود.در ضمن هنگام نمایش متن باید دکمه close نمایش داده شود و برعکس یعنی هنگام بسته بودن دکمه show نمایش داده شود.

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

first-preview(1)

.notification-bar input[value=show]:checked ~ label[for=show],
.notification-bar input[value=hide]:checked ~ label[for=hide],
.notification-bar input[value=hide]:checked ~ .notification-text {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;

	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.notification-bar input[value=hide]:checked ~ label[for=show] {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;

	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
}

برای نمایش نوار هشدار نیز کد زیر را مینویسیم

.notification-bar input[value=show]:checked ~ label[for=hide],
.notification-bar input[value=show]:checked ~ .notification-text {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;

	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
}

و در آخر ما چند انیمیشن   برای لود شدن اولین بار نوار هشدار مینویسیم.

@keyframes initiate {
 	۰% {
		transform:translateY(-100%);
 	}
 	۵۰% {
 		transform:translateY(-50%);
 	}
 	۱۰۰% {
 		transform:translateY(0%);
 	} 
}

و انیمیشن ها را به متن پیام اضافه می کنیم.

.notification-text {
	background-color: #2980B9;
	padding: 15px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	position: absolute;
	width: 100%;

	-webkit-animation: initiate 350ms ease;
	-moz-animation: initiate 350ms ease;
	-o-animation: initiate 350ms ease;
	animation: initiate 350ms ease;
}

 

 

+1
0


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

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

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

دیدگاه خود را بنویسید

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

*


− 7 = صفر

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>