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

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

اگه کسب و کارت هوشمند نیست،وقتشه هوشمندش کنی!

🎓 دوره جامع ABA | دستیار کسب وکار هوشمند

در این دوره یاد می گیرید چطور:
🔹 فرصت های واقعی AI را در کسب وکار پیدا کنید
🔹 فرایندهای کاری را بازطراحی و هوشمند کنید
🔹 از AI برای فروش، بازاریابی، مالی و منابع انسانی استفاده کنید
🔹 دستیارها و Agentهای هوشمند بسازید
🔹 برای تحول AI در سازمان یک نقشه عملی داشته باشید

🎓 مدرک وزارت علوم، تحقیقات و فناوری
💰 امکان پرداخت نقدی و اقساطی

✅ همراه با ضمانت آموزشی

✅ برای ثبت‌نام و دریافت مشاوره رایگان به آیدی زیر پیام دهید:
@elmsaz_admin11

علمساز | ساز یادگیری

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

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

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

💎 @Htmlcss_channels  | #HTML #css #JavaScript

با هوش مصنوعی فقط کد تولید نکن؛ محصول بساز.

بوت‌کمپ ۷ روزه و عملی ساخت محصول واقعی با هوش مصنوعی و Vibe Coding

در این دوره از یک ایده شروع می‌کنیم و قدم‌به‌قدم آن را به یک محصول واقعی و قابل انتشار تبدیل می‌کنیم.

در طول دوره یاد می‌گیرید:

• طراحی رابط کاربری و داشبورد
• ساخت پایگاه داده و بخش سمت سرور
• پیاده‌سازی ثبت‌نام و ورود کاربران
• اتصال به APIها و سرویس‌های مختلف
• اضافه کردن قابلیت‌های هوش مصنوعی به محصول
• ساخت فرایندهای خودکار و اتوماسیون
• رفع خطا و دیباگ با کمک هوش مصنوعی
• انتشار آنلاین پروژه
• تبدیل ایده به یک MVP قابل ارائه

این دوره صرفاً معرفی ابزارهای هوش مصنوعی نیست؛ از ابتدا تا انتهای دوره روی ساخت یک پروژه واقعی کار می‌کنیم.

برای شرکت در دوره نیازی به تسلط عمیق به برنامه‌نویسی ندارید.

شروع دوره: ۱۵ مهر
مدت دوره: ۷ روز
برگزاری: آنلاین و زنده در Skyroom
ظرفیت: حداکثر ۲۵ نفر

ضبط جلسات، سورس پروژه، پرامپت‌های کاربردی، فایل‌های دوره و گروه رفع اشکال در اختیار شرکت‌کنندگان قرار می‌گیرد.

برای دریافت سرفصل کامل و شرایط ثبت‌نام پیام دهید.

@amirhosseinsamdaliri