10 نکته و ترفند قدرتمند CSS که طراحی وب شما را بالا می برد

بعد از گذشت 13 سال به عنوان یک طراح گرافیک و چندین سال غواصی در توسعه وب ، تکنیک های بی شماری CSS را جمع آوری کردم که به طور مداوم به من کمک کرده اند وب سایت های جلا تر ، کارآمدتر و بصری جذاب تر ایجاد کنم. امروز ، من 10 نکته و ترفندهای برتر CSS خود را به اشتراک می گذارم که می تواند بلافاصله پروژه های طراحی وب شما را بالا ببرد.

1. از ویژگی های سفارشی CSS برای تعویض تم استفاده کنید

خصوصیات سفارشی (متغیرهای CSS) برای اجرای سوئیچینگ موضوع با حداقل کد مناسب است:

:root {
  --primary-color: #2a3990;
  --secondary-color: #e6f0ff;
  --text-color: #333333;
  --background-color: #ffffff;
}

[data-theme="dark"] {
  --primary-color: #4e5ed3;
  --secondary-color: #1a1f3d;
  --text-color: #f0f0f0;
  --background-color: #121212;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

سوئیچینگ موضوع به آسانی به عنوان تغییر دادن یک ویژگی داده می شود:

document.documentElement.setAttribute('data-theme', 'dark');

2. عناصر محور کامل با شبکه

هک های حاشیه قدیمی/دگرگونی را فراموش کنید. شبکه CSS عناصر مرکز را فوق العاده ساده می کند:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

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

3. ایجاد تایپوگرافی پاسخگو با گیره ()

در clamp() عملکرد به تایپوگرافی شما اجازه می دهد تا بین اندازه های نمای بدون نمایش داده های رسانه ای به راحتی مقیاس بندی کند:

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 5rem);
}

p {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
}

این تضمین می کند که متن هرگز از نظر تلفن همراه یا خیلی بزرگ در دسک تاپ ، همه با یک خط CSS بسیار کوچک نیست.

4. برای رسانه های پاسخگو از نسبت ابعاد استفاده کنید

نسبت ابعاد کامل برای تصاویر ، فیلم ها و سایر رسانه ها را حفظ کنید:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.profile-image {
  aspect-ratio: 1 / 1;
  width: 250px;
  object-fit: cover;
}

این مانع از تغییر چیدمان می شود و نیاز به هک های مبتنی بر بالشتک را برطرف می کند.

5. با متغیرهای CSS انیمیشن های صاف ایجاد کنید

متغیرهای CSS را با انتقال برای انیمیشن های پویا و تعاملی ترکیب کنید:

.button {
  --scale: 1;
  --rotation: 0deg;
  transform: scale(var(--scale)) rotate(var(--rotation));
  transition: transform 0.3s ease;
}

.button:hover {
  --scale: 1.1;
  --rotation: 5deg;
}

این رویکرد انعطاف پذیری بیشتری را نسبت به مقادیر سخت کد به شما می دهد و مدیریت انیمیشن های پیچیده را آسان تر می کند.

6. Master the: is () برای کد پاک کننده

در :is() شبه کلاس می تواند به طور چشمگیری تکرار انتخاب CSS را کاهش دهد:

/* Instead of this */
header a:hover, 
main a:hover, 
footer a:hover {
  text-decoration: underline;
}

/* Use this */
:is(header, main, footer) a:hover {
  text-decoration: underline;
}

این باعث می شود که شیوه های شما قابل حفظ و خواندن آسان تر باشد.

7. سوابق سفارشی ایجاد کنید

Scrollbars را برای مطابقت با سیستم طراحی سایت خود سفارشی کنید:

/* For Webkit browsers (Chrome, Safari) */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* For Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

این جزئیات ظریف می تواند انسجام و لهستانی UI شما را به میزان قابل توجهی تقویت کند.

8. برای چیدمان های تمیز از شکاف با Flexbox استفاده کنید

در gap املاک اکنون با Flexbox کار می کند ، نه فقط شبکه:

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

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

9. طرح های مورب با CSS Clip-Path ایجاد کنید

استفاده کردن clip-path برای ایجاد تقسیم کننده بخش های مدرن و زاویه ای:

.diagonal-section {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  padding: 100px 20px;
}

.diagonal-card {
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

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

10. بهینه سازی انیمیشن ها با Will-Change

عملکرد عناصر انیمیشن را با اشاره به مرورگر بهبود بخشید:

.animated-element {
  will-change: transform, opacity;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

از کمبود و فقط برای عناصری که در واقع تغییر می کنند استفاده کنید ، زیرا استفاده بیش از حد می تواند بر عملکرد تأثیر منفی بگذارد.

جایزه: طرح بندی اشکال زدایی با یک خط

هنگامی که چیزی در طرح شما شکسته می شود ، این CSS موقت را اضافه کنید تا سریع مسائل را شناسایی کنید:

* {
  outline: 1px solid red !important;
}

این امر هر عنصر موجود در صفحه را برجسته می کند و باعث می شود تا مشکلات تراز ، مشکلات سرریز یا حاشیه های غیر منتظره را آسان تر کنید.

پایان

این تکنیک های CSS به طور مداوم به من کمک کرده است که وب سایت های جلا تر و حرفه ای تری ایجاد کنم. آنچه این ترفندها را به ویژه ارزشمند می کند این است که چگونه آنها سادگی را با قدرت ترکیب می کنند – اجرای آنها آسان است اما می تواند زیبایی شناسی و عملکرد پروژه های شما را به طرز چشمگیری بهبود بخشد.

بهترین بخش این است که این تکنیک ها با مرورگرهای مدرن کار می کنند و به شما امکان می دهد بدون تکیه بر کتابخانه های سنگین جاوا اسکریپت یا چارچوب های سنگین ، طرح های پیچیده ای ایجاد کنید.

نکات و ترفندهای CSS مورد علاقه شما چیست؟ در نظرات زیر به اشتراک بگذارید!

[This post was written by Italo Germando, Graphic Designer and Web Developer with over 13 years of experience in visual design and interface creation.]