این سایت کامپوننت های زیبایی برای وب داره، کد هاشون هست بعضیاشون حتی پرامپت هم دارن برای اونایی که نمی‌تونن از کدش استفاده کنن یا اینکه با فریم ورکشون سازگار نیست بدید به هوش مصنوعی براتون می‌سازتش:

bencho.dev


💎 @Htmlcss_channels  | #HTML #css #JavaScript

سایت موشن‌سایتس (MotionSites) پرامپت‌ برای طراحی وب‌سایت در اختیارتون می‌ذاره.

سایت MotionSites پرامپت‌های آماده‌ی AI برای ساخت لندینگ داره.

1️⃣ می‌ری تو سایت ، یه نمونه‌ی خوشگل پیدا می‌کنی
2️⃣ پرامپت آماده‌ش رو کپی می‌کنی (همین، فقط کپی!)
3️⃣ می‌دیش به Cursor یا v0.dev
4️⃣ یه لندینگ شیک با انیمیشن‌های روان تحویل می‌گیری

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

اینجوری پیش برو:

MotionSites (پرامپت آماده)
↓
Cursor / v0.dev (گرفتن کد)
↓
Sevalla / Vercel (دیپلوی)

🔗 لینک: https://motionsites.ai


✅ رایگان شروع می‌کنی، بعد اگه خواستی پولی‌هاش رو بگیری


💎 @Htmlcss_channels  | #HTML #css #JavaScript

سایت Obsidian UI یه کالکشن جذاب از کامپوننت‌های مدرنه که به پروژه‌هاتون یه ظاهر کاملاً پرمیوم و شیک میده. کپی کنید و سطح رابط کاربری سایتتون رو چند لول ببرید بالاتر.

🔗 https://www.obsidianui.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

مدل Jev توی طراحی یک Design System چقدر خوبه؟

فقط کافیه یک جمله بهش بدی، بعد خودش از بین بیشتر از 1 کوادریلیون ترکیب مختلف انتخاب می‌کنه.

هیچ‌کدوم از بخش‌های این ویدیو سریع‌تر نشده؛ هر بار که استایل رو تغییر می‌ده، در واقع 4 درخواست موازی اجرا میشه که حدود 2 ثانیه زمان می‌بره و هزینه‌ش حدود $0.0007 هستش.

29 تا فلگ برای کنترل چیزهایی مثل فرم گوشه‌ها، حاشیه‌ها، خانواده آیکون‌ها، مسیرهای نمودار، بافت صفحه، میزان تراکم و انیمیشن‌ها استفاده میشن؛ همه‌شون هم روی shadcn ساخته شدن.

علاوه بر این‌ها، رنگ، شعاع گوشه‌ها، فاصله‌ها و مقیاس تایپوگرافی هم به‌صورت پیوسته قابل تنظیم هستن.


💎 @Htmlcss_channels  | #HTML #css #JavaScript

HTML: Responsive images

🔅 تصاویر واکنش‌گرا در HTML

با اين تکنیک، مرورگر خودش بهترین نسخه تصویر رو بر اساس اندازه صفحه لود می‌کنه!

🎯 چرا تصاویر واکنش‌گرا مهمن؟

👈 سرعت لود بالاتر – تصویر کوچک‌تر برای موبایل
👈 صرفه‌جویی در پهنای باند
👈 تجربه کاربری بهتر در همه دستگاه‌ها
👈 سئوی بهتر – گوگل سایت‌های سریع رو دوست داره

💻 کد :

<picture>
<source srcset="large.png" media="(min-width: 10rem)" />
<source srcset="medium.png" media="(min-width: 6rem)" />
<img src="small.png" alt="…" />
</picture>

با این تکنیک ساده:

📱 در موبایل → تصویر کوچک و سبک

💻در دسکتاپ → تصویر بزرگ و باکیفیت

⚡ سرعت لود تا ۵۰٪ بهتر!

#Responsive #WebDesign #Frontend


💎 @Htmlcss_channels  | #HTML #css #JavaScript

۵ منبع رایگان کاربردی برای طراحان و توسعه‌دهندگان وبسایت!

اگه دنبال کامپوننت‌های آماده، آیکون، انیمیشن و موکاپ هستی، از این سایت‌ها استفاده کنید 👇

Spectrum UI : ui.spectrumhq.in

✨ ۲۵۰+ کامپوننت Open Source با React و Tailwind
پشتیبانی از MCP (Model Context Protocol)
مناسب برای ساخت سریع رابط کاربری حرفه‌ای

Animated Buttons : animatedbuttons.colorion.co

🎬 دکمه‌های CSS انیمیشنی رایگان با افکت‌های جذاب و خلاقانه با قابلیت کپی کردن کد

Obsidian UI: obsidianui.dev

🧩 ۳۵+ کامپوننت و بلاک آماده ، سازگار با shadcn CLI شامل طراحی های مدرن و مینیمال

Keyline Icons: keylineicons.com

🎯 ۸۰۰۰+ آیکون رایگان برای Shadcn با سبک‌های متنوع و یکدست و جستجوی آسان

Morflax Studio : studio.morflax.com

🎭 موکاپ‌های ۳D رایگان برای ساخت موشن گرافیک حرفه‌ای و ارائه پروژه‌ها


💎 @Htmlcss_channels  | #HTML #css #JavaScript

برای معرفی پروژه هاتون به کارفرما بهتره از این روش استفاده کنید
این وبسایت پروژه هاتون رو تبدیل می‌کنه به Showreel متحرک، بدون اینکه بری سراغ After Effects

بیش از 260 مدل Motion داره و برای معرفی UI/UX، اپ، سایت و پورتفولیو خیلی به‌درد می‌خوره.

فقط مدیا رو میدی، استایل رو انتخاب می‌کنی و خروجی می‌گیری.

لینک:
https://reelfolio.io

برای کسایی که هنوز پروژه‌هاشون رو فقط با اسکرین‌شات معرفی می‌کنن، این واقعاً یه آپگرید خوبه


💎 @Htmlcss_channels  | #HTML #css #JavaScript

🔅 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