ایجاد گالری تصاویر با استفاده از CSS3

ایجاد گالری تصاویر با استفاده از CSS3

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

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

در ابتدا ما برای هر عکس یک تگ divایجاد می کنیم تا تصاویر مربوطه و همچنین متن مورد نظر را در داخل آن نگه داریم.بسته به نیاز و تعداد عکس هایی که می خواهید در صفحه نمایش بدهید میتوانید از این تگ اضافه نمایید.

<div class="box box-1">
		<h3>قلبی به اندازه قند</h3>
		<div class="image">
			<img src="http://www.inwebson.com/demo/css3-transitions-image-gallery/gallery/tea-love.jpg" alt="قلبی به اندازه قند" />
		</div>
		<div class="description">
			این یک متن تست است و میتوانید آنرا تغییر دهید.این یک متن تست است و میتوانید آنرا تغییر دهید.<br/>
		</div>
	</div>
	<div class="box box-2">
		<h3>دیسک عاشق</h3>
		<div class="image">
			<img src="http://www.inwebson.com/demo/css3-transitions-image-gallery/gallery/love-disc.jpg" alt="دیسک عاشق" />
		</div>
		<div class="description">
			این یک متن تست است و میتوانید آنرا تغییر دهید.این یک متن تست است و میتوانید آنرا تغییر دهید.این یک متن تست است و میتوانید آنرا تغییر دهید.این یک متن تست است و میتوانید آنرا تغییر دهید.<br/>
		</div>
	</div>
.
.
.
.
.

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

با قرار گیری موس بر روی هر عکس اندازه آن بزرگتر شده و برداشتن موس از روی آن باعث بازگشت تصویر به اندازه اصلی خود می شود.پس ما تمام اینکارها را با استفاده از scale در CSS انجام می دهیم.

.box{
	text-align:center;
	background-color:#f4f4f4;
	border:1px solid #ccc;
	float:right;
	margin:5px 1%;
	padding:10px 2% 15px;
	position:relative;
	z-index:5;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
	box-shadow:0 0 3px #ccc;
	-moz-box-shadow:0 0 3px #ccc;
	-webkit-box-shadow:0 0 3px #ccc;
	
	transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	
	transition: background-color 1s, box-shadow 1s, transform 0.5s;
	-moz-transition: background-color 1s, -moz-box-shadow 1s, -moz-transform 0.5s;
	-webkit-transition: background-color 1s, -webkit-box-shadow 1s, -webkit-transform 0.5s;
	-o-transition: background-color 1s, -o-box-shadow 1s, -o-transform 0.5s;
}
.box:hover{
	background-color:#fff;
	z-index:10;
	
	box-shadow:0 0 15px #333;
	-moz-box-shadow:0 0 15px #333;
	-webkit-box-shadow:0 0 15px #333;
	
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.box-1 { max-width:24%; }
.box-2 { max-width:44%; }
.box-3 { max-width:35%; }

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

.box h3{
	font-size:27px;
	color:#777;
	margin:5px 10px;
	padding:5px 10px;
	font-family:'Arial Narrow', Arial;
	letter-spacing:1px;
	text-shadow:0 1px 1px #ccc;
	border-bottom:0 solid #fff;
	
	transition: color 1s, text-shadow 1s, border-bottom 1s;
	-moz-transition: color 1s, text-shadow 1s, border-bottom 1s;
	-webkit-transition: color 1s, text-shadow 1s, border-bottom 1s;
	-o-transition: color 1s, text-shadow 1s, border-bottom 1s;
}
.box:hover h3{
	color:#333;
	border-bottom:1px solid #aaa;
	text-shadow:1px 1px 1px #fff, 2px 2px 1px #888;
}

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

.box .image{
	margin:10px;
	opacity:0.5;
	
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1.5s;
	-o-transition: opacity 1s;
}
.box:hover .image{
	opacity:1;
}

ما هچنین متن های داخل هر تصویر را بصورت بلور (تار)درآوردیم که با انتخاب هر تصویر متن های مربوطه بصورت شفاف نمایش داده خواهند شد.

.box .description, .box .description a{
	color:rgb(153,153,153);
	color:rgba(153,153,153,0);
	text-shadow:0 0 5px #aaa;
	text-align:right;
	font-size:14px;

	transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
	-moz-transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
	-webkit-transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
	-o-transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
}
.box:hover .description, .box:hover .description a{
	text-shadow:0 0 0 #fff;
	color:rgb(100,100,100);
}
.box:hover .description a{
	outline:1px dotted #777;
}

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

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

 

پایان

 

0
-1


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

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

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

۲ دیدگاه ها

  1. سلام _ لطفا پیش نمایش برای نمونه قالب هایی که درست میکنین بزارین ….

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

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

*


4 + = پنج

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>