Html and Css & Jsآموزش

با Three.js میشه سایت‌های تعاملی سه‌بعدی ساخت که نور، آب‌وهوا، دوربین و مدل‌های 3D رو مستقیم داخل مرورگر کنترل می‌کنن.

این پروژه برای ساخت مدل‌ها از Claude Code و برای تکسچر و صدا از Higgsfield استفاده کرده.

Three.js: https://threejs.org/

💎 @Htmlcss_channels | #HTML #css #JavaScript

🔥4❤3

894 views07:00

0:37

🎨 اگه برای طراحی سایت یا اپلیکیشن دنبال انیمیشن‌ها و المان‌های آماده هستید، این ابزار می‌تونه کلی از زمان طراحی رو کم کنه.

✨ سرویس OriginKit⁠ یک کتابخانه رایگان از کامپوننت‌های متحرک برای وب‌سایت‌های مدرنه که می‌تونید المان‌های آماده رو بردارید و مستقیم داخل پروژه‌تون استفاده کنید.

🧩 داخلش می‌تونید انواع متن‌های متحرک، پس‌زمینه‌ها، نشانگرها، افکت‌ها و انیمیشن‌های مختلف رو پیدا کنید و به‌جای ساختن همه‌چیز از صفر، سریع‌تر رابط کاربری رو جلو ببرید.

🛠️ این کامپوننت‌ها برای استفاده در پروژه‌های React و Framer طراحی شدن و امکان اتصال به ابزارهای کدنویسی هوش مصنوعی مثل Claude Code و Codex هم در نظر گرفته شده.

🚀 برای طراح‌ها و توسعه‌دهنده‌هایی که زیاد با AI و وایب‌کدینگ کار می‌کنن، OriginKit می‌تونه یه منبع آماده و کاربردی برای ساخت سریع‌تر رابط‌های جذاب باشه.

http://originkit.dev

💎 @Htmlcss_channels | #HTML #css #JavaScript

👍3🔥2❤1

984 views15:21

1:40

برای ساخت یه پس‌زمینه رنگی متحرک لازم نیست ساعت‌ها درگیر طراحی و کدنویسی بشی.

توی Gradient Lab رنگ‌ها رو انتخاب می‌کنی و جهت ترکیب، میزان محوشدن، سرعت حرکت و روشنایی رو تغییر می‌دی. آخرش هم نتیجه رو به‌شکل عکس، ویدیو یا کد آماده برای سایت می‌گیری.

backgrounds.supply/gradient-lab

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤2🔥2👍1

833 views14:15

0:46

یه نفر یه رابط کاربری ساخته به اسم Sashimi UI که ایده‌ش واقعاً جالبه.

یه UI Library که می‌خواد تا جای ممکن از قدرت خود HTML استفاده کنه؛ بدون dependency، بدون JavaScript، بدون قفل شدن به یه framework خاص و بدون کلی فایل config اضافی. یعنی برای ساخت UIهای مدرن می‌تونی از قابلیت‌های native خود وب مثل dialog، popover، فرم‌ها و interactive elementهای HTML استفاده کنی، در حالی که کدت ساده و نزدیک به خود HTML باقی می‌مونه.

خلاصه فقط HTML و بس :

github.com/yuto-hasegawa/sashimi-ui

💎 @Htmlcss_channels | #HTML #css #JavaScript

🔥4❤2👏1

840 views13:13

Make your web pages feel like as Prompt Engineering for LLMs ingle-page app

Smooth page transitions with CSS View Transitions reduce jank and improve UX.

✨ صفحات وبت رو مثل یه اپلیکیشن تک‌صفحه‌ای حرفه‌ای کن!

اگه از اون دسته طراح‌هایی هستی که می‌خوای جابه‌جایی بین صفحات وب، روان و بدون پرش باشه، وقتشه با CSS View Transitions آشنا بشی. این قابلیت جدید، همون چیزیه که اپلیکیشن‌های موبایل و SPAها رو از بقیه متمایز می‌کنه، حالا اومده تو وب.

💡 چرا View Transitions؟ چون کاربر دیگه لازم نیست بین صفحات مختلف، صفحه سفید ببینه یا منتظر لود شدن بمونه. همه چیز به‌صورت انیمیشن روان و یکپارچه اتفاق می‌افته. نتیجه؟ تجربه کاربری بهتر، حس حرفه‌ای‌تر و حس مدرن‌تر.

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤6

646 views13:52

نمونه کد عملی برای پیاده‌سازی CSS View Transitions

🎬 نمونه کد: CSS View Transitions

۱. فعال‌سازی ساده روی همه صفحات

ساده‌ترین راه، فعال‌سازی روی <html> هست. فقط کافیه این CSS رو اضافه کنی:

@view-transition {
navigation: auto;
}

همین! حالا هر جابه‌جایی بین صفحات، خودکار انیمیشن داره.

۲. شخصی‌سازی انیمیشن با @keyframes

می‌تونی تعیین کنی صفحه قدیم چطور محو بشه و صفحه جدید چطور ظاهر بشه:

::view-transition-old(root) {
animation: fadeOut 0.4s ease-out;
}

::view-transition-new(root) {
animation: fadeIn 0.4s ease-in;
}

@keyframes fadeOut {
to {
opacity: 0;
transform: translateY(-20px);
}
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
}

۳. انیمیشن اختصاصی برای یک المان خاص

فرض کن می‌خوای وقتی از یه صفحه به صفحه دیگه می‌ری، یه کارت خاص جابه‌جا بشه. کافیه بهش یه view-transition-name بدی:

<article style="view-transition-name: hero-card;">
<h1>تیتر اصلی</h1>
<p>توضیحات کارت</p>
</article>

و تو CSS:

::view-transition-old(hero-card),
::view-transition-new(hero-card) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

۴. مثال کامل: یک صفحه با دو لینک

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>دموی View Transitions</title>
<style>
@view-transition {
navigation: auto;
}

body {
font-family: sans-serif;
padding: 2rem;
background: #f5f5f5;
}

.card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
view-transition-name: main-card;
}

a {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
text-decoration: none;
border-radius: 6px;
}

::view-transition-old(root) {
animation: slideOut 0.3s ease-in;
}

::view-transition-new(root) {
animation: slideIn 0.3s ease-out;
}

@keyframes slideOut {
to { opacity: 0; transform: translateX(-30px); }
}

@keyframes slideIn {
from { opacity: 0; transform: translateX(30px); }
}
</style>
</head>
<body>
<div class="card">
<h1>صفحه اصلی</h1>
<p>روی دکمه زیر بزن تا انیمیشن جابه‌جایی رو ببینی.</p>
<a href="page2.html">برو به صفحه دوم</a>
</div>
</body>
</html>

۵. مثال با JavaScript (برای SPA)

function navigateTo(url) {
if (!document.startViewTransition) {
window.location.href = url;
return;
}

document.startViewTransition(() => {
window.location.href = url;
});
}

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤5

784 views13:53

0:23

ساخت فرم ثبت‌نام فقط چیدن چندتا فیلد کنار هم نیست؛ نمایش درست خطاها، بررسی امنیت رمز عبور و وضعیت ارسال فرم هم باید درست کار کنه.

که beUI مجموعه‌ای از کامپوننت‌های آماده و قابل شخصی‌سازیه که کدشون رو مستقیم داخل پروژه استفاده می‌کنید.
https://beui.dev/

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤1

865 views14:09

1:02

برای ساخت هر دکمه، فرم یا حالت بارگذاری لازم نیست CSS رو از صفر بنویسید.

چون UIverse بیش از ۷ هزار کامپوننت آماده و متن‌باز داره؛از دکمه و فیلد ورودی گرفته تا کارت، لودر و چک‌باکس.

هرکدوم رو آنلاین می‌بینید و کدش رو مستقیم داخل پروژه استفاده می‌کنید.

https://uiverse.io/

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤4🔥1

953 views09:53

0:18

یک قالب متن‌باز که URL یک سایت رو می‌گیره، طراحی و اجزاش رو بررسی می‌کنه و با کمک AI Agentها نسخه‌ای از اون رو با Next.js و Tailwind بازسازی می‌کنه.

طراحی، Assetها و Design Tokenها استخراج می‌شن و بخش‌های سایت به‌صورت موازی ساخته می‌شن.

https://github.com/JCodesMore/ai-website-cloner-template

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤1🔥1

917 views07:57

0:15

قابلیت جدید Claude Code با /design برای یک صفحه، طرح و پروتوتایپ بصری می‌سازه. می‌تونید ۲ یا ۳ مسیر متفاوت بخواید، مقایسه‌شون کنید و طرح منتخب رو برای پیاده‌سازی به Claude Code بسپارید

ساخت سه طرح خودکار نیست؛ تعداد گزینه‌ها رو باید در درخواست مشخص کنید.

https://claude.com/product/design

💎 @Htmlcss_channels | #HTML #css #JavaScript

🔥1

403 views13:22