سواد دیجیتال

طراحی وب: ۷- ترنسفورم سه بعدی

فضای سه‌بعدی

برای نمایش المنت‌ها در فضای سه بعدی باید از محورهای مختصات سه بعدی استفاده کرد. جهت این محورها به دو صورت می‌تواند باشد. که به آن راست‌گرد و یا چپ‌گرد می‌گویند. اگر سه انگشت شست، نشانه و میانی دست خود را طوری باز کنید که هر یک از آنها با زاویه ۹۰ درجه نسبت به دیگری قرار گیرد. انگشت شست جهت محور 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:

CSS


.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:

CSS


.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

CSS


.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);
}

زمان خواندن: ۵ دقیقه

طراحی وب: ۶- ترنسفورم

ترنسفورم به معنای دگرگونی است. با پراپرتی 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:

x-value	y-value
left center (default) right value	top center (default) bottom value

مثال rotate

مثال scale

مثال skew

مثال

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

مثال

نوشته عمودی

CSS


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

مثال

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

CSS


.item {
	transition: all 0.5s;
}

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

مثال

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

CSS


.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

CSS


.item {
	transition: all 0.5s;
}

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

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

مثال

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

CSS


.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 روش اول

CSS


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

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

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

مثال

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

CSS


input {
	display: none;
}

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

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

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

تمرین ۱

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

زمان خواندن: ۳ دقیقه

طراحی وب: ۴- پوزیشن

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

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

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

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

position: static | relative | absolute | fixed | sticky;

static: None (default value)
relative: Relative to its default position(1).
absolute: Relative to its parent position(2).
fixed: Relative to the browser window(3).
sticky: Relative to the browser window(3).

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

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

HTML


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

CSS


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

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

CSS


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

Relative With Coordinates

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

CSS


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

Relative With Coordinates

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

CSS


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

Absolute Without Coordinates

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

CSS


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

Absolute With Coordinates

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

CSS


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

Absolute With Coordinates

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

CSS


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 تعیین شود؛ جای المنت ثابت می‌ماند و با اسکرول کردن جابجا نمی‌شود. آن را در چیدمان بقیه المنت‌ها نادیده می‌گیرد.

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

CSS


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

Fixed With Coordinates

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

CSS


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

Sticky Without Coordinates

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

CSS


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

Sticky With Coordinates

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

CSS


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

z-index

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

CSS


.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

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

CSS


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

Auto-Hiding Menu

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

CSS


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

.item:hover {
  left: 0px;
}

تمرین ۱

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

زمان خواندن: ۴ دقیقه

طراحی وب: ۳- ریسپانسیو

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

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

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

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

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

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

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

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

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

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

خروجی‌ها

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

all – Default
screen – Computer, Tablets, Phones.
print – Printers
speech – ScreenReaders

CSS


/* for Screen */
@media screen {

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

/* for Print */
@media print {

  body {
    color: Black;
    background: White;
  }

  footer {
    display: none;
  }

}

شرایط

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

width | max-width | min-width
height | max-height | min-height
aspect-ratio
resolution
orientation
hover

CSS


/* 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) می توانید چند شرط را با هم ترکیب کنید.

CSS


@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
تبلت‌ها بین آن دو

CSS


@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 می‌توان سایز فونت را با اندازه نمایشگر متناسب کرد.

مثال

CSS


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

CSS


<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>

CSS


@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;
	}
}

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

زمان خواندن: ۵ دقیقه