آموزش CSS 3

آموزش CSS3؛ راهنمای کاربردی ویژگی‌ها و تکنیک‌های مهم

CSS3 چیست و چه تفاوتی با CSS دارد؟

در عمل، قابلیت‌هایی مانند انحنای حاشیه‌ها، سایه‌ها، انتقال‌ها، انیمیشن‌ها، Flexbox و Media Queries ساخت رابط‌های کاربری امروزی را ساده‌تر کرده‌اند. در طراحی سایت، CSS3 به طراح کمک می‌کند ظاهر هماهنگ‌تری بسازد و چیدمان را برای صفحه‌نمایش‌های مختلف تنظیم کند. پشتیبانی هر ویژگی ممکن است میان مرورگرها متفاوت باشد؛ بنابراین آزمایش در مرورگرهای هدف بخشی از روند توسعه است.

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

از ماژول‌های پرکاربرد می‌توان به Selectors، Box Model، Backgrounds and Borders، Text Effects، Transforms، Animations، Multiple Column Layout و رابط کاربری اشاره کرد. در کنار یادگیری این امکانات، بهینه‌سازی فنی و محتوایی وب‌سایت هم اهمیت دارد؛ سئو موضوعی جدا از CSS است، اما سرعت و تجربه کاربری مناسب می‌تواند به کیفیت کلی سایت کمک کند.

پس‌زمینه‌ها و حاشیه‌ها در CSS3

استفاده از چند تصویر پس‌زمینه

ویژگی background-image امکان قرار دادن چند تصویر پس‌زمینه روی یک عنصر را فراهم می‌کند. مقادیر هر تصویر با کاما از هم جدا می‌شوند و تصویر نخست در لایه بالاتر قرار می‌گیرد. برای تنظیم محل و تکرار هر لایه نیز می‌توان به‌ترتیب از background-position و background-repeat استفاده کرد.

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

تنظیم اندازه تصویر پس‌زمینه

با background-size می‌توانید اندازه تصویر را با مقدارهای مشخص، درصد یا واژه‌های کلیدی contain و cover تعیین کنید. contain کل تصویر را در محدوده عنصر جا می‌دهد و ممکن است بخشی از عنصر خالی بماند؛ cover سطح عنصر را می‌پوشاند، اما امکان دارد بخشی از تصویر برش بخورد.

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

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

html {
  background: url(img_flower.jpg) no-repeat center center fixed;
  background-size: cover;
}

background-origin و background-clip

ویژگی background-origin نقطه آغاز محاسبه جایگاه تصویر پس‌زمینه را مشخص می‌کند. مقدار border-box محدوده حاشیه، padding-box محدوده فاصله داخلی و content-box محدوده محتوا را مبنا قرار می‌دهد. ویژگی background-clip نیز تعیین می‌کند رنگ یا تصویر پس‌زمینه تا کدام بخش از جعبه عنصر نقاشی شود.

• border-box: پس‌زمینه از محدوده بیرونی حاشیه محاسبه یا نمایش داده می‌شود.
• padding-box: محدوده padding مبناست و این مقدار پیش‌فرض background-origin است.
• content-box: پس‌زمینه به محدوده محتوای عنصر محدود می‌شود.

سایه متن و جعبه با CSS3

با text-shadow می‌توانید به نوشته سایه بدهید و با box-shadow سایه را به جعبه‌هایی مانند div اضافه کنید. مقدارهای اصلی سایه متن شامل جابه‌جایی افقی، جابه‌جایی عمودی، میزان محوشدگی و رنگ هستند. چند سایه را نیز می‌توان با کاما از هم جدا کرد؛ با این حال، استفاده زیاد از سایه ممکن است خوانایی متن را کم کند.

h1 {
  text-shadow: 2px 2px 5px red;
}

div {
  box-shadow: 10px 10px 5px grey;
}

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

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

برای مطالعه بیشتر درباره این موضوع می‌توانید راهنمای ایجاد سایه در CSS3 را ببینید.

انیمیشن‌ها و قانون keyframes در CSS3

انیمیشن CSS3 به یک عنصر امکان می‌دهد در طول زمان از یک وضعیت ظاهری به وضعیت دیگر تغییر کند. برای تعریف مراحل تغییر، از قانون @keyframes استفاده می‌شود و سپس نام انیمیشن، مدت اجرا و ویژگی‌های موردنیاز را به عنصر می‌دهید. برخلاف برخی افکت‌های ساده، انیمیشن CSS برای بسیاری از کاربردهای رایج به JavaScript یا Flash نیاز ندارد.

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

اگر animation-duration مشخص نشود، مقدار پیش‌فرض صفر است و انیمیشن قابل مشاهده نخواهد بود. به‌جای from و to می‌توانید از درصدهایی مانند 0%، 25%، 50% و 100% استفاده کنید تا چند مرحله تغییر رنگ، اندازه یا موقعیت تعریف شود. در طراحی حرکت، از جابه‌جایی‌های ناگهانی و افکت‌های طولانی که توجه کاربر را مختل می‌کنند پرهیز کنید.

ویژگی animation-delay شروع انیمیشن را به تعویق می‌اندازد، animation-iteration-count تعداد دفعات اجرا را مشخص می‌کند و مقدار infinite برای تکرار نامحدود به کار می‌رود. ویژگی animation-direction نیز جهت اجرای حرکت را کنترل می‌کند؛ برای مثال reverse حرکت را معکوس می‌کند و alternate اجرای رفت‌وبرگشتی می‌سازد.

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

تغییر اندازه و Outline در رابط کاربری

CSS3 ویژگی‌هایی برای کنترل تعامل با عناصر دارد. ویژگی resize مشخص می‌کند کاربر بتواند اندازه یک عنصر را تغییر دهد یا خیر. مقدار horizontal تغییر عرض، vertical تغییر ارتفاع و both تغییر هر دو بُعد را فعال می‌کند. برای نمایش درست کنترل تغییر اندازه معمولاً باید overflow نیز مقدار مناسبی داشته باشد.

div {
  resize: horizontal;
  overflow: auto;
}

ویژگی outline-offset فاصله میان outline و مرز عنصر را تنظیم می‌کند. Outline خارج از border رسم می‌شود و فضای بیشتری پیرامون عنصر ایجاد می‌کند. این ویژگی می‌تواند برای برجسته‌سازی عناصر مفید باشد، اما نباید نشانگر تمرکز صفحه‌کلید را از دید کاربران پنهان کند.

div {
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

کنترل متن و شکستن واژه‌ها

ویژگی‌های متنی CSS به مدیریت نوشته‌های طولانی یا محدود در یک کادر کمک می‌کنند. text-overflow مشخص می‌کند متن سرریز شده چگونه دیده شود؛ مقدار clip آن را بدون نشانه اضافه قطع می‌کند و ellipsis علامت سه‌نقطه را نمایش می‌دهد. معمولاً برای این کار باید عرض مشخص، overflow مخفی و white-space برابر nowrap باشد.

p.test {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

word-wrap با مقدار break-word به شکستن واژه‌های بسیار طولانی کمک می‌کند تا از محدوده محتوا بیرون نزنند. word-break نیز قواعد شکستن خط را تعیین می‌کند. نتیجه این ویژگی‌ها را با متن فارسی و انگلیسی واقعی بررسی کنید؛ رفتار شکست واژه به زبان و نوع نوشته بستگی دارد.

p {
  word-wrap: break-word;
}

p.test {
  word-break: break-all;
}

Transform دوبعدی و سه‌بعدی

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

• translate(): عنصر را در راستای محورهای X و Y جابه‌جا می‌کند.
• rotate(): عنصر را بر اساس زاویه مشخص می‌چرخاند.
• scale(): اندازه عنصر را در یک یا دو محور افزایش یا کاهش می‌دهد.
• skew(): عنصر را در امتداد محورهای افقی یا عمودی مورب می‌کند.
• matrix(): چند تبدیل دوبعدی را در یک تابع ترکیب می‌کند.

div {
  transform: translate(50px, 100px);
}

.rotate {
  transform: rotate(20deg);
}

.scale {
  transform: scale(2, 3);
}

در تبدیل سه‌بعدی، rotateX و rotateY عنصر را پیرامون محورهای X و Y می‌چرخانند و rotateZ چرخش حول محور Z را انجام می‌دهد. ویژگی‌هایی مانند perspective، transform-origin، transform-style و backface-visibility نیز در تعیین عمق، نقطه چرخش و نحوه نمایش پشت عنصر نقش دارند.

چیدمان چندستونه در CSS3

قابلیت چندستونه متن را مانند ستون‌های یک روزنامه تقسیم می‌کند. column-count تعداد ستون‌ها را مشخص می‌کند و column-gap فاصله میان آن‌ها را تنظیم می‌کند. برای جدا کردن بصری ستون‌ها می‌توان از column-rule استفاده کرد؛ این ویژگی مختصرشده تنظیم سبک، رنگ و ضخامت خط میان ستون‌ها است.

div {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}

column-width عرض مطلوب ستون را تعیین می‌کند و مرورگر با توجه به فضای در دسترس تعداد ستون‌ها را محاسبه می‌کند. column-span نیز امکان می‌دهد یک عنصر، مانند عنوان، از چند ستون عبور کند. این ویژگی‌ها برای متن‌های بلند مناسب‌اند؛ برای رابط‌های کاربری پیچیده معمولاً Flexbox یا Grid انتخاب‌های مناسب‌تری هستند.

h2 {
  column-span: all;
}

Box sizing و محاسبه اندازه عناصر

در مدل پیش‌فرض content-box، مقدار width فقط عرض محتوا را مشخص می‌کند و padding و border به اندازه نهایی افزوده می‌شوند. به همین دلیل دو عنصر با width یکسان ممکن است در صفحه اندازه متفاوتی داشته باشند. این موضوع در طراحی شبکه‌ها و ستون‌های کنار هم می‌تواند باعث بیرون‌زدگی شود.

با box-sizing: border-box، padding و border در اندازه تعیین‌شده عنصر محاسبه می‌شوند. در نتیجه کنترل عرض جعبه‌ها ساده‌تر می‌شود و احتمال به‌هم‌ریختگی چیدمان کاهش می‌یابد. این روش در بسیاری از پروژه‌ها به‌صورت یک قاعده عمومی به کار می‌رود.

.div {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 1px solid red;
  box-sizing: border-box;
}

Flexbox برای چیدمان واکنش‌گرا

Flexbox مدلی برای چیدمان یک‌بعدی عناصر است. یک flex container با display: flex ساخته می‌شود و فرزندان مستقیم آن flex item هستند. این مدل برای ردیف یا ستون کردن محتوا، توزیع فضای خالی، هم‌تراز کردن اجزا و ساخت رابط‌هایی که با اندازه نمایشگر سازگار شوند کاربرد دارد.

.flex-container {
  display: flex;
  width: 400px;
  min-height: 250px;
  background-color: lightgrey;
}

.flex-item {
  width: 100px;
  min-height: 100px;
  margin: 10px;
  background-color: cornflowerblue;
}

flex-direction جهت قرارگیری آیتم‌ها را تعیین می‌کند. مقدار row آیتم‌ها را در یک ردیف و column آن‌ها را در یک ستون می‌چیند؛ row-reverse و column-reverse ترتیب را معکوس می‌کنند. برای چیدمان راست‌به‌چپ، ویژگی direction نیز می‌تواند بر جهت بصری ردیف اثر بگذارد.

ویژگی justify-content فضای آیتم‌ها را در محور اصلی تنظیم می‌کند و align-items تراز آن‌ها را در محور متقاطع کنترل می‌کند. مقادیری مانند center، flex-start، flex-end و space-between برای چیدمان‌های گوناگون کاربرد دارند. flex-wrap اجازه می‌دهد آیتم‌ها در صورت کمبود فضا به خط بعد منتقل شوند.

برای کنترل جداگانه هر آیتم، از order، align-self و flex استفاده می‌شود. order ترتیب نمایش را تغییر می‌دهد، align-self تراز یک آیتم را مستقل از دیگران تعیین می‌کند و flex سهم آن آیتم از فضای آزاد را مشخص می‌سازد. ترتیب بصری را طوری تنظیم کنید که با ترتیب منطقی محتوا و دسترسی صفحه‌کلید هماهنگ بماند.

Media Queries و طراحی واکنش‌گرا

Media Queries به مرورگر اجازه می‌دهد با توجه به ویژگی‌های محیط نمایش، قواعد CSS متفاوتی اجرا کند. به‌جای فرض کردن نوع دستگاه، می‌توانید عرض محدوده دید، جهت صفحه یا وضوح را بررسی کنید. این روش پایه مهمی برای ساخت صفحه‌های واکنش‌گرا و سازگار با تلفن همراه و تبلت است.

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

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

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

گوشه‌های گرد و Pagination

ویژگی border-radius گوشه‌های یک عنصر را گرد می‌کند. یک مقدار برای هر چهار گوشه استفاده می‌شود و چند مقدار، اندازه هر گوشه را جداگانه تعیین می‌کنند. این ویژگی برای دکمه‌ها، کارت‌ها و کادرها مناسب است؛ اما حفظ کنتراست و وضوح اجزا همچنان اهمیت دارد.

#rcorners {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
}

صفحه‌بندی یا Pagination راهی برای تقسیم مجموعه بزرگی از محتوا به چند صفحه است. با CSS می‌توانید پیوندها را مرتب کنید، صفحه فعال را مشخص کنید و در حالت hover ظاهر پیوند را تغییر دهید. وضعیت فعال را تنها با رنگ نشان ندهید؛ نشانه‌ای دیداری یا متنی دیگر نیز به کار ببرید تا برای کاربران بیشتری قابل تشخیص باشد.

ul.pagination li a.active {
  background-color: #4CAF50;
  color: white;
}

ul.pagination li a:hover:not(.active) {
  background-color: #ddd;
}

پنج نکته مهم برای استفاده از CSS3

۱. ابتدا هدف طراحی را مشخص کنید

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

۲. کد را در مرورگرهای هدف آزمایش کنید

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

۳. چیدمان را انعطاف‌پذیر بسازید

به‌جای اتکا به اندازه‌های ثابت در همه بخش‌ها، از Flexbox و Media Queries برای سازگاری با فضای موجود استفاده کنید. اندازه‌های منعطف و شکست‌های متناسب با محتوا به جلوگیری از بیرون‌زدگی و فشرده شدن عناصر کمک می‌کنند.

۴. خوانایی و دسترس‌پذیری را جدی بگیرید

کنتراست رنگ، اندازه متن، ترتیب پیمایش با صفحه‌کلید و وضوح نشانگر تمرکز باید در کنار زیبایی بصری بررسی شوند. حرکت‌های تکراری یا پرسرعت را محدود کنید و برای عناصر تعاملی، حالت‌های hover و focus قابل تشخیص داشته باشید.

۵. کد را مرتب و قابل نگهداری نگه دارید

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

جمع‌بندی آموزش CSS3

سوالات متداول CSS3