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

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

transform: function( );

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

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

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

rotate

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

زاویه را با یکی از واحدهای زیر بنویسید.

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

translate

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

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

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

transform: translate(x,y);

scale

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

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

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

transform: scale(x,y);

skew

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

برای تغییر اندازه کجی المنت بر روی محور عمودی (y) از فانکشن skewY استفاده کنید.

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

transform: skew(x,y);

matrix

برای این که همه موارد بالا را در یک فانکشن بگنجانید عبارت matrix را به ترتیب زیر بنویسید:

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

مبدأ مختصات

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

با کمک پراپرتی transform-origin می‌توانید جای مبدأ را برای آن المنت تعیین کنید.

transform-origin: x y;

مقدار x و y:

مثال rotate

مثال scale

مثال skew

مثال

مبدأ مختصات را می‌توانید خارج المنت قرار دهید.

مثال

نوشته عمودی

.item {
	font-size: 64px;
	line-height: 1;
	transform-origin: 32px 32px;
	transform: rotate(90deg);
}

مثال

ترنسفورم و ترنزیشن

.item {
	transition: all 0.5s;
}

.item:hover {
	transform: scale(2) rotate(6deg);
	box-shadow: 10px 10px 10px rgba(0,0,0,.8);
}

مثال

ترنسفورم و ترنزیشن

.item {
	transition: all 0.5s;
}

.item:hover {
	transform: translateX(-50%);
}

تمرین ۱

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

ترنزیشن به معنای جابجایی است. و در CSS باعث می‌شود تغییر پراپرتی به آرامی انجام شود. ترنزیشن یک راه ساده برای ایجاد انیمیشن در وب است. برای نمونه شما می‌توانید در CSS بنویسید: هنگامی که ماوس روی المنت می‌رود نحوه‌ی نمایش آن تغییراتی کند. (رنگ، سایز، سایه و … تغییر کند.)

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

ولی با ترنزیشن این تغییرات به آرامی انجام می‌گیرد.

تریگر – Trigger

به رویدادهایی که باعث این تغییر می‌شود تریگر یا ماشه می‌گویند.

رویدادهایی که در ترنزیشن‌ بیشتر به کار می‌روند، عبارتند از:

• :hover
• :active
• :focus

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

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

تعریف ترنزیشن

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

transition-duration

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

transition-property

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

transition-delay

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

transition-timing-function

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

دستور خلاصه

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

transition: property duration timing-function delay;

مثال

در فریم زیر مقادیر را تغییر دهید و با بردن ماوس روی مربع سرمه‌ای نتیجه آن را ببینید.

مثال

ترنزیشن سایه Shadow Transition

.item {
	transition: all 0.5s;
}

.item:hover {
	box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5);
}

پوینتر ماوس را روی تصویر ببرید و تغییر آن را ببینید.

مثال

ترنزیشن سایه داخلی Inner Shadow

.item {
	transition: all 0.5s;
}
.item.button1:hover {
	color: Beige;
	box-shadow: 200px 0 0 0 DimGray inset;
}
.item.button2:hover {
	color: Beige;
	box-shadow: 0 60px 0 0 DimGray inset;
}
.item.button3:hover {
	color: Beige;
	box-shadow: 0 0 0 30px DimGray inset;
}
.item.button4:hover {
	color: Beige;
	box-shadow: 0 0 100px 0 DimGray inset;
}

پوینتر ماوس را روی دکمه‌ها ببرید و تغییر آن را ببینید.

مثال

ساخت آکوردیون Accordion روش اول

item {
	max-height: 0;
	transition: max-height 0.5s;
}

item:target {
	max-height: 400px;
}

روی آیتم‌ها کلیک کنید و تغییر آن را ببینید.

مثال

ساخت آکوردیون Accordion روش دوم

input {
	display: none;
}

item {
	max-height: 0;
	transition: max-height 0.5s;
}

input:checked ~ item {
	max-height: 400px;
}

روی آیتم‌ها کلیک کنید و تغییر آن را ببینید.

تمرین ۱

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

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

برای تعیین مکان هر المنت، می‌توان فاصله آن را از هر سمت تعیین کرد.

برای محاسبه فاصله، سه محور مختصات در نظر گرفته می‌شود.

1. مکان پیش‌فرض المنت
2. المنت پرنت
3. پنجره بروزر

پوزیشن پیش فرض – static

اگر برای المنتی پوزیشن تعیین نگردد، به صورت پیش‌فرض مقدار static در نظر گرفته می‌شود.

<main>
    <section class="red-box"></section>
    <section class="orange-box"></section>
    <section class="purple-box"></section>
</main>

main {
  width: 400px;
  height: 400px;
  background-color: beige;
}
.red-box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.orange-box {
  width: 125px;
  height: 125px;
  background-color: orange;
}
.purple-box {
  width: 150px;
  height: 150px;
  background-color: purple;
}

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

Static With Coordinates

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

.orange-box {
  left:50px;        /* 50px from left */
  ...
}

Relative With Coordinates

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

.orange-box {
  position: relative;        /* relative to its default position. */
  ...
}

Relative With Coordinates

هنگامی‌که پوزیشن relative است؛ مختصات نسبت به مکان پیش‌فرض المنت محاسبه می‌شود.

.orange-box {
  position: relative;        /* relative to its default position. */
  top: 50px;
  left:50px;
  ...
}

Absolute Without Coordinates

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

.orange-box {
  position: absolute;       /* relative to its parent position. */
  ...
}

Absolute With Coordinates

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

.orange-box {
  position: absolute;        /* relative to its parent position. */
  top: 50px;
  left:50px;
}

Absolute With Coordinates

هنگامی‌که پوزیشن absolute است؛ و پوزیشن پرنت آن المنت تعیین شده باشد. مختصات آن نسبت به پرنت محاسبه می‌شود.

main {
  position: relative;        /* relative to its default position. */
  ...
}
.orange-box {
  position: absolute;        /* relative to its parent position. */
  top: 50px;
  left:50px;
  ...
}

Fixed Without Coordinates

هنگامی‌که پوزیشن fixed تعیین شود؛ جای المنت ثابت می‌ماند و با اسکرول کردن جابجا نمی‌شود. آن را در چیدمان بقیه المنت‌ها نادیده می‌گیرد.

اگر مختصات داده نشود، المنت را در جای پیش‌فرض خودش نمایش می‌دهد.

.orange-box {
  position: fixed;       /* relative to the browser window. */
  ...
}

Fixed With Coordinates

هنگامی‌که پوزیشن fixed تعیین شود؛ اگر مختصات داده شود، نسبت به پنجره بروزر محاسبه می‌شود.

.orange-box {
  position: fixed;       /* relative to the browser window. */
  top: 50px;
  left:50px;
  ...
}

Sticky Without Coordinates

واژه sticky به معنای چسبنده است. پوزیشن sticky باعث می‌شود، هنگام اسکرول، المنت به محل مورد نظر بچسبد. ولی بدون دادن مختصات کاری نمی‌کند.

.orange-box {
  position: sticky;        /* relative to the browser window. */
  ...
}

Sticky With Coordinates

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

.orange-box {
  position: sticky;        /* relative to the browser window. */
  top: 50px;
  ...
}

z-index

ترتیب قرار گرفتن المنت‌ها روی هم را مشخص می‌کند.

.red-box {
  position: absolute;
  top: 150px;
  left: 150px;
  z-index: 3;
  ...
}

.orange-box {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
  ...
}

.purple-box {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
  ...
}

خلاصه

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

Sticky Navigation Bar

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

nav {
  position: sticky;
  top: 0px;
}

Auto-Hiding Menu

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

.item {
  position: fixed;
  top: 50px;
  left: -75px;
}

.item:hover {
  left: 0px;
}

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• یک صفحه با منوی ثابت کناری همانند ویدیوی زیر درست کنید.

امروزه ابزارهای گوناگونی با نمایشگرهای کوچک و بزرگ ساخته شده است. از موبایل‌های کوچک ۴ اینچی گرفته تا کامپیوترهایی با مانیتورهای بزرگ به اندازه ۱۰۰ اینچ. و همگی آنها دسترسی به اینترنت دارند. بنابراین هر صفحه‌ای در وب ممکن است در صفحه نمایش کوچک یا بزرگ دیده شود.

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

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

• تغییر اندازه هر المنت
• تغییر چیدمان المنت‌ها
• حذف برخی از المنت‌ها

به اینگونه طراحی ریسپانسیو یا واکنشگرا می گویند.

آمار کاربران وب پیوسته در حال رشد است. همچنین افزایش کاربران موبایل بسیار بیشتر از کامپیوتر است. و از سال ۲۰۱۶ تعداد کاربران موبایل از کامپیوتر بیشتر شده و همچنان در حال افزایش است.

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

در حقیقت در طراحی موبایل مقدم است. (Mobile First)

اجرای دستورات CSS با توجه به نیاز کاربر

@media type and (features) {CSS-Code;}

خروجی‌ها

اغلب کاربر می‌خواهد محتوا را بر روی اسکرین یا نمایشگر ببیند. ولی گاهی می‌خواهد آن را بر روی کاغذ پرینت کند. یا آنکه محتوا برایش خوانده شود.

/* for Screen */
@media screen {

	body {
	background-image: url("bg.gif");
	}
	
}

/* for Print */
@media print {

  body {
    color: Black;
    background: White;
  }

  footer {
    display: none;
  }

}

شرایط

شرایط اسکرین یا نمایشگر نیز تعیین کننده است. همانند اندازه، نسبت طول به عرض، رزولوشن و …

/* Maximum width */
@media (max-width: 768px) {
	main {
		width: 100%;
	}
}

/* Minimum width */
@media (min-width: 1024px) {
	main {
		width: 1024px;
	}
}

/* landscape or portrait */
@media (orientation: landscape) {
	main {
		flex-direction: row;
	}
}

آپریتورهای منطقی Logical Operators

با کمک آپریتورهای منطقی (and, or, not) می توانید چند شرط را با هم ترکیب کنید.

@media screen and (max-width: 768px) {
	main {
		width: 100%;
	}
}

@media (max-width: 768px) and (orientation: landscape) {
	main {
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	main {
		width: 100%;
	}
}

@media print and (min-resolution: 300dpi) {
	p {
		font-family: serif;
	}
}	

@media only screen and (hover: hover) {
	a:hover {
		background-color: Yellow;
	}
}

@media not screen {
	footer {
		display: none;
	}
}

نقاط شکست Breakpoints

موبایل‌ها، تبلت‌ها و مانیتورها هر کدام در محدوده مشخصی قرار می‌گیرند. شما باید این محدوده‌ها را بشناسید. و بر اساس آن CSS خود را بنویسید.

• موبایل‌ها کمتر از 768px
• مانیتورها بیشتر از 1024px
• تبلت‌ها بین آن دو

@media screen and (max-width: 767px) {
	section {
		width: 100%​;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	section {
		width: 50%;
	}
}

@media screen and (min-width: 1024px) {
	section {
		width: 33%;
	}
}

تمرین ۱

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

Responsive Text

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

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

مثال

html {
	font-size: calc(10px + 0.5vw);
}

section { font-size: 1rem; }

p,h1,h2,h3,h4,h5 {
	margin-top: .5em;
	margin-bottom: .25em; 
}

p { font-size: 1em; }

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

تمرین ۲

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

Responsive Image With Art Direction

تصاویر را می‌توان به اندازه اسکرین کوچک یا بزرگ کرد. ولی کوچک شدن بیش از اندازه تصویر ممکن است به هدف ما از گذاشتن آن لطمه بزند.

تمرین ۳

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

جدول ریسپانسیو

جدول را به راه‌های گوناگونی می‌توان ریسپانسیو کرد. مثال زیر یکی از این راه‌ها را نشان می‌دهد.

Example: Collapse Row

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>School</th>
      <th>Major</th>
	</tr>
  </thead>	
  <tbody>
    <tr>
      <td data-label="First Name">Bob</td>
      <td data-label="Last Name">Smith</td>
      <td data-label="School">Stanford University</td>
      <td data-label="Major">Computer Science</td>
    </tr>	
    ...
  </tbody>
</table>

@media screen and (max-width: 768px) {
	table {
		border: 0;
	}
	thead {
		display: none;
	}
	tr {
		display: block;
		margin-bottom: .5em;
	}
	td {
		display: block;
		border-bottom: 1px solid #ddd;
		text-align: left;
	}
	td::before {
		content: attr(data-label)": ";
		font-weight: bold;
	}
	td:last-child {
		border-bottom: 0;
	}
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.

واحدهای اندازه‌گیری در CSS بسیار کاربرد دارد. چون بسیاری از پراپرتی‌های یک المنت HTML اندازه‌ای را تعیین می‌کند. و دادن اندازه یک چیز به صورت یک عدد بدون واحد، بی‌فایده است. به عنوان نمونه اگر شما بخواهید width یک عکس را مشخص کنید، و تنها یک عدد بدهید (مثلا ۲۰) و واحد آن را مشخص نکنید، نوشتن این عدد هیچ ارزشی ندارد. پس تعیین واحد برای معنا دادن به اعداد بسیار مهم است.

پراپرتی‌های بسیاری به تعیین واحد نیاز دارند. از جمله:

width, Height, margin, padding, border, border-radius, shadow, font-size, …

واحدها به دو نوع اصلی دسته بندی می‌شوند:

• مطلق – Absolute
• نسبی – Relative

مطلق – Absolute

واحدهای اندازه‌گیری مطلق به چیز دیگری وابسته نیست.

• px (pixels) : 1 px = 1/96 of 1 inch
• pt (points) : 1 pt = 1/72 of 1 inch
• pc (picas) : 1 pc = 1/6 of 1 inch

• in (inch) : 1 in = 25.4 mm
• cm (centimeter) : 1 cm = 10 mm
• mm (millimeter)

نسبی – Relative

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

• % (Percent) : Relative to the parent element

• em : 1 em = font-size of the element
• rem : 1 rem = font-size of the root element

• vw : 1 vw = 1% viewport width
• vh : 1 vh = 1% viewport height
• vmin : 1 vmin = 1% smaller length of vw or vh
• vmax : 1 vmax = 1% larger length of vw or vh

درصد %

واحد % هر جایی معنای خودش را دارد:

• font-size: نسبت به font-size پرنت
• width: نسبت به width پرنت
• height: نسبت به height پرنت
•  …

em / rem

حرف M اگر به صورت Capital نوشته شود، طول و عرض آن مساوی است. و درون یک مربع را پر می‌کند. اندازه ضلع این مربع را یک em می‌گویند. بنابراین در هر المنتی 1em برابر font-size همان المنت است. و اندازه  1em در یک المنت با یک المنت دیگر ممکن است متفاوت باشد. اگر برای اندازه font-size از این واحد استفاده شود، براساس font-size پرنت محاسبه می‌شود.

و اما rem کوتاه شده root em است. و root به معنای ریشه است و در اینجا منظور المنت html است. که همه المنت‌ها را دربرمی‌گیرد. بنابراین مقدار 1rem همه جا با هم برابر است. و برابراست با font-size المنت html.

نکته‌‌هایی برای اندازه فونت:

• در المنت html واحد em یا rem را به کار نبرید.
• در بخش‌های اصلی مثل header یا footer یا … از واحد rem استفاده کنید.
• در جاهای دیگر از em استفاده کنید.

سعی کنید برای تعیین اندازه هر چیز در هر جایی از واحد em یا rem استفاده کنید. با این کار اگر بخواهید محتوای سایت خود را درشت‌تر یا ریزتر کنید، بسیار ساده خواهد بود. تنها اندازه فونت html را تغییر دهید.

/* Root */
html {font-size: 16px;}

/* Components */
header {font-size: 1.5rem;}
footer {font-size: 0.75rem;}
main {font-size: 1.0rem;}

/* Text Elements */
p {font-size: 1em;}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: .83em;}
h6 {font-size: .75em;}

p,h1,h2,h3,h4,h5 {
    margin-top: .5em;
    margin-bottom: .25em;
}

ویوپورت Viewport

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

۱- vw: مقدار  100vw برابر است با width ویوپورت.

۲- vh: مقدار  100vh برابر است با height ویوپورت.

۳- vmin: مقدار  100vmin برابر است با width یا height ویوپورت، هرکدام کوچکتر است.

۴- vmax: مقدار  100vmax برابر است با width یا height ویوپورت، هرکدام بزرگتر است.

مثال

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

main {
    margin: 10vmin;
    width: 80vmin;
    height: 80vmin;
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• در آن تغییراتی بدهید تا عکس مورد نظر همانند تصویر زیر در وسط صفحه باشد. و با تغییر اندازه بروزر کوچک و بزرگ شود.

متغیرها – Variables

تعریف:

element {
    --main-bg-color: brown;
}

استفاده:

element {
    background-color: var(--main-bg-color);
}

وراثت Inheritance

<div class="one">
    <div class="two">
        <div class="three"></div>
        <div class="four"></div>
    </div>
</div>

.two {
    --test: 10px;
}

.three {
    --test: 16px;
}

The results of var(–test) for class:

• .one – invalid
• .two – 10px
• .three – 16px
• .four – 10px (inherited)

Fallback Values

.two {
    /* Red if --my-var is not defined */
    color: var(--my-var, red);
}

.three {
    /* pink if my-var and --my-background are not defined */
    background-color: var(--my-var, var(--my-background, pink));
}

متغیرهای نامعتبر

:root { --text-color: 16px; }

p {
    color: blue;  
    color: var(--text-color);
}

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• از variable استفاده کنید، تا عکس مورد نظر همانند تصویر زیر در وسط صفحه باشد.

محاسبات

Operators:

• + Addition
• – Subtraction
• * Multiplication
• / Division

Values:

• number
• percentage
• angle
• time

calc( ) Examples

element {
    margin-left: calc(50% + 20px);
    width: calc(50% - 3em);
    font-size: calc(1.5rem + 3vw);
    width: calc(40% + 20px - 1em);
    height: calc(100vh / 7 * 3);
    width: calc((100% + 60px) / 3);

    --ht: 4em;
    height: calc(var(--ht) + 7px);

}

Example: Position Background Image

css

element {
    background-position: calc(100% - 20px) calc(100% - 20px);
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.

تمرین ۳

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