امروز میخوام با شما یه منوی کشویی به اشتراک بذارم. هدفمون اینه که تو سایتمون این منو جای کمتری رو اِشغال کنه،یک منوی بسیار زیبا با استفاده از قابلیت انیمیشن 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 -->

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

ادامه

۲ خرداد ۱۳۹۲

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

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

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

ادامه

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

اینجا یک وبلاگ شخصیه، درسته من طراحی سایت انجام میدم و خیلی بهش علاقه دارم، ولی خوب همش که نمیشه مطالب تخصصی باشه،

امروز از یکی از دوستان یک ایمیلی دریافت کردم، به نظر خودم قشنگ بود، دوست داشتم تو وبلاگ خودمم انتشار بدم، تا بقیه دوستان هم اگه دوست داشتن بخونن :

……………………………

افلاطون گفته روح دایره است.
و من دایره های روحم را کشف کردم!
پنح دایره دور روحم کشیدم، و خودم را در مرکز این دایره ها قرار دادم.
در دایره اول نام افرادی را نوشتم که حال و هوای خوبی به من می دهند
و در دایره پنجم که دورترین دایره به مرکز بود
نام کسانی را که از دنیای من فاصله دارند و بیشترین کشمکش را با آنها دارم
همه ما دلمان می خواهد که احساسی خوب در مورد خودمان داشته باشیم
و گاهی اوقات نداریم!
گاهی حال و هوای ما در مورد خودمان بستگی به تاثیری
دارد که دیگران روی ما می گذارند
به آنهایی که در دایره آخر هستند و سعی می کنند
که اعتماد به نفس ما را از بین ببرند
نمی توانی کسی را مجبور کنی که دوستت داشته باشد
و گاهی حضور در کنار افراد نامناسب باعث می شود
حتی در مقایسه با تنهایی ات، بیشتر احساس تنهایی کنی…
در چنین وضعیتی تلاش برای ایجاد تغییر و تحول
ممکن است باعث شود راهت را گم کنی
یا شاید باعث شود وجود خودت که تو را “تو” می کند را ازدست بدهی
گاه سالها طول می کشد تا یاد بگیری چگونه از خودت مراقبت کنی
به همین دلیل بسیار مهم است
که افرادی را در اطرافت داشته باشی که دوستت بدارند
حتی گاهی بیشتر از آنچه که
خودت می توانی خودت را دوست داشته باشی
در مواجه با افراد از خودت بپرس
این فرد چه حسی در من ایجاد می کند…
در کنار او می توانم خودم باشم؟
با او می توانم رو راست باشم؟
می توانم به او هرچه می خواهم بگویم؟
در کنار او احساس راحتی می کنم؟
وقتی او وارد می شود چه حسی به من دست می دهد؟
و وقتی می رود چه حالی می شوم؟
وقتی با او هستم احساسات واقعی ام را پنهان می کنم یا با او روراستم؟
آیا او باعث می شود احساس حقارت کنم یا به خودم ببالم؟
فلسفه وجود این ۵ دایره، شناخت است، نه پیش داوری
پس با خودت روراست باش
با افرادی که در نظر تو بد خلق اند، مدارا کن
و خودت را مقید نکن که چون به صرف اینکه با کسی در سر کار و یا اوقاتی ممتد
هر روز زمانی را می گذرانی
باید او را در دایره اول و نزدیک به خودت جای دهی
در دایره اول افرادی را بگذار که از صمیم جان به آنها اعتماد داری
حتی اگر هر روز آنها را نمی بینی
ولی وجود آنها باعث حس خوب و ارزشمندی در تو می شود
از خودت بپرس
در مورد افکار و خواسته هایم به چه کسی می توانم اعتماد کنم؟
آنها همان کسانی هستند که در دایره اول جای دارند
با این افراد و در کنار آنها، قدرتمندی…
ارزشهای مشترک با آنها داری
و با حضور آنها در زندگیت، دنیا را زیباتر می بینی
دوستان و همراهانی خارق العاده!
دایره دوم جای کسانی است که به رشد معنوی تو کمک می کنند
مربیان… آموزگاران
و شاید هم افرادی که تنها برای وقت گذرانی خوبند
بیرون رفتن و خندیدن…
چیزی به تو اضافه نمی کنند
ولی در عین حال هم باعث نمی شوند که حس بدی نسبت به خودت داشته باشی
دایره سوم همکاران و اقوامند
و شاید هم آدمهای خنثی، کسانی که نقش بسیار کوچکی در چند ساعت از زندگی تو ایفا
می کنند و تاثیر آنها نیز تنها همان چند ساعتی است که با آنها هستی
هیچ زمانی در غیر از ساعت ملاقاتشان به آنها فکر نمی کنی
و به راحتی می شود با فرد دیگری جایگزین شوند
افراد این دایره در محدوده کار و وظایفشان با تو هستند و لاغیر
دایره چهارم سر آغاز عزم راسخ توست!
آنها کسانی هستند که در کار تو اخلال ایجاد می کنند
افراد این دایره لزوما” با خود واقعی تو مرتبط نیستند
حتی ممکن است رییس اداره ای باشد که تنها دورادور با کار آنها در ارتباطی
افراد این دایره در زندگی اجتماعی و حرفه ات مهم هستند…
در کنار آنها نمی توانی راحت باشی
و وقتی آنها را می بینی شاید حتی آشفته و پریشان شوی
دایره آخر جای دورترین افراد است
جای آدمهایی که به تو لطمه زده اند، تحقیرت کرده اند،
کسانی که همیشه به تو انرژی منفی می دهند
و احساسات زجرآوری را با آنها تجربه می کنی
خوب اکنون که جای هر کس را تعیین کردی
اجازه نده کسانی که در دایره آخر جای دارند
مستقیما” روح و روان تو را هدف قرار دهند
نگذار کسی اولویت زندگی تو باشد، وقتی تو فقط یک انتخاب در زندگی او هستی…
یک رابطه بهترین حالتش وقتی است که دو طرف در تعادل باشند
شخصیت خودت را برای کسی تشریح نکن
چون کسی که تو را دوست داشته باشد به آن توضیحات نیازی ندارد
و کسی که از تو بدش بیاید، باور نمی کند!
وقتی دائم بگویی گرفتارم، هیچ وقت آزاد نمی شوی
وقتی دائم بگویی وقت ندارم، هیچوقت زمان پیدا نمی کنی
وقتی دائم بگویی فردا انجامش می دهم، آن فردا هیچوقت نمی آید!
وقتی صبح بیدار می شویم دو انتخاب داریم:
برگردیم بخوابیم و رویا ببینیم،
یا بیدار شویم و رویاهایمان را دنبال کنیم.
انتخاب با توست…
ما کسانی که به فکرمان هستند را نگران می کنیم و حتی به گریه می اندازیم
و گریه می کنیم برای کسانی که حتی لحظه ای به فکر ما نیستند!
این یکی از حقایق عجیب زندگی است،
و اگر این را بفهمی،

هیچوقت برای تغییر دیر نیست!

۱۲ دی ۱۳۹۱

این مطلبو تو یکی از سایتای دوستان خوندم گفتم به شما هم پیشنهاد بدم که بخونید، جالبه…

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

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

زمان تخمینی من برای مطالعه منابع گفته شده چیزی بین ۱۵ تا ۲۴ ماه هست. زمانی در حد گرفتن مدرک کاردانی! هزینه ریالی هم که باید برای تهیه این منابع بپردازید با هزینه های بی فایده رفتن به خیلی از دانشگاه های کشور مقایسه کنید.

برای مشاهده کامل مطلب لطفاً به خود سایت مرجع مراجعه کنید…

لینک سایت مرجع

۱۵ آذر ۱۳۹۱

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

امروز میخواهم چگونگی ساخت افکت های سه بعدی هیجان انگیز را با استفاده از css3 و jQuery نشان بدهم. این ایده الهام گرفت شده از افکت حرکتی است که شما می توانید در صفحه Google SketchUp Showcase پیدا کنید. ما یک ساختار با jquery می سازیم که به ما اجازه میدهد ، وقتی به روی عکس برویم ، خم یا تا شود. برای این افکت ما از تبدیل css سه بعدی استفاده میکنیم.
پس این موضوع را ذکر کنم که این افکت فقط در مرورگرهای جدید کاربرد دارد و در اینترنت اکسپلورر ( حتی نسخه ۹ ) اجرا نمی شود.
آموزش در ادامه مطلب..
ادامه

۱ تیر ۱۳۹۱
بالا