1. سلکتور – Selectors
2. اندازه‌ها – Units
3. ریسپانسیو – Responsive
4. پوزیشن – Position
5. ترنزیشن – Transition
6. ترنسفورم – Transform
7. ترنسفورم سه بعدی – 3D-Transform
8. انیمیشن – Animation
9. فلکس – Flex

مقدمه

• Two-Dimensional Layout
• Short Markup
• Presentation Independent of The Markup
• More Flexible
• Responsive Design Is Easier
• Skip Frameworks

Terminology

Grid Lines

Grid Rows – Horizontal Tracks

Grid Columns – Vertical Tracks

Grid Cells

Grid Area

Grid Gaps – Gutters

Grid Container

Grid Items

واژه لی‌اوت (Layout) در CSS به معنای شیوه چیدمان المنت‌ها در صفحه وب است. از قبل با لی‌اوت‌های (block, inline& inline-block) آشنا شدید. فلکس (flex) یک نوع لی‌اوت یک‌بعدی است که از انواع پیشین انعطاف پذیرتر می‌باشد. وقتی فلکس‌ را یک بعدی توصیف می‌کنیم، یعنی آیتم‌ها می‌توانند در یک ردیف به صورت افقی کنار هم نمایش داده شوند یا در یک ستون به صورت عمودی زیر هم چیده شوند. در برابر گرید (grid) که یک لی‌اوت دو بعدی است.

محورهای فلکس

به المنتی که فلکس است Container و به المنت‌های درون آن Item می‌گویند. در لی‌اوت فلکس دو محور وجود دارد. (محور اصلی و محور متقاطع)

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

پراپرتی‌های کانتینر

display

پیش از هر کار دیگری باید نوع نمایش کانتینر را فلکس انتخاب کنید.

flex-direction

به صورت پیش فرض جهت محور اصلی افقی و در جهت نوشتار است. ولی با این دستور می‌توانید آن را تغییر دهید.

justify-content

فاصله بین آیتم‌ها را در جهت محور اصلی تنظیم می کند.

align-items

تراز کردن آیتم‌ها در محور کراس

پراپرتی‌های آیتم

align-self

تراز کردن یک آیتم در محور کراس

flex-grow

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

flex-shrink

آیتم مورد نظر به چه نسبت می‌تواند در جهت محور اصلی فشرده شود.

flex-basis

اندازه آیتم موردنظر در جهت محور اصلی را تعیین می‌کند.

order

ترتیب آیتم‌ها را تعیین می‌کند.

پراپرتی فلکس چند خطی

flex-wrap

شیوه چند خطی را تعیین می‌کند. فلکس به صورت پیش فرض یک خطی است.

align-content

خطوط را در جهت محور کراس تراز می‌کند.

مثال

به کمک فلکس به راحتی می‌توان چند ستون با اندازه برابر درست کرد.

.container {
	display: flex;
}

مثال

با کمک فلکس به راحتی می‌توان یک المنت را در مرکز قرار داد.

.container {
	display: flex;
	align-items: center;
	justify-content: center;
}

مثال

با کمک فلکس می‌توان کاری کرد footer همیشه پایین صفحه قرار بگیرد.

.container {
	display: flex;
	flex-direction: column;
}

.item-1 {
	flex-grow: 1;
}

مثال

به لی‌اوت زیر Media Objects می‌گویند.

.container {
	display: flex;
	align-items: center;
}

مثال

لی‌اوت ماسونری Masonry Layout

.container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

مثال

منو با فاصله‌های برابر

.container {
	display: flex;
	justify-content: space-between;
}

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• در فایل CSS آن تغییراتی بدهید تا همانند تصویر زیر شود.

انیمیشن در CSS امکان تغییر پراپرتی‌های یک المنت را در زمان معین و با سرعت دلخواه می‌دهد.

مزایای انیمیشن CSS نسبت به جاواسکریپت

• نیازی به یادگیری و به کاربردن جاواسکریپت نیست.
• با لگ کمتری نمایش داده می‌شود. (حتی در کامپیوترهای ضعیف)

راه اندازی یک انیمیشن در CSS دو بخش دارد.

• تعریف
• کاربرد

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

در هنگام تعریف انیمیشن ابتدا یک نام به آن داده می‌شود. سپس گام‌های انیمیشن تعریف می‌شود. در مثال زیر یک انیمیشن به نام to-circle تعریف شده و گام‌های انیمیشن نیز مشخص شده است.

@keyframes to-circle {
	0% {
		border-radius:0%;
	}
	20% {
		border-radius:10%;
	}
	40% {
		border-radius:20%;
	}
	60% {
		border-radius:30%;
	}
	80% {
		border-radius:40%;
	}
	100% {
		border-radius:50%;
	}
}

• نام انیمیشن
• گام‌های انیمیشن
• پراپرتی‌های هر گام

در تعیین گام‌ها می توانید بجای 0% از from و بجای 100% از to استفاده کنید.

پراپرتی‌های انیمیشن

برای تعیین شیوه‌ی کار انیمیشن چند پراپرتی وجود دارد.

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

animation-name

ابتدا باید انیمیشنی را  که می‌خواهید اجرا شود، مشخص کنید.

@keyframes zoom-in {
	from {
	  opacity: 0;
	  transform: scale(0.2, 0.2);
	}
	to {
	  opacity: 1;
	}
}
img {
	animation-name: zoom-in;
}
img:active {
	animation-name: none;
}

animation-duration

مدت زمان انیمیشن را مشخص می کند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

animation-timing-function

تابعی را معرفی می‌کند که به کمک آن مقادیر میانی پراپرتی محاسبه می‌شود.

animation-delay

قبل از انیمیشن چقدر باید منتظر ماند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

animation-iteration-count

انیمیشن چند بار تکرار شود. مقدار پیش فرض یکبار است برای اینکه پیوسته تکرار شود، مقدار infinity را به کار برید.

animation-direction

جهت انیمیشن را مشخص می‌کند از آغاز به پایان یا عکس آن.

animation-fill-mode

این پراپرتی مشخص می‌کند قبل و بعد از انیمیشن المنت به چه صورتی نمایش داده شود.

animation-play-state

این پراپرتی مشخص می‌کند انیمیشن اجرا شود یا موقتا متوقف شود.

دستور خلاصه

همه دستورهای بالا را می‌توانید در یک دستور زیر خلاصه کنید.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

مثال

Flash

@keyframes flash {
	0%,50%,100%  {
		opacity: 1;
	}
	25%,75%  {
		opacity: 0.5;
	}
}

.item {
	animation-name: flash;
	animation-duration: 1s;
}

.item:active {
	animation-name: none;
}

مثال

Square to Circle

@keyframes square-to-circle {
	0%  {
		border-radius:0 0 0 0;
		background: #4285F4;
		transform: rotate(0deg);
	}
	25%  {
		border-radius:50% 0 0 0;
		background: #FBBC05;
		transform: rotate(45deg);
	}
	50%  {
		border-radius:50% 50% 0 0;
		background: #34A853;
		transform: rotate(90deg);
	}
	75%  { 
		border-radius:50% 50% 50% 0;
		background: #EA4335;
		transform: rotate(135deg);
	}
	100% {  
		border-radius:50% 50% 50% 50%;
		background: #000000;
		transform: rotate(180deg);
	}
}
.item {
	animation: square-to-circle 2s .5s infinite cubic-bezier(1,.15,.3,1.35) alternate;
}

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• در فایل CSS آن تغییراتی بدهید تا همانند ویدیوی زیر شود.

فضای سه‌بعدی

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

X: انگشت شست
Y: انگشت نشانه
Z: انگشت میانی

اگر از دست راست استفاده کنید جهت محورهای مختصات راست‌گرد و اگر از دست چپ استفاده کنید چپ‌گرد خواهد بود.

راست‌گرد: دست راست
چپ‌گرد: دست چپ

بیشتر جاها سیستم راست‌گرد به کار می‌رود. ولی در کامپیوتر سیستم مختصات چپ گرد است.

---

فانکشن‌های ترنسفورم

با پراپرتی transform در فضای سه بعدی نیز می‌توانید سایز، جا و یا شکل المنت را تغییر دهید.

فرم کلی آن به شکل زیر است:

transform: function( );

در پراپرتی ترنسفورم فانکشن‌های زیر را می‌توان به کار برد.

• rotate: چرخش
• translate: جابجایی
• scale: تغییر اندازه
• skew: کجی
• matrix: کلی

rotate

برای چرخاندن المنت حول محور x از فانکشن rotateX استفاده کنید.
زاویه را با یکی از واحدهای زیر بنویسید.

deg: درجه
rad: رادیان
grad: گرادیان
turn: تعداد دور

برای چرخاندن المنت حول محور y از فانکشن rotateY استفاده کنید.

برای چرخاندن المنت حول محور z از فانکشن rotateZ استفاده کنید. این معادل دستور rotate است.

برای چرخاندن المنت حول محور دلخواه از فانکشن rotate3d به شکل زیر استفاده کنید.

transform: rotate3d(x, y, z, angle);

محور مورد نظر، خطی است که از مبدأ مختصات و نقطه‌ای با مختصات (x، y، z) می‌گذرد. و angle زاویه چرخش است.

translate

برای جابجایی المنت بر روی محور x از فانکشن tranlateX استفاده کنید. در این جا از هر واحدی می‌توانید استفاده کنید.

برای جابجایی المنت بر روی محور y از فانکشن tranlateY استفاده کنید.

برای جابجایی المنت بر روی محور z از فانکشن tranlateZ استفاده کنید.

برای جابجایی المنت به نقطه دلخواه از فانکشن translate3d به شکل زیر استفاده کنید.

transform: translate3d(x, y, z);

scale

برای تغییر اندازه المنت بر روی محور x از فانکشن scaleX استفاده کنید. (این مقدار نسبی است و واحد نمی‌خواهد.)

برای تغییر اندازه المنت بر روی محور y از فانکشن scaleY استفاده کنید.

برای تغییر اندازه المنت بر روی محور z از فانکشن scaleZ استفاده کنید. اگر المنت در صفحه باشد، این فانکشن هیچ تأثیری ندارد.

ولی اگر المنت با صفحه مانیتور زاویه داشته باشد تغییر می‌کند.

برای تغییر اندازه المنت بر روی هر سه محور از فانکشن scale3d به شکل زیر استفاده کنید.

transform: scale3d(x,y,z);

skew

پراپرتی skew تنها بر روی محورهای x و y کار می‌کند.

matrix

برای این که همه موارد بالا را در یک فانکشن بگنجانید می‌توانید عبارت matrix3d را به کار برید.

---

پشت المنت

این پراپرتی تعیین می‌کند که هنگام چرخش المنت، محتوای آن از پشت دیده شود یا نه.

backface-visibility: visible(Default)|hidden;

---

مبدأ مختصات

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

transform-origin: x y z;

x: left | center | right | length (default: 50%)
y: top | center | bottom | length (default: 50%)
z: length (default: 0)

---

پرسپکتیو

پرسپکتیو perspective یا ژرفانمایی به معنای نمایش یک شیء سه بعدی بر روی سطح دو بعدی است، همان گونه که با چشم دیده می‌شود. جای چشم بیننده (دیدگاه) در شکل تصویری که دیده می‌شود بسیار موثر است.

Perspective: A point of view.

با دو پراپرتی perspective و perspective-origin دیدگاه (جای چشم بیننده) را می‌توان تعیین کرد. این پراپرتی‌ها باید به پرنت داده شوند.

perspective

با کمک پراپرتی perspective می‌توانید فاصله دیدگاه را از صفحه z=0 تعیین کنید. (مقدار z نقطه دیدگاه)

perspective: z;

perspective-origin

با کمک پراپرتی perspective-origin می‌توانید x و y دیدگاه را تعیین کنید.

perspective-origin: x y;

x: left | center | right | length (default: 50%)
y: top | center | bottom | length (default: 50%)

---

تخت یا سه بعدی

این پراپرتی تعیین می‌کند که المنت تخت باشد یا سه بعدی. این پراپرتی را باید به پرنت بدهید.

transform-style: flat(Default)|preserve-3d;

---

مثال

چرخش تصویر حول محور y:

.parent {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
}	
.card {
	position: absolute;
	transition: all 1s;
	backface-visibility: hidden;
}
.card .back {
	transform: rotateY(180deg);
}
.parent:hover .card {
	transform: rotateY(180deg);
}

مثال

چرخش تصویر حول محور y:

.parent {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
}	
.item {
	position: absolute;
	transition: all 1s;
	backface-visibility: hidden;
	transform-origin: center right;
}
item.back {
	transform: rotateY(180deg);
}
parent:hover item {
	transform: translateX(-100%) rotateY(180deg);
}

مثال

Parallax

.parent {
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	perspective: 1px;
}	
item.back {
	position: relative;
	z-index: -1;
	transform-origin: top;
	transform: translateZ(-1px) translateY(-50vh) scale(2);
}