امروز میخوام نمونه هایی از انیمیشن ها به روی آیکون ها که با رفتن نشانگر موس به روی آنها انجام میشود را آموزش بدم، این طرح رو میخواهیم با استفاده از انیمیشن CSS انجام بدهیم، فونت به کار رفته در این اسکریپت از فونت آیکون ( Eco Ico توسط Matthew Skiles ساخته شده توسط IcoMoon app ) است.

مشاهده دموی اسکریپتدریافت اسکریپت

نمونه ای از قسمت HTML

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
    <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
    <a href="#" class="hi-icon hi-icon-screen">Desktop</a>
    <a href="#" class="hi-icon hi-icon-earth">Partners</a>
    <a href="#" class="hi-icon hi-icon-support">Support</a>
    <a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

یک نمونه از انمیشن چرخشی CSS

.hi-icon-effect-6 .hi-icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
    transition: background 0.2s, color 0.2s;   
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
    background: rgba(255,255,255,1);
    color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
    animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

توجه کنید کادر خط تیره در عنصر (border-radius: 50%) در فایرفاکس ۲۱ کار نمیکند (افکت شماره ۴).

امیدوارم که خوشتان آمده باشه و بتونید ازش استفاده لازم رو ببرید!

۲۹ خرداد ۱۳۹۲

فیسبوک که هستید؟ چه سوالیه 😀 الان دیگه هر کسی یه اکانت تو فیسبوک داره دیگه.
اگه دقت کرده باشید تو صفحه پروفایل خودتون، مطالب با توجه به تاریخ ارسال از بالا به پایین منتشر میشن، به این قسمت میگن تایم لاین!

دوست دارید یه نمونه تایم لاین تو وبلاگ یا سایت خودتون داشته باشید ؟

امروز یک نمونه از این تایم لاین را برای شما آموزش میدم.
این یک نمونه از تایم لاین واکنش گرا با رنگ متناوب برای هر جدول هست، آیکونهای به کار رفته با استفاده از فونت fontawesome می باشد.
خوب بریم سراغ فایل ها تا ببینیم که داخل قسمت html و css چه خبره 🙂

مشاهده دموی اسکریپتدریافت اسکریپت

قسمت HTML

				<ul class="cbp_tmtimeline">
					<li>
						<time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time>
						<div class="cbp_tmicon cbp_tmicon-phone"></div>
						<div class="cbp_tmlabel">
							<h2>عنوان پست</h2>
							<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>4/11/13</span> <span>12:04</span></time>
						<div class="cbp_tmicon cbp_tmicon-screen"></div>
						<div class="cbp_tmlabel">
							<h2>عنوان پست</h2>
							<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time>
						<div class="cbp_tmicon cbp_tmicon-mail"></div>
						<div class="cbp_tmlabel">
							<h2>عنوان پست</h2>
							<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time>
						<div class="cbp_tmicon cbp_tmicon-phone"></div>
						<div class="cbp_tmlabel">
							<h2>عنوان پست</h2>
							<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time>
						<div class="cbp_tmicon cbp_tmicon-earth"></div>
						<div class="cbp_tmlabel">
							<h2>عنوان پست</h2>
							<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-17 12:11"><span>4/17/13</span> <span>12:11</span></time>
						<div class="cbp_tmicon cbp_tmicon-screen"></div>
						<div class="cbp_tmlabel">
							<h2>عنوان پست</h2>
							<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-18 09:56"><span>4/18/13</span> <span>09:56</span></time>
						<div class="cbp_tmicon cbp_tmicon-phone"></div>
						<div class="cbp_tmlabel">
							<h2>عنوان پست</h2>
							<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>
						</div>
					</li>
				</ul>

قسمت css را در ادامه مطلب ببینید..

ادامه

۱۸ اردیبهشت ۱۳۹۲
بالا