دیجی اسکریپت

آموزش رایگان css Archives | دیجی اسکریپت

خاصیت position و transition در css و آموزش استفاده از آن

معرفی خاصیت های پرکاربرد CSS

یک سلام پر انرژی به همراهان دوست داشتنی میهن وردپرس. به جلسه چهارم معرفی خاصیت ها کاربری CSS خوش آمدید. اگر قسمت های قبلی را پشت سر نگذاشته اید حتما همین الان ، قبل از خواندن این قسمت ، به سراغ قسما های قبلی بروید و انها را خوب یاد بگیرید. در این قسمت میخواهیم به مبحث فوق مهم position بپردازیم! نگاهی هم به transition ها خواهیم انداخت. خب شروع کنیم؟ پس بزن بریم!

خاصیت position :

خاصیت position یکی از خاصیت های مهم و کاربردی در CSS است و در طراحی وب بسیار کاربرد دارد. به کمک این خاصیت می توانیم موقعیت یک المان را مشخص کنیم.

position چهار مقدار می گیرد :

  1.  static
  2.  relative
  3.  absolute
  4.  fixed

static :

مقدار پیشفرض است و اگر این مقدار را به position بدهیم ، هیچ اتفاقی نمی افتد و المان سرجای خودش قرار میگیرد. ضمن اینکه چهار مقدار top – right – bottom – left هم برای static کار نمی کنند.

relative :

در این حالت المان باز هم در جای معمول خودش قرار می گیرد و تفاوتش این است که می توانیم موقعیتش را نسبت به مکان خودش تغییر بدهیم. یعنی می توانیم از چهار مقدار top- right – bottom – left استفاده کنیم و موقعیتش را تغییر بدهیم.

absolute :

چند حالت دارد!

در حالت کلی فقط با مرورگر کار میکند.

حالت اول : اگر المان والدش مرورگر باشد ، با توجه به صفحه مرورگر موقعیتش تنظیم میشود.

حالت دوم : اگر المان والدش المان دیگری به غیر از مرورگر باشد و همچنین المان والدش دارای position : relative باشد ، آنگاه نسبت به المان والدش جا به جا می شود.

چهار مقدار top – right – bottom – left هم در همه ی حالت ها برای absolute کار میکنند.

fixed :

position : fixed در هر حالتی با مرورگر کار میکند. حتی اگر المان والدش relative باشد و همچنین با مرورگر اسکرول میشود.

چهار مقدار top – right – bottom – left هم برای fixed کار میکنند.

مثال : حتما تا به حال بنر های کوچکی که به گوشه های مرورگر چسبیده اند و با اسکرول مرورگر جا به جا میشوند را دیده اید.

خاصیت transition :

transition حالتی است که باعث میشود یک عنصر از یک استایل به استایل دیگر تغییر کند. البته این تغییر به تدریج انجام میشود نه به صورت آنی و لحظه ای!

transition

property :

ویژگی هایی که قرار است transition روی آن ها اعمال شود. مثلا width ، background ، color و… اکثر مواقع این مورد را روی all می گذاریم.

duration :

مدت زمان اجرای transition برای مثال تغییر رنگ از سبز به زرد در ۵ ثانیه.

نکته : واحد های زمانی ثانیه و میلی ثانیه s-ms

نکته : مقدار پیشفرض ۰ است که در این صورت فوری انجام میشود.

timing-function :

سرعت و جلوه ی transition را مشخص میکند.

  1.  ease : شروع آرام بعد سریع و در انتها آرام.(حالت پیشفرض)
  2.  linear : سرعت یکنواخت در شروع و پایان.
  3.  ease-in : با سرعت کم شروع و با سرعت زیاد به اتمام میرسد.
  4.  ease-out : با سرعت زیاد شروع و با سرعت کم به اتمام میرسد.
  5.  ease-in-out : با سرعت کم شروع ، بین انیمیشن کمی سرعت افزایش و با سرعت زیاد به اتمام میرسد.

delay :

با delay می توان یک مکث قبل از انجام transition ایجاد کرد. مثلا ۳ ثانیه می گذرد و بعد اجرا میشود.

نکته : واحد های زمانی ثانیه و میلی ثانیه s-ms

نکته : مقدار پیشفرض ۰ است یعنی بدون مکث و به صورت فوریشروع میشود.

یک مثال از نمونه کامل شده transition :

sample transition

تمرین : خب حالا نوبت شماست که بگویید هر کدام از مقادیری که در عکس می بینید برای چیست؟ اگر نتوانستید بگویید یعنی نیاز دارید یکبار دیگر این مقاله آموزشی را بخوانید.

این جلسه هم به پایان رسید! خدانگهدارتان…

 



لینک منبع مطلب

جلسه نهم: معرفی خاصیت های پرکاربرد CSS

معرفی خاصیت های پرکاربرد css

سلام دوستان! به قسمت دوم معرفی خاصیت های کاربردی CSS خوش آمدید. در جلسه قبلی با CSS reset و همچنین خاصیت های color ، background ، margin و padding آشنا شدید.

در این جلسه به ادامه ی خاصیت های پرکاربرد CSS می پردازیم. پس بزن بریم!

خاصیت width :

با استفاده از این خاصیت می توانیم برای المان مورد نظرمان عرض یا همان پهنا تعریف کنیم. مقدار عرض را می توانیم هم به صورت % درصد بدهیم و هم px پیکسل.

خاصیت height :

با استفاده از این خاصیت می توانیم برای المان مورد نظرمان طول یا همان ارتفاع تعریف کنیم. مقدار طول را می توانیم هم به صورت % درصد بدهیم و هم px پیکسل.

خاصیت width در css

فرق بین واحد پیکسل px با واحد درصد % :

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

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

نکته : بیشتر در طراحی رسپانسیو یا همان واکنش گرا از واحد درصد استفاده میشود.

خاصیت display :

یادتان هست که در قسمت معرفی تگ ها ، می گفتیم : فلان تگ از نوع block است و فلان تک از نوع inline؟ حالا رسیدیم به توضیح مفهومش. با خاصیت display می توانیم حالت نمایش پیشفرض المان ها را به آن چیزی که خودمان دوست داریم تغییر بدهیم. display چند مقدار می گیرد که به صورت کامل برایتان توضیح می دهم :

  1.  inline
  2.  block
  3.  inline-block
  4.  none

1- inline :

المان های inline فقط به اندازه ی خودشان عرض و ارتفاع می گیرند. inline ها گسترش پیدا نمی کنند مگر آن ها را تغییر بدهیم و از نوع block کنیم.

نکته : اگر چند تگ inline داشته باشیم ، به صورت کنار هم نمایش داده میشوند.

۲- block :

المان های بلاک کل عرض مرورگر را اشغال می کنند(بهتر است بگوییم کل عرض المان والدشان که بعضی اوقات این المان والد مرورگر است و بعضی اوقات یک تگ div).

نکته : اگر چند تگ block داشته باشیم ، به صورت زیر هم نمایش داده میشوند.

۳- inline-block :

inline-block ترکیبی از ۲ حالت بالا است. به این صورت که : با این مقدار میشود المانی ساخت که فقط به اندازه ی محتوای خود فضا اشغال کند و همچنین عرض و ارتفاع هم بگیرد.

نکته : هیچ تگی به خودی خود inline-block نیست. یا inline است یا block. پس بهتر است اینگونه بگوییم : اگر چند المان با خاصیت inline-block وجود داشته باشند ، در کنار هم نمایش داده میشوند.

۴- none :

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

یک مثال برای درک بهتر inline و block :

یک نیمکت را در نظر بگیرید که یک فرد قلدر تنها بر روی آن نشسته است و دستان خود را باز کرده است. این فرد نفرت انگیز! اجازه نشستن به هیچ کس دیگر را بر روی نیمکت نمیدهد. این فرد دقیقا حکم حالت block را دارد.

برعکس فردی خوش اخلاق را در نظر بگیرید که خیلی شیک و مودب در گوشه ای از نیکمت نشسته است! و اجازه نشستن به سایر افراد را هم میدهد و اینگونه همگی خوش و خرم در کنار همدیگر قرار می گیرند! این فرد دقیقا حکم حالت inline را دارد.

خب فکر میکنم تا همینجا برای این جلسه مان کافی باشد. خوب تمرین کنید. مخلص…



لینک منبع مطلب

معرفی خاصیت های پرکاربرد CSS

معرفی خاصیت های پرکاربرد CSS

جلسه هشتم: معرفی خاصیت های پرکاربرد CSS

یک سلام پر انرژی به شما همراهان دوست داشتنی میهن وردپرس. طبق قرار همیشگی مان ، فنجان قهوه و موزیک پست راکتان که آماده است؟ خب اگر یادتان باشد در جلسات قبلی تگ های پرکاربرد html را با همدیگر یاد گرفتیم. تعدادشان هم زیاد نبود. از این جلسه به بعد می خواهیم خاصیت های شیرین و دوست داشتنی CSS را با همدیگر یاد بگیریم که تعدادشان کمی بیشتر است. آماده اید؟ پس بزن بریم!

راستی! قبل ازینه بخواهیم خاصیت های css را با هم یاد بگیریم ، موردی وجود دارد تحت عنوان CSS reset که بهتر است همین ابتدا با هم بزنیم توی گوشش!

CSS reset چیست؟

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

از این سایت می توانید فایل CSS reset را دانلود کنید و به ابتدای فایل CSS ی که ایجاد کرده اید اضافه کنید.

نکته : توصیه میشود css ریست ها را در ابتدای کدهای css و قبل از تمامی کد ها قرار بدهید.

خاصیت color :

با استفاده از این خاصیت می توانیم رنگ متن را تغییر بدهیم. مثلا رنگ متنمان را آبی یا قرمز یا سبز یا هر رنگی که دوست داریم انتخاب کنیم :

خاصیت background :

با استفاده ا این خاصیت می توانیم پس زمینه برای المان مورد نظرمان ایجاد کنیم. به تصویر زیر دقت کنید :

اگر بک گراند یک رنگ باشد :

کد بک گراند در css

اگر بک گراند یک تصویر باشد :

نکته : خاصیت بک گراند یک زیر مجموعه ویژگی هایی هم دارد. مثلا background-position ، background-attachment ، background-repeat و… که آن ها را به صورت کامل در دوره ۰ تا ۱۰۰ طراحی سایت آموزش داده ایم.

خاصیت margin :

با استفاده از margin میتوانیم برای المان مورد نظرمان فاصه ایجاد کنیم. فاصله ای از نوع خارجی! این طوری یاد بگیرید : margin که g دارد میشود فاصله خارجی!

خاصیت margin

نکته : برای راحت به خاطر سپردن جهت ها ، بهتر است بدانید margin در جهت ساعتگرد کار میکند. یعنی : مقدار اول بالا ، مقدار دوم راست ، مقدار سوم پایین و مقدار چهارم راست.

چند نکته کاربردی :

اگر به margin فقط یک مقدار بدهیم : فاصله به تمام جهات اعمال میشود.

اگر به margin دو عدد بدهیم : اولین مقدار بالا و پایین ، دومین مقدار چپ و راست.

اگر به margin سه مقدار بدهیم : اولین مقدار بالا ، دومین مقدار راست و چپ ، سومین مقدار پایین.

اگر به margin چهار مقدار بدهیم : مانند تصویر بالا میشود!

نکته مهم : خاصیت margin مقدار منفی و auto هم می گیرد.

خاصیت padding :

با استفاده از padding میتوانیم برای المان مورد نظرمان فاصه ایجاد کنیم. فاصله ای از نوع داخلی! به عبارتی با padding می توانیم المان مورد نظرمان را گسترش بدهیم. این طوری یاد بگیرید : padding که d دارد میشود فاصله داخلی!

تمام نکته های بالا برای padding هم صدق میکند جز این مورد : padding مقدار منفی و auto نمی گیرد چون کارش گسترش دادن است. پس منفی و auto نمی شود!

خاصیت padding

نکته : برای راحت به خاطر سپردن جهت ها ، بهتر است بدانید padding در جهت ساعتگرد کار میکند. یعنی : مقدار اول بالا ، مقدار دوم راست ، مقدار سوم پایین و مقدار چهارم راست.

چند نکته کاربردی :

اگر به padding فقط یک مقدار بدهیم : فاصله به تمام جهات اعمال میشود.

اگر به padding دو عدد بدهیم : اولین مقدار بالا و پایین ، دومین مقدار چپ و راست.

اگر به padding سه مقدار بدهیم : اولین مقدار بالا ، دومین مقدار راست و چپ ، سومین مقدار پایین.

اگر به padding چهار مقدار بدهیم : مانند تصویر بالا میشود!

 

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



لینک منبع مطلب