۲ خرداد

امروز میخوام با شما یه منوی کشویی به اشتراک بذارم. هدفمون اینه که تو سایتمون این منو جای کمتری رو اِشغال کنه،یک منوی بسیار زیبا با استفاده از قابلیت انیمیشن CSS. از این منو خیلی راحت میتونید در طرحهای ریسپانسیو ( واکنشگرا) خود استفاده کنید.

ساختار منو شامل یک لیست نامرتب هست که به هر تعداد که دوست دارید میتونید زیر منو بسازید:

<div id="dl-menu" class="dl-menuwrapper">
    <button>مون</button>
    <ul class="dl-menu">
        <li>
            <a href="#">مردانه</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="#">بازگشت</a></li>
                <li><a href="#">زیر منو ۱</a></li>
                <li><a href="#">زیر منو ۲</a></li>
                <li><a href="#">زیر منو ۳</a></li>
                <li>
                    <a href="#">زیر منو ۴</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="#">بازگشت</a></li>
                        <li><a href="#">زیر منو ۱</a></li>
                        <li><a href="#">زیر منو ۲</a></li>
                        <li><a href="#">زیر منو ۳</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

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

ادامه

۲۱ اردیبهشت

طراح یا برنامه نویس وب سایت هستید؟ سال ها تگ های HTML را با هم ترکیب و ایده های خود را اجرا کرده اید؟ بدون شک یکی از آرزوهای شما در زمینه کدنویسی، حذف دستورات و تگ های تکراری و تولید خودکار آن ها با استانداردهای روز است.

ایمت (Emmet) که در گذشته آن را با نام زن کدینگ (Zen Coding) می شناختیم، یکی از بهترین پلاگین ها برای تولید سریع کدهای HTML است. در صورتیکه با ساختار دستورات HTML و CSS آشنا باشید، می توانید از ایمت به عنوان دستیار شخصی در تولید آن ها استفاده کنید.

نحوه استفاده

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

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

ادامه

۱۸ اردیبهشت

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

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

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

ادامه

۱۶ اسفند

منوی آیکونی بسیار ساده، زیبا و شناور، که اندازه آن با سایز صفحه تغییر می کند.

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

قسمت html :

<ul class="cbp-vimenu">
    <li><a href="#" class="icon-logo">Logo</a></li>
    <li><a href="#" class="icon-archive">Archive</a></li>
    <li><a href="#" class="icon-search">Search</a></li>
    <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>
    <li><a href="#" class="icon-location">Location</a></li>
    <li><a href="#" class="icon-images">Images</a></li>
    <li><a href="#" class="icon-download">Download</a></li>
</ul>

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

ادامه

۱۶ اسفند

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

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

قسمت html :

<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="#">Products</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner">
                    <div>
                        <h4>Learning & Games</h4>
                        <ul>
                            <li><a href="#">Catch the Bullet</a></li>
                            <li><a href="#">Snoopydoo</a></li>
                            <!-- ... -->
                        </ul>
                    </div>
                    <div>
                        <h4>Utilities</h4>
                        <ul>
                            <li><a href="#">Gadget Finder</a></li>
                            <li><a href="#">Green Tree Express</a></li>
                            <li><a href="#">Green Tree Pro</a></li>
                            <li><a href="#">Wobbler 3.0</a></li>
                            <li><a href="#">Coolkid</a></li>
                        </ul>
                    </div>
                    <div>
                        <!-- ... -->
                    </div>
                </div><!-- /cbp-hrsub-inner -->
            </div><!-- /cbp-hrsub -->
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>

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

ادامه

بالا