سواد دیجیتال به معنای توانایی به کار گرفتن فناوری دیجیتال در زمینه‌های گوناگون است. در دنیایی که فناوری به سرعت در حال رشد است، داشتن سواد دیجیتال به اندازه خواندن و نوشتن اهمیت دارد. این توانایی به شما کمک می‌کند تا در زندگی شخصی، اجتماعی و کاری خود موفق باشید. (بیشتر…)

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 آن تغییراتی بدهید تا همانند ویدیوی زیر شود.