نحوه‌ی ایجاد انیمیشن و انتقال در css

در دو مقاله‌ی قبل با بخشی از ویژگی های تعریف شده در css آشنا شدید. این قسمت با ویژگی های پیشرفته تر بیشتری همچون نحوه‌ی ایجاد انیمیشن و انتقال در css آشنا می شوید. در این مقاله علاوه بر مباحث پیشرفته تر با سایر ویژگی های باقی مانده از css نیز آشنا می شوید. در ادامه در مقاله ایجاد انیمیشن در css با ما همراه باشید.

 

نحوه‌ی ایجاد انیمیشن و انتقال در css

 

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

 

ویدیو پییشنهادی : آموزش طراحی وب سایت (Front-End)
آموزش طراحی وب سایت (Front-End)

 

  • Right: المانی که این مقدار را دریافت کند در سمت راست المان دیگر قرار می گیرد.
  • Left: المانی که این مقدار را دریافت کند در سمت چپ المان دیگر قرار می گیرد.
  • None: این حالت که حالت پیش فرض می باشد، المان ها را به ترتیب پشت هم قرار می دهد.

چند مثال از استفاده از این ویژگی را با هم میبینیم.

مثال اول ایجاد انیمیشن در css

نمایش:

مثال دوم ایجاد انیمیشن در css

نمایش:

مثال سوم ایجاد انیمیشن در css

نمایش:

مثال چهارم ایجاد انیمیشن در css

نمایش:

تصویر پنجم:

در این مثال شما با نحوه‌ی کنار هم انداختن منوهای نوبار آشنا می شوید.

نمایش:

تصویر ششم:

نمایش:

ویژگی دیگری flex-box

ویژگی دیگری به نام flex-box نیز وجود دارد که شما با استفاده از آن نیز می‌توانید عملی مشابه را انجام دهید. این ویژگی را مقاله‌ای جداگانه صحبت خواهم کرد.

 

 

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

اولین روش استفاده از margin می باشد. با قرار دادن حالت auto برای مقدار margin، المان در وسط المان قرار می گیرد. این وسط قرار گرفتن در راستای محور افقی می باشد و شامل محور عمودی نمی باشد.

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

حالت متن

در این حالت متن و یا المان تنها در محور افقی در وسط قرار می گیرد و برای قرار دادن المان در وسط در محور عمودی نیاز است تا از ویژگی دیگری تحت عنوان vertical-align می‌باشد.

استفاده از flex-box

روش آخر که میتوان گفت بهترین روش ممکن می باشد، استفاده از flex-box ها می باشد. این مورد را در مقاله ای جداگانه به طور کامل بررسی خواهم کرد. ویژگی بعدی مورد بررسی شفافیت یا opacity می باشد. با این ویژگی شما می توانید، تا درصد شفافیت یک المان را مشخص کنید.

ویژگی‌های ایجاد انیمیشن و انتقال در css

تقریبا تمامی ویژگی های css را مطرح کردم. در اینجا قصد دارم تا مباحث باقی مانده که مباحث پیشرفته می باشند را مطرح کنم. اولین مبحث از بخش پیشرفته آموزش css، انیمیشن در css می باشد.

 

 

انیمیشن همانطور که اسمش مشخص است، برای طراحی المان هایی می باشد که در داخل صفحه دارای حرکت می باشند و یا اصطلاحا داینامیک می باشند. شما انواع حالت های مختلف را می توانید با استفاده از انیمیشن طراحی کنید. از جمله بارش برف از صفحه!

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

مثال ایجاد انیمیشن و انتقال در css

در این مثال رنگ المان از قرمز به سمت زرد تغییر می کند. برای استفاده از یک انیمیشن ابتدا نیاز است تا آن را تعریف کنید. برای تعریف یک انیمیشن از @keyframes استفاده باید کرد. شما می‌توانید تنها یک نقطه ی شروع from و نقطه ی پایان to را برای انیمیشن تعریف کنید و یا از ابتدا تا انتهای انیمیشن را به درصد های مختلف تقسیم کنید و در هر مرحله یک تعریف متفاوت برای انیمیشن داشته باشید.

پس از تعریف انیمیشن یک اسم برای آن نیاز است تا انتخاب کنید که در مثال بالا این اسم example می باشد. پس از آنکه اسم نیز برای آن انتخاب کردید، تنها کافیست با استفاده از ویژگی animation-name، اسم انیمیشن مورد نظرتان را استفاده کنید.

در این مثال از ویژگی دیگری از انیمیشن نیز به نام animation-duration استفاده شده است که این ویژگی در واقع مدت زمان انجام انیمیشن (رسیدن از نقطه ی اول تعریف تا نقطه ی پایانی) را مشخص می کند. این زمان بر اساس ثانیه می باشد و نیاز است حتما s که به معنای ثانیه می باشد نیز بعد از مشخص کردن مقدار آن آورده شود.

” توجه کنید که نقطه ی شروع اولیه انیمیشن بهتر می باشد تا با ویژگی هایی که المان دارد مشابه باشد، به عنوان مثال در صورتی که در css المان مورد نظر، رنگ پشت زمینه قرمز می باشد، اگر انیمیشنی مورد استفاده قرار می دهید که رنگ پشت زمینه را عوض می کند، در نقطه ی شروع بهتر می باشد که مقدار آن با مقدار تعریف شده در css المان یکی باشد. “

 

تعریف انیمیشن

حال در مثالی دیگر قصد داریم تا ویژگی های بیشتری را به انیمیشن تعریفی خود اضافه کنیم. در این مثال انیمیشن مورد نظر به ۵ قسمت تقسیم شده است که هر قسمت رنگ پشت زمینه متفاوتی را برای المان ایجاد می کند. شما می توانید هر درصدی را استفاده کنید ولی توجه کنید که با توجه به زمان در صورتی که زمان کمی به آن اختصاص پیدا کند (بر اساس درصدی که مشخص می کنید) سرعت انجام آن نیز افزایش پیدا می کند.

در مثال به دلیل اینکه کل مدت زمان انجام انیمیشن ۴ ثانیه می باشد و ۲۵% به هر قسمت انیمیشن اختصاص پیدا کرده است، پس برای هر قسمت ۱ ثانیه اختصاص پیدا می کند. در واقع نکته ای که باید توجه کنید این می باشد که درست است که در تعریف ما ۵ قسمت انیمیشن داریم اما قسمت اول که از صفر درصد آغاز می شود در واقع صرفا تعریف اولیه برای انیمیشن مورد نظر می باشد.

در ثانیه ی اول رنگ پشت زمینه از قرمز به زرد در خواهد آمد. در ثانیه دوم، از زرد به آبی و در ثانیه سوم از آبی به صورتی و در ثانیه چهارم و آخر از صورتی به سبز تبدیل می شود. پس از پایان ۴ ثانیه، دوباره رنگ پشت زمینه به رنگ اولیه آن که قرمز است در خواهد آمد.

ویژگی animation

ویژگی بعد در animation، ایجاد تاخیر در شروع انیمیشن می باشد، این ویژگی animation-delay نام دارد. این ویژگی نیز همچون ویژگی مدت زمان انجام نمایش، بر حسب ثانیه مقدار دریافت می کند. با استفاده از این ویژگی می توانید برای شروع انیمیشن یک تاخیر ایجاد کنید. این ویژگی همچنین می تواند مقدار منفی نیز بگیرد که این بدین معنا می باشد که انیمیشن از مقدار animation-delay، شروع می شود. در این مثال، علاوه بر تغییر رنگ پشت زمینه ی المان، مکان آن نیز تغییر می کند.

animation-iteration-count

ویژگی دیگری که به آن میپردازیم، تعداد دفعات تکرار انیمیشن می باشد. شما می توانید یک انیمیشن را تا بی نهایت و یا تا تعداد مشخص تکرار کنید. این ویژگی animation-iteration-count نام دارد.

برای اینکه انیمیشن تا بینهایت تکرار شود، تنها کافیست مقدار این ویژگی را infinite قرار دهید.

ویژگی animation-direction ایجاد انیمیشن در css

ویژگی بعد جهت انجام انیمیشن را مشخص می کند. بدین صورت که انیمیشن مورد نظر از ابتدا به انتها پیش برود و یا از انتها به ابتدا. برای اینکار نیاز است تا از ویژگی animation-direction استفاده کنید. این ویژگی چهار مقدار دارد:

 

 

  • Normal: که حالت پیش فرض می باشد و انیمیشن از ابتدا تا انتها اجرا می شود.
  • Reverse: این ویژگی موجب می شود تا انیمیشن از انتها به ابتدا اجرا شود.
  • Alternate: در این حالت انیمیشن یک دور از ابتدا به انتها می رود و سپس از انتها به ابتدا باز میگردد. در واقع یک حرکت برگشتی انجام می دهد.
  • Alternate-reverse: در این حالت حرکت برگشتی که انیمیشن اجرا می کند، در مرحله اول از انتها به ابتدا می رود و سپس از ابتدا به انتها می رود.

ویژگی animation-timing-function

ویژگی بعدی برای مشخص نمودن سرعت اجرای نمایش در مدت زمان اجرای آن می باشد. در حالت پیش فرض این اجرا به صورت خطی می باشد و با سرعت یکسان در کل مدت زمان انیمیشن اجرا صورت می گیرد. اما این امکان وجود دارد تا شما سرعت اولیه اجرای انیمیشن را بالا ببرید و انتهای آن را کاهش دهید. برای این کار از ویژگی animation-timing-function استفاده باید کرد. این ویژگی مقادیر زیر را دریافت می کند:

  • Linear: حالت خطی و پیش فرض می باشد که تمام مدت زمان اجرای انیمیشن با سرعت یکسان انجام می گیرد.
  • Ease: در ابتدا سرعت آن زیاد می باشد و به مرور سرعت آن کاهش می یابد.
  • Ease-in: به مرور سرعت آن افزایش پیدا می کند.
  • Ease-out: سرعت آن به مرور کاهش پیدا می کند.
  • Ease-in-out: سرعت آن تا وسط زمان اجرای نمایش افزایش پیدا می کند و سپس از وسط تا انتها سرعت آن کاهش پیدا می کند.

animation-fill-mode

ویژگی بعدی قابل استفاده در انیمیشن ها animation-fill-mode می باشد. این ویژگی در واقع برای این می باشد که المان مورد نظر ویژگی های تعریف شده برای ابتدا اجرای انیمیشن و یا انتهای انیمیشن را حفظ کند و آن ویژگی ها را دارا باشد. این ویژگی ۴ مقدار دریافت می کند:

  • None: در این حالت المان مورد نظر پس از پایان انیمیشن، به مقادیر اولیه تعریف شده برای آن باز می گردد.
  • Forwards: المان مقادیر آخرین قسمت از اجرای انیمیشن را پیدا می کند. (با توجه به جهت اجرای انیمیشن)
  • Backwards: المان مقادیر اولین قسمت از اجرای انیمیشن را پیدا می کند. (با توجه به جهت اجرای انیمیشن)
  • Both: هر دو قانون forwards و backwards را پیروی می کند و ترکیبی از هر دو مقدار صورت می گیرد.

نحوه ی خلاصه نویسی برای ایجاد انیمیشن در css

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

ویژگی transform

مورد بعدی موردی بررسی ویژگی transform می باشد. این ویژگی دارای ویژگی های دو بعدی و سه بعدی می باشد. این ویژگی به شما این امکان را می دهد تا بتوانید، یک المان را در جهت محور افقی و یا عمودی تغییر اندازه و یا مکان دهید و یا برای آن چرخش ایجاد کنید. برای درک بهتر این ویژگی یک مثال از ترکیب این ویژگی با انیمیشن نیز برای شما میزنم تا بهتر با نحوه ی استفاده از این ویژگی آشنا شوید.

 

 
اولین مقدار برای این ویژگی translate() می باشد، این ویژگی در واقع مکان المان را نسبت به نقطه ای خاص (گوشه ی سمت چپ بالای المان) جابه جا می کند.

ویژگی rotate() برای ایجاد انیمیشن در css

ویژگی بعدی rotate() می باشد. این ویژگی مقادیر مثبت و منفی در واحد درجه دریافت می کند و مقادیر مثبت المان را در جهت ساعت گرد و مقادیر منفی در جهت پادساعت گرد المان را می چرخاند.

برای این ویژگی شما می توانید تنها در جهت محور افقی و یا در جهت محور عمودی چرخش ایجاد کنید. برای اینکار تنها کافیست از rotateX() در جهت محور افقی و یا از rotateY() در جهت محور عمودی استفاده کنید.

در جهت محور افقی:

در جهت محور عمودی:

ویژگی scale()

ویژگی بعدی scale() می باشد. این ویژگی اندازه ی المان را در جهت افقی و عمودی (عرض و طول) آن را تغییر می دهد. در صورتی که مقداری بین ۰ تا ۱ دریافت کند، اندازه ی آن نسبت به اندازه ی اصلی کوچک تر و در صورتی که بیشتر از عدد ۱ را دریافت کند، اندازه ی آن بزرگ تر می شود. در صورتی که قصد دارید تا اندازه ی المان در جهت افقی و عمودی را به یک اندازه تغییر دهید، کافیست تنها یک مقدار به scale() دهید.

ویژگی scale()

دو ویژگی دیگر در راستای ویژگی scale() می باشد که به شما این امکان را می دهد تا شما به طور خاص در جهت محور افقی و یا صرفا در جهت محور عمودی اندازه ی المان را تغییر دهید. برای تغییر اندازه ی المان در جهت محور افقی از ویژگی scaleX() و برای تغییر در جهت محور عمودی از ویژگی scaleY() می توانید استفاده کنید.

در جهت محور افقی:

در جهت محور عمودی در 

ویژگی skew() برای ایجاد انیمیشن در css

ویژگی بعدی skew() می باشد. این ویژگی این امکان را به شما می دهد تا المان را به صورت اریب در آورید. برای درک این ویژگی نیاز است تا در فضای سه بعدی، محورهای x، y و z را در نظر بگیرید. با استفاده از این ویژگی می توانید نسبت به هر یک از محورها یک زاویه ایجاد کنید. این زاویه این حالت را به وجود می آورد که المان مورد نظر اریب شود. در صورتی که در هر دو محور یک میزان زاویه قصد داشته باشید بدهید، تنها کافیست یک عدد به این ویژگی بدهید.

مقادیر skewX() و skewY()

این ویژگی نیز همچون scale() می توانید صرفا در جهت محور x و یا صرفا در جهت y به آن مقدار دهید. برای اینکار از مقادیر skewX() و skewY() می توانید استفاده کنید.

در فضای سه بعدی یک ویژگی تنها اضافه می شود و آن چرخش در محور z می باشد. برای اینکار از مقدار rotateZ() نیاز است تا استفاده کنید.

ویژگی بعدی transition

ویژگی بعدی transition می باشد. این ویژگی تا حدودی شبیه انیمیشن می باشد و کاربرد اصلی آن در حالتی که شما بر روی یک المان موس را قرار می دهید، می‌باشد. استفاده از این ویژگی به صورت زیر می باشد. شما در ابتدا باید نام ویژگی ای که transition بر روی آن نیاز است تا اعمال شود را بیاورید و سپس مدت زمانی آن مقدار به مقدار جدید آن نیاز است تا برسد. در اینجا مقدار اولیه عرض (width) 100 پیکسل می باشد که در حالتی که بر روی المان موس را نگه دارید، در مدت زمان ۲ ثانیه به مقدار ۳۰۰ پیکسل می رسد.

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

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

transition-daley

شما می توانید برای این ویژگی نیز یک تاخیر قرار دهید تا پس از گذشت مدت زمان مشخص، این ویژگی اعمال گردد. برای اینکار از transition-daley نیاز است تا استفاده کنید. ویژگی دیگری که مورد استفاده می توانید قرار دهید، نوع سرعت تغییر المان می باشد که برای اینکار از transition-timing-function نیاز است تا استفاده کنید. مقادیر این ویژگی همچون مقادیر تعریف شده برای این ویژگی در انیمیشن ها می باشد.

” توجه کنید که همانطور که المان با قرار گرفتن موس بر روی آن تغییر می کند، به همان شکل نیز به نرمی به حالت اولیه خود بر می گردد. “

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

ویژگی cover

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

multiple column

دسته ی بعدی multiple column می باشد. این ویژگی به شما این امکان را می دهد تا یک متن را در ستون های مختلف نمایش دهید. در حالت پیش فرض یک متن به صورت پیوسته در فضای المان نمایش داده می شود ولی در این حالت، متن به ستون های مختلف با فاصله در المان نمایش داده می شود. اولین ویژگی از این دسته column-count می باشد. با استفاده از این ویژگی شما می توانید تعداد ستون هایی که با آن متن مورد نظر را قصد نمایش دارید را مشخص کنید. در مثال زیر متن مورد نظر در ۳ ستون نمایش داده می شود.

نحوه ی نمایش آن

یک ویژگی دیگر نیز وجود دارد که با استفاده از آن می توانید حداقل عرض هر ستون را مشخص کنید. این ویژگی column-width می باشد.

شما می توانید این دو ویژگی را به حالت خلاصه نیز بنویسید. برای اینکار حداقل عرض را در ابتدا و سپس تعداد حداکثر ستون های آن را مشخص می کنید.

column-gap

ویژگی دیگری از این دسته column-gap می باشد. این ویژگی فاصله ی بین ستون های مختلف را مشخص می کند. در مثال زیر، فاصله ی بین ستون های مختلف ۴۰ پیکسل می باشد.

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

در حالت خلاصه شده ی آن می توانید از شیوه ی زیر استفاده کنید:

ویژگی column-span

ویژگی بعدی برای حالتی می باشد که شما برای متن مورد نظر یک تیتر نیز دارید و قصد دارید تا تیتر مورد نظر در یک ستون صرفا قرار نگیرد و تمامی ستون ها را شامل شود. برای اینکار از ویژگی column-span استفاده نیاز است کنید و مقدار آن all قرار می گیرد.

column-fill

ویژگی اخر در این دسته نیز column-fill می باشد. این ویژگی به شما این امکان را می دهد که متون در ستون های مختلف به صورت متوازن قرار بگیرند (حالت پیش فرض) و یا نا متوازن قرار بگیرند. برای حالت متوازن که پیش فرض می باشد balance را به عنوان مقدار به این ویژگی نیاز است تا بدهید و برای نامتوازن شدن آن، مقدار auto.

ویژگی resize

ویژگی دیگری که به آن می پردازم، قابلیت تغییر اندازه ی یک المان توسط کاربر در صفحه می باشد. این ویژگی resize نام دارد. این ویژگی سه مقدار دریافت می کند:

  • Horizontal: تغییر عرض المان
  • Vertical: تغییر ارتفاع المان
  • Both: تغییر ارتفاع و عرض المان
  • None: عدم امکان تغییر (در زمانی در input از نوع textarea استفاده کنید، در این نوع به طور پیش فرض قابلیت تغییر سایز وجود دارد، با تغییر مقدار این ویژگی به none می توانید موجب عدم امکان تغییر آن توسط کاربر شوید.)

تغییر عرض المان برای ایجاد انیمیشن در css

تغییر ارتفاع المان:

تغییر عرض و ارتفاع المان به صورت همزمان:

آموزش css برای ایجاد انیمیشن در css

آموزش css را مبحث تعریف استایل های مختلف در سایز های مختلف به پایان می رسانم. این ویژگی از جمله مهمترین ویژگی های مورد استفاده در طراحی صفحات ریسپانسیو (نمایش در ابعاد و دستگاه های مختلف) می باشد.

برای اینکار از media query ها استفاده می شود. برای تعریف یک media query تنها کافیست به صورت زیر عمل کنید. در مثال زیر در حالتی که حداقل عرض صفحه ۴۸۰ پیکسل باشد، رنگ پس زمینه صفحه سبز کم رنگ خواهد شد. شما می توانید حداقل، حداکثر و یا بازه ی خاصی و یا عدد خاصی را برای media query خود تعریف کنید. با تغییر اندازه ی صفحه می توانید تغییرات را مشاهده کنید.

در مثال دیگری شما می‌توانید طریقه ی تعریف عرض های مختلف برای المان های مختلف را مشاهده کنید. در مثال زیر تا عرض با مقدار حداکثر ۷۶۸ پیکسل تعریف زیر مورد استفاده قرار می گیرد.

media query

شما همچنین می توانید چندین سایز مختلف و media query های مختلف برای یک صفحه تعریف کنید. در مثال زیر دو media query برای دو عرض مختلف تعریف شده است. در یک حالت برای صفحه با حداقل عرض ۶۰۰ پیکسل و برای حالت دوم برای صفحه با حداقل عرض ۷۶۸ پیکسل استایل تعریف شده است. بدین معنا که بین عرض ۶۰۰ تا ۷۶۸ پیکسل، اولین حالت مورد استفاده قرار می گیرد و برای عرض با مقدار بیشتر از ۷۶۸ پیکسل، استایل حالت دوم مورد استفاده قرار می گیرد.

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

برای عرض با حداقل مقدار ۶۰۰ پیکسل تا مقدار ۷۶۸ پیکسل برای تبلت ها در حالت عمودی و موبایل های با ابعاد بزرگ تر، برای دستگاه با حداقل عرض ۷۶۸ پیکسل تا مقدار ۹۹۲ پیکسل برای دستگاه های متوسط از جمله تبلت ها در حالت افقی و برای دستگاه های با حداقل عرض ۹۹۲ پیکسل تا مقدار ۱۲۰۰ پیکسل برای دستگاه های بزرگتر از جمله لپ تاپ و دستکتاپ و دستگاه با عرض حداقل ۱۲۰۰ پیکسل به بالا برای دستگاه های با ابعاد بزرگتر مورد استفاده قرار می گیرد.

حالت landscape

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

media query ها

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

آموزش css در اینجا به پایان می رسد. تلاش شد تا در سلسله آموزش های css، تا حد خوبی ابعاد مختلف css و ویژگی های آن تعریف شود. Css کاربردهای بسیاری دارد و با استفاده از ویژگی های آن کارهای بسیار زیادی را می توانید بر روی المان های html اعمال کنید.