5 ترفند جذاب CSS که هر توسعه‌دهنده‌ای باید بداند
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 1 دقیقه

5 ترفند جذاب CSS که هر توسعه‌دهنده‌ای باید بداند

این دفعه بهترین کارهایی که می‌توانید با CSS انجام دهید را تنها در چند خط کد جمع‌آوری کرده‌ام. پس بیایید شروع کنیم!

1. پیمایش روان

وقتی دکمه‌ای دارید که قسمتی متفاوت از صفحه وب را نشان می‌دهد، این تکنیک می‌تواند بسیار مهم باشد. می‌توانید به سادگی این کار را با «href=”#goToContact» انجام دهید اما جذاب نخواهد بود. داشتن یک پیمایش روان بسیار جذاب و حرفه‌ای است. بازدیدکنندگان وبسایت شما لایق بهترین تجربه کاربری هستند.

html {
  scroll-behavior: smooth;
}

2. اندازه تصاویر را متناسب کنید

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

img {
    max-width:100%;
    height:auto;
}

 

3. تنظیم یک عکس به عنوان نشانگر

آیا می‌خواهید نشانگر خود را نیز مثل برنامه وب یا وبسایت خود منحصر به فرد کنید؟ خب این کار می‌تواند یک هدیه‌ی بی نظیر به بازدیدکنندگان شما بدهد:

body {
  cursor: url("images/cursor.png"), auto;
 

4. هر چیزی را در 3 خط کد سنتر کنید

می‌رسیم به سنترینگ در CSS، چه کسانی نگران آن بودند؟ در اینجا 3 خط CSS جادویی برای سنتر کردن هر چیزی آورده شده است:

.center {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

5. محتوای محدودی را در یک پاراگراف قرار دهید

آیا باید تنها چند عبارت را در پاراگراف خود نمایش دهید؟ دوباره می‌گویم که CSS می‌تواند این کار را در یک خط انجام دهد. ویژگی «webkit-line-clamp» در CSS اجازه می‌دهد تا محتوای یک بخش کانتینر به تعداد مشخصی از خطوط محدود شود.

p {
  -webkit-line-clamp: 5;
}
 

منبع

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
4.75 از 4 رای

9 ماه پیش
css
ترفند
/@Pemi.razmi
علیرضا داداشی
دانشجوی مهندسی پزشکی

دیدگاه و پرسش

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

ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

علیرضا داداشی

دانشجوی مهندسی پزشکی