دیدید تو برخی سایتها قسمت های مختلف صفحه پس زمینه متفاوت داره؟ که وقتی صفحه رو اسکرول میکنید، کم کم پس زمینه اون قسمت میره بالا و پس زمینه قسمت بعد میاد، امروز میخوام اینو بهتون آموزش بدم، یک طرح اسکرول با عکس پس زمینه ثابت با استفاده از قالبلیت background-attachment: fixed و یک قسمت ناوبری  ( navigation ) . صفحه همواره به بخش انتخاب شده حرکت خواهد کرد.

قسمت HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
    <nav>
        <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
        <a href="#fbsection2">Section 2</a>
        <a href="#fbsection3">Section 3</a>
        <a href="#fbsection4">Section 4</a>
        <a href="#fbsection5">Section 5</a>
    </nav>
    <section id="fbsection1"></section>
    <section id="fbsection2"></section>
    <section id="fbsection3"></section>
    <section id="fbsection4"></section>
    <section id="fbsection5"></section>
</div>

به ادامه مطلب بروید..

ادامه

۳ خرداد ۱۳۹۲

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

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

امروز یک نمونه از این تایم لاین را برای شما آموزش میدم.
این یک نمونه از تایم لاین واکنش گرا با رنگ متناوب برای هر جدول هست، آیکونهای به کار رفته با استفاده از فونت 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 را در ادامه مطلب ببینید..

ادامه

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

در آموزش امروز می خواهیم تا افکت Transition را روی کادرهای دایره ای تست و آزمایش کنیم و به شما آموزش بدیم. ما از Border Radius برای ایجاد یک Shape دایره ای استفاده و روی آن کار می کنیم.
حالا چرا دایره ؟ چون عملا بسیاری از طراحان مستطیل را برای کار خودشان انتخاب می کنند . اما شما با یک افکت دایره ای خاص جلوه ای دو چندان به وب سایت خود می دهید. به همین دلیل یک شکل خاص محسوب می شود و ما می رویم تا برای hover روی دایره افکت گذاری کنیم و البته با CSS.
در این آموش ما تمام کدها را بررسی نمی کنیم و برای اجرای این کار مبنا را بر این قرار دادیم که شما به Html و CSS3 تا حدودی تسلط دارید. خب ، پس بیائید شروع کنیم.
به ادامه مطلب بروید..
ادامه

۳۱ مرداد ۱۳۹۱
بالا