🔅 CSS Clamp

clamp(minimum, preferred, maximum);

In this example, the preferred value is 50%.

On the left 50% of the 400px viewport is 200px, which is less than the 300px minimum value that gets used instead.

On the right, 50% of the 1400px viewport equals 700px, which is greater than the minimum value and lower than the 800px maximum value, so it equates to 700px.

💎 @Htmlcss_channels  | #HTML #css #JavaScript

؛CSS Clamp — اندازه‌گذاری هوشمند

فرمول ساده

؛clamp(کمترین, مقدار_ایده‌آل, بیشترین)
مثل یه کش لاستیکی عمل می‌کنه:

🟢 اگه خیلی کوچیک شد → به کمترین حد می‌رسه

🔴 اگه خیلی بزرگ شد → به بیشترین حد می‌رسه

🟡 در حالت عادی → اندازه ایده‌آل رو داره

مثال تصویر

width: clamp(300px, 50%, 800px);صفحه نمایش۵۰٪نتیجه📱 کوچک (400px)200px300px (کمترین)💻 بزرگ (1400px)700px700px (ایده‌آل)🖥️ خیلی بزرگ (2000px)1000px800px (بیشترین)

کجا استفاده می‌شه؟

۱. سایز فونت responsive
/* بهترین روش برای فونت‌های واکنش‌گرا */
font-size: clamp(16px, 2.5vw, 32px);

موبایل: 16px

دسکتاپ: 32px

بینشون: بر اساس عرض صفحه

۲. عرض کارت‌ها

.card {
width: clamp(280px, 90%, 1200px);
}

۳. فاصله‌ها (padding/margin)

padding: clamp(1rem, 3vw, 3rem);

۴. ارتفاع هدر

height: clamp(60px, 10vh, 120px);

مقایسه با روش‌های قدیمی

قبلاً باید اینطوری می‌نوشتی:
/* ۱۰ خط کد با media query */

.title {
font-size: 16px;
}
@media (min-width: 768px) {
.title { font-size: 24px; }
}
@media (min-width: 1200px) {
.title { font-size: 32px; }
}

حالا فقط یه خط:

.title {
font-size: clamp(16px, 4vw, 32px);
}

🎉 همین! تمیزتر، سریع‌تر، بدون media query.

نکات مهم ⚠️

۱. ترتیب مهمه!
/* ✅ درست */

clamp(MIN, PREFERRED, MAX)

/* ❌ غلط */

clamp(MAX, PREFERRED, MIN)

۲. می‌تونی ترکیب واحد استفاده کنی

font-size: clamp(1rem, 2.5vw + 0.5rem, 3rem);

۳. پشتیبانی مرورگرها

✅ Chrome, Firefox, Safari, Edge (نسخه‌های جدید)



یه مثال کامل و کاربردی

.hero {
/* عنوان اصلی */
font-size: clamp(2rem, 5vw, 4.5rem);

/* زیرعنوان */
padding: clamp(1rem, 3vw, 2rem);

/* عرض کلی */
max-width: clamp(320px, 90%, 1400px);

/* فاصله داخلی */
margin: clamp(2rem, 5vh, 5rem) auto;
}

💎 @Htmlcss_channels  | #HTML #css #JavaScript

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


uselayouts.com


💎 @Htmlcss_channels  | #HTML #css #JavaScript

If you have a website, incorporating an AI agent (or several) can be really helpful.

And in this in-depth tutorial, andrewbaisden walks you through creating a team of agents for your site.

You'll build the front end with React, the back end with Python, and use helpful tools like Agno & Groq Cloud, too.

https://www.freecodecamp.org/news/build-a-team-of-ai-agents-for-your-website-for-free/

💎 @Htmlcss_channels  | #HTML #css #JavaScript

📊 نمودارهای آماده و انیمیشن‌دار برای React با EvilCharts

نمودارهایی مثل Line، Bar، Pie و Sankey رو با یک دستور shadcn وارد پروژه می‌کنید.

کدشون در اختیار خودتونه؛ پس داده، رنگ و رفتارشون رو هر طور بخواید تغییر می‌دید.

رایگان و متن‌بازه.

https://evilcharts.com


💎 @Htmlcss_channels  | #HTML #css #JavaScript

سایت StringTune یه مجموعه از کامپوننت های آماده برای ساخت تجربه‌های تعاملی و انیمیشن‌های مدرنه که کمک می‌کنه سایتتون خیلی روان‌تر و جذاب‌تر به نظر برسه. ✨

نکته جالبش اینه که رویکردش بیشتر CSS-محوره و تا جای ممکن بدون JavaScript اضافی کار می‌کنه. 🔥

🔗 https://string-tune.fiddle.digital/skill-hub

💎 @Htmlcss_channels  | #HTML #css #JavaScript

با یه دستور، تمام کامپوننت‌های سایتت رو میتونی انیمیشنی کنی

نسخه Animate UI 2.0 رسماً منتشر شد؛ یه کتابخونه متن‌باز که می‌تونه طراحی سایت‌های React رو چند سطح حرفه‌ای‌تر کنه!

قابلیت‌های جدید:

انیمیشن آماده برای دکمه‌ها، منوها، دیالوگ‌ها و کامپوننت‌های UI
تبدیل کامپوننت‌های shadcn/ui به نسخه انیمیشنی با یک دستور
پشتیبانی از Radix UI، Base UI و React Aria
دارای AI Skill برای Claude Code، Cursor و Codex
امکان ساخت و بررسی انیمیشن‌ها با یه دستور متنی :

animate-ui.com


💎 @Htmlcss_channels  | #HTML #css #JavaScript

سایت SmoothUI مجموعه‌ای از کامپوننت‌های انیمیشنی برای React و Tailwind داره که می‌تونید باهاشون بدون دردسر زیاد، جلوه‌های جذابی به رابط کاربریتون اضافه کنید.

نمونه‌هاش رو ببینید؛ بعضی‌هاشون می‌تونن دقیقاً همون چیزی باشن که برای پروژه‌تون کم داشتید.

🔗 https://smoothui.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript