CSS3 دریچه ورود به دنیای طراحی‌های مدرن و واکنش‌گرا

CSS3 چیه و چرا مهمه؟

اولین قدم برای ساخت یه سایت زیبا، استفاده از CSS3 هست. CSS مخفف Cascading Style Sheets به معنای "شیوه‌نامه آبشاری" هست. با CSS3، می‌تونید یه سایت ساده و خشک HTML رو به یه شاهکار بصری تبدیل کنید.
حالا چرا CSS3 انقدر جذابه؟ چون نسخه سوم CSS کلی قابلیت جدید آورده که کار طراحی رو آسون و حرفه‌ای‌تر کرده. با ویژگی‌هایی مثل انیمیشن، گرادیان‌ها، سایه‌ها و ... می‌تونید سایت‌هایی بسازید که چشم هر کاربری رو خیره کنه.

ویژگی‌های جدید در CSS3

۱. انیمیشن‌ها و ترنزیشن‌ها

قبلاً اگه می‌خواستید تو سایت‌تون یه انیمیشن ساده داشته باشید، باید سراغ جاوااسکریپت می‌رفتید. ولی حالا با CSS3 می‌تونید افکت‌های زیبا مثل تغییر رنگ، حرکت المان‌ها یا تغییر اندازه رو با چند خط کدنویسی ساده اضافه کنید.
مثلاً فرض کنید می‌خواید دکمه‌ای طراحی کنید که وقتی روش می‌رید (هاور می‌کنید)، رنگش عوض شه. با خاصیت transition این کار رو خیلی راحت انجام می‌دید. حتی می‌تونید سرعت و نحوه تغییر رو هم مشخص کنید.

button {
  background-color: blue;
  color: white;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: red;
}

۲. گرادیان‌ها (Gradient)

قبلاً برای داشتن پس‌زمینه گرادیان باید عکس طراحی می‌کردید و اون رو به‌عنوان بک‌گراند قرار می‌دادید. اما با CSS3 دیگه نیازی به این کار نیست. شما می‌تونید انواع گرادیان‌های خطی و شعاعی رو به‌راحتی بسازید.
مثلاً یه پس‌زمینه خطی از آبی به سبز می‌خواید؟ فقط کافیه این کد رو بنویسید:

background: linear-gradient(to right, blue, green);

ساختار طراحی بهتر با Flexbox

Flexbox چیه؟

اگر با چیدمان عناصر داخل سایت مشکل داشتید، باید بگم Flexbox بهترین دوست شماست! این ویژگی CSS3 برای طراحی صفحات ریسپانسیو (واکنش‌گرا) خیلی کاربردیه. به کمک Flexbox می‌تونید عناصر رو به‌راحتی در مرکز قرار بدید یا ترتیب نمایش‌شون رو تغییر بدید.
مثلاً فرض کنید یه بخش دارید که شامل ۳ کارت هست و می‌خواید این کارت‌ها در موبایل زیر هم و در دسکتاپ کنار هم نمایش داده بشن. Flexbox این کار رو مثل آب خوردن انجام می‌ده.

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

.card {
  flex: 1 1 30%;
}

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

تو دنیای امروز که همه با موبایل، تبلت یا لپ‌تاپ به سایت‌ها سر می‌زنن، طراحی واکنش‌گرا (Responsive Design) یه ضرورت شده. CSS3 با ویژگی Media Queries این مشکل رو حل کرده.
مثلاً می‌تونید بگید اگه عرض صفحه کمتر از ۷۶۸ پیکسل شد (مثل موبایل)، استایل‌های خاصی اعمال بشه. این قابلیت به شما کمک می‌کنه سایت‌تون در هر دستگاهی عالی به نظر برسه.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

سایه‌ها و فیلترها: چاشنی‌های زیباسازی

۱. سایه‌های متن و جعبه‌ها

سایه‌ها همیشه به طراحی یه جلوه خاص می‌دن. CSS3 با خاصیت‌های box-shadow و text-shadow این امکان رو به شما می‌ده که سایه‌هایی حرفه‌ای و زیبا ایجاد کنید.
برای مثال، یه جعبه با سایه ملایم طراحی کنید:

.box {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

۲. فیلترهای تصویری

یکی دیگه از ویژگی‌های خفن CSS3، فیلترهاست. با خاصیت filter می‌تونید افکت‌هایی مثل تار شدن (blur)، روشنایی (brightness)، یا حتی سیاه و سفید کردن تصاویر رو اعمال کنید.

 

img {
  filter: grayscale(100%);
}

استفاده از فونت‌های وب

قدیما برای استفاده از یه فونت خاص، کلی دردسر داشتید. اما CSS3 با معرفی خاصیت @font-face این مشکل رو حل کرده. حالا می‌تونید هر فونتی که دوست دارید به سایت‌تون اضافه کنید.
فرض کنید یه فونت جذاب دارید و می‌خواید تو سایت استفاده کنید:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

body {
  font-family: 'MyFont', sans-serif;
}

طراحی‌های خاص با Transform

ویژگی transform به شما این امکان رو می‌ده که عناصر رو بچرخونید، بزرگ کنید یا حتی کج کنید. مثلاً می‌تونید یه عکس رو ۴۵ درجه بچرخونید:

 

img {
  transform: rotate(45deg);
}

بهترین روش‌ها برای بهینه‌سازی CSS

۱. استفاده از کلاس‌ها به جای ID‌ها

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

۲. کاهش حجم فایل‌های CSS

حتماً فایل‌های CSS خودتون رو فشرده کنید. ابزارهایی مثل CSS Minifier این کار رو براتون انجام می‌دن.

۳. استفاده از Preprocessorها

ابزارهایی مثل SASS و LESS به شما کمک می‌کنن که کدنویسی مرتب‌تر و حرفه‌ای‌تری داشته باشید.

چرا CSS3 برای هر طراح وب ضروریه؟

CSS3 همه چیزیه که برای زیباسازی سایت‌تون نیاز دارید. از انیمیشن‌های جذاب گرفته تا طراحی‌های واکنش‌گرا و چیدمان‌های پیشرفته، CSS3 دنیای طراحی وب رو متحول کرده. پس اگه هنوز به CSS3 مسلط نیستید، وقتشه که دست به کار شید!