ایجاد افکت های مختلفی از نمایش متن روی تصاویر با CSS

ایجاد افکت های مختلفی از نمایش متن روی تصاویر با CSS

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

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

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

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

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

<div class="grid">
 <figure class="effect-lily">
 <img src="img/12.jpg" alt="img12"/>
 <figcaption>
 <div>
 <h2>لیلی <span>زیبا</span></h2>
 <p>لیلی عاشق بازی با مداد و مدادرنگی</p>
 </div>
 <a href="#">بیشتر</a>
 </figcaption> 
 </figure>
 <figure class="effect-lily">
 <img src="img/1.jpg" alt="img1"/>
 <figcaption>
 <div>
 <h2>لیلی <span>زیبا</span></h2>
 <p>لیلی عاشق بازی با مداد و مدادرنگی</p>
 </div>
 <a href="#">بیشتر</a>
 </figcaption> 
 </figure>
 </div>

 Untitled-1

افکتی که در بالا مشاهده می کنید با نام کوهستان(zoe)نام گذاری کردیم.شما در زیر تنظیمات مربوط به نحوه نمایش آن را مشاهده می کنید.در این افکت نام مورد نظر در داخل یک کادر سفید رنگ به همراه سه عدد آیکون در پایین عکس نمایش داده خواهند شد.کد مربوط به آن را در زیر مشاهده می کنید.

figure.effect-zoe figcaption {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 3.75em;
	background: #fff;
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
	float: left;
}

figure.effect-zoe p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
	color: #252d31;
}

figure.effect-zoe p.description {
	position: absolute;
	bottom: 8em;
	padding: 2em;
	color: #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
	display: inline-block;
	padding: 8px 10px;
	font-family: 'feathericons';
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
	content: '\e000';
}

.icon-paper-clip::before {
	content: '\e001';
}

.icon-heart::before {
	content: '\e024';
}

figure.effect-zoe h2 {
	display: inline-block;
}

figure.effect-zoe:hover p.description {
	opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

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

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

+2
-3


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

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

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

۳ دیدگاه ها

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

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

  2. باسلام و تشکر از شما
    با تمام تفاصیر
    من برای استفاده از این افکت در سایتم http://www.20teb.ir چه کاری باید انجام دهم . فوق العاده سری یاد میگیرم
    ممنون
    لطفا

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

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

*


دو + = 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>