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
Smooth page transitions with CSS View Transitions reduce jank and improve UX.
✨ صفحات وبت رو مثل یه اپلیکیشن تک‌صفحه‌ای حرفه‌ای کن!
اگه از اون دسته طراح‌هایی هستی که می‌خوای جابه‌جایی بین صفحات وب، روان و بدون پرش باشه، وقتشه با CSS View Transitions آشنا بشی. این قابلیت جدید، همون چیزیه که اپلیکیشن‌های موبایل و SPAها رو از بقیه متمایز می‌کنه، حالا اومده تو وب.
💡 چرا View Transitions؟ چون کاربر دیگه لازم نیست بین صفحات مختلف، صفحه سفید ببینه یا منتظر لود شدن بمونه. همه چیز به‌صورت انیمیشن روان و یکپارچه اتفاق می‌افته. نتیجه؟ تجربه کاربری بهتر، حس حرفه‌ای‌تر و حس مدرن‌تر.
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤7
نمونه کد عملی برای پیاده‌سازی CSS View Transitions
🎬 نمونه کد: CSS View Transitions
۱. فعال‌سازی ساده روی همه صفحات
ساده‌ترین راه، فعال‌سازی روی <html> هست. فقط کافیه این CSS رو اضافه کنی:
همین! حالا هر جابه‌جایی بین صفحات، خودکار انیمیشن داره.
۲. شخصی‌سازی انیمیشن با @keyframes
می‌تونی تعیین کنی صفحه قدیم چطور محو بشه و صفحه جدید چطور ظاهر بشه:
۳. انیمیشن اختصاصی برای یک المان خاص
فرض کن می‌خوای وقتی از یه صفحه به صفحه دیگه می‌ری، یه کارت خاص جابه‌جا بشه. کافیه بهش یه view-transition-name بدی:
و تو CSS:
۴. مثال کامل: یک صفحه با دو لینک
۵. مثال با JavaScript (برای SPA)
💎 @Htmlcss_channels | #HTML #css #JavaScript
🎬 نمونه کد: 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
This media is not supported in your browser
VIEW IN TELEGRAM
ساخت فرم ثبت‌نام فقط چیدن چندتا فیلد کنار هم نیست؛ نمایش درست خطاها، بررسی امنیت رمز عبور و وضعیت ارسال فرم هم باید درست کار کنه.
که beUI مجموعه‌ای از کامپوننت‌های آماده و قابل شخصی‌سازیه که کدشون رو مستقیم داخل پروژه استفاده می‌کنید.
https://beui.dev/
💎 @Htmlcss_channels | #HTML #css #JavaScript
که beUI مجموعه‌ای از کامپوننت‌های آماده و قابل شخصی‌سازیه که کدشون رو مستقیم داخل پروژه استفاده می‌کنید.
https://beui.dev/
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
برای ساخت هر دکمه، فرم یا حالت بارگذاری لازم نیست CSS رو از صفر بنویسید.
چون UIverse بیش از ۷ هزار کامپوننت آماده و متن‌باز داره؛از دکمه و فیلد ورودی گرفته تا کارت، لودر و چک‌باکس.
هرکدوم رو آنلاین می‌بینید و کدش رو مستقیم داخل پروژه استفاده می‌کنید.
https://uiverse.io/
💎 @Htmlcss_channels | #HTML #css #JavaScript
چون UIverse بیش از ۷ هزار کامپوننت آماده و متن‌باز داره؛از دکمه و فیلد ورودی گرفته تا کارت، لودر و چک‌باکس.
هرکدوم رو آنلاین می‌بینید و کدش رو مستقیم داخل پروژه استفاده می‌کنید.
https://uiverse.io/
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤6🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
یک قالب متن‌باز که URL یک سایت رو می‌گیره، طراحی و اجزاش رو بررسی می‌کنه و با کمک AI Agentها نسخه‌ای از اون رو با Next.js و Tailwind بازسازی می‌کنه.
طراحی، Assetها و Design Tokenها استخراج می‌شن و بخش‌های سایت به‌صورت موازی ساخته می‌شن.
https://github.com/JCodesMore/ai-website-cloner-template
💎 @Htmlcss_channels | #HTML #css #JavaScript
طراحی، Assetها و Design Tokenها استخراج می‌شن و بخش‌های سایت به‌صورت موازی ساخته می‌شن.
https://github.com/JCodesMore/ai-website-cloner-template
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤2🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
قابلیت جدید Claude Code با /design برای یک صفحه، طرح و پروتوتایپ بصری می‌سازه. می‌تونید ۲ یا ۳ مسیر متفاوت بخواید، مقایسه‌شون کنید و طرح منتخب رو برای پیاده‌سازی به Claude Code بسپارید
ساخت سه طرح خودکار نیست؛ تعداد گزینه‌ها رو باید در درخواست مشخص کنید.
https://claude.com/product/design
💎 @Htmlcss_channels | #HTML #css #JavaScript
ساخت سه طرح خودکار نیست؛ تعداد گزینه‌ها رو باید در درخواست مشخص کنید.
https://claude.com/product/design
💎 @Htmlcss_channels | #HTML #css #JavaScript
🔥2
معرفی ابزارهای سئو با هوش مصنوعی؛ کدام‌یک رایگان هستند؟
ابزارهای سئو مبتنی بر هوش مصنوعی در سال‌های اخیر به کمک تولیدکنندگان محتوا آمده‌اند تا تحقیق کلمات کلیدی، بهینه‌سازی مقالات و تحلیل رقبا را سریع‌تر انجام دهند. در میان ابزارهای شناخته‌شده، Jasper AI دارای نسخه رایگان محدود است، اما امکانات کامل آن پولی است. ابزارهایی مانند Surfer SEO، Semrush، Frase و NeuronWriter نسخه رایگان کامل ندارند و بیشتر با دوره آزمایشی یا امکانات محدود رایگان ارائه می‌شوند. Ahrefs نیز برخی ابزارهای رایگان دارد، اما قابلیت‌های اصلی آن نیازمند اشتراک است. برای شروع بدون هزینه، ابزارهایی مانند Google Search Console، Google Trends و Keyword Planner همچنان گزینه‌های کاربردی برای بررسی وضعیت سایت و پیدا کردن موضوعات مناسب هستند.
💎 @Htmlcss_channels | #HTML #css #JavaScript
ابزارهای سئو مبتنی بر هوش مصنوعی در سال‌های اخیر به کمک تولیدکنندگان محتوا آمده‌اند تا تحقیق کلمات کلیدی، بهینه‌سازی مقالات و تحلیل رقبا را سریع‌تر انجام دهند. در میان ابزارهای شناخته‌شده، Jasper AI دارای نسخه رایگان محدود است، اما امکانات کامل آن پولی است. ابزارهایی مانند Surfer SEO، Semrush، Frase و NeuronWriter نسخه رایگان کامل ندارند و بیشتر با دوره آزمایشی یا امکانات محدود رایگان ارائه می‌شوند. Ahrefs نیز برخی ابزارهای رایگان دارد، اما قابلیت‌های اصلی آن نیازمند اشتراک است. برای شروع بدون هزینه، ابزارهایی مانند Google Search Console، Google Trends و Keyword Planner همچنان گزینه‌های کاربردی برای بررسی وضعیت سایت و پیدا کردن موضوعات مناسب هستند.
💎 @Htmlcss_channels | #HTML #css #JavaScript
🙏2
This media is not supported in your browser
VIEW IN TELEGRAM
یه منبع خوب برای طراحانی که دوست دارن UI هاشون از حالت خشک و تکراری در بیاد
؛𝗹𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀.𝗱𝗲𝘃 چند تا کتابخونه آماده برای افکت‌های مدرن UI رو یکجا جمع کرده؛ فعلاً چیزهایی مثل Border Beam، Thinking Orbs، Liquid Metal، Gooey و Image Effects داره و بیش از ۲۰ Variant آماده هم براشون گذاشته. نکته خوبش اینه که می‌تونی سریع Preview بگیری و مستقیم برای پروژه‌هات استفاده کنی.
برای Hero Section، Dashboard، AI Interface، Loading State و سایت‌های Motion-heavy واقعاً می‌تونه ایده‌های خوبی بده؛ مخصوصاً اگه با Claude، Codex یا Cursor سایت می‌سازی و می‌خوای خروجی کمتر Generic باشه.
🔖
https://libraries.dev/
💎 @Htmlcss_channels | #HTML #css #JavaScript
؛𝗹𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀.𝗱𝗲𝘃 چند تا کتابخونه آماده برای افکت‌های مدرن UI رو یکجا جمع کرده؛ فعلاً چیزهایی مثل Border Beam، Thinking Orbs، Liquid Metal، Gooey و Image Effects داره و بیش از ۲۰ Variant آماده هم براشون گذاشته. نکته خوبش اینه که می‌تونی سریع Preview بگیری و مستقیم برای پروژه‌هات استفاده کنی.
برای Hero Section، Dashboard، AI Interface، Loading State و سایت‌های Motion-heavy واقعاً می‌تونه ایده‌های خوبی بده؛ مخصوصاً اگه با Claude، Codex یا Cursor سایت می‌سازی و می‌خوای خروجی کمتر Generic باشه.
🔖
https://libraries.dev/
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
اینم ایده جالبیه برای کسایی که وب کار می‌کنن (با هر فریم ورکی یا حتی html خام) می‌آد و کنار پنل براتون 2700 تا ایکون اضافه می‌کنه و روشون کلیک کنید مستقیم کدش به پروژه اضافه میشه دیگه دردسر سرچ کردن توی اینترنت برای پیدا کردن ایکون رو ندارید کنار دستتونه :
marketplace.visualstudio.com/items?itemName=DevChauhan.reicon
💎 @Htmlcss_channels | #HTML #css #JavaScript
marketplace.visualstudio.com/items?itemName=DevChauhan.reicon
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤3🔥1
💥 جامع ترین دوره هوش مصنوعی و دیتاساینس در ایران!
ثبت نام با ۴۰٪ تخفیف
ویژگی‌های دوره:
📊 ۳۴۷ ساعت آموزش تخصصی
🧩 ۲۶ پروژه واقعی
💻 ۱۵۶ جلسه آموزش هیبریدی (آنلاین + ویدئوهای آفلاین)
📜 گواهی‌نامه معتبر و آمادگی برای ورود به مشاغل حوزه دیتا
🚀 دایکه از اولین آکادمی های ایران در حوزه Data & AI است که آموزش‌هایی پروژه‌محور، کاملاً کاربردی و همراه با پشتیبانی دائمی ارائه می‌دهد.
📌 امکان پرداخت اقساطی و بازگشت وجه تا دو هفته پس از ثبت‌نام
🔗 دریافت مشاوره رایگان و ثبت‌نام👇
https://www.dayche.com/s/opxr3d0b
✨تمامی دوره‌های دایکه به‌صورت مداوم به‌روزرسانی می‌شوند و شما دسترسی مادام‌العمر به محتوای جدید و کلاس‌ها دارید.
ثبت نام با ۴۰٪ تخفیف
ویژگی‌های دوره:
📊 ۳۴۷ ساعت آموزش تخصصی
🧩 ۲۶ پروژه واقعی
💻 ۱۵۶ جلسه آموزش هیبریدی (آنلاین + ویدئوهای آفلاین)
📜 گواهی‌نامه معتبر و آمادگی برای ورود به مشاغل حوزه دیتا
🚀 دایکه از اولین آکادمی های ایران در حوزه Data & AI است که آموزش‌هایی پروژه‌محور، کاملاً کاربردی و همراه با پشتیبانی دائمی ارائه می‌دهد.
📌 امکان پرداخت اقساطی و بازگشت وجه تا دو هفته پس از ثبت‌نام
🔗 دریافت مشاوره رایگان و ثبت‌نام👇
https://www.dayche.com/s/opxr3d0b
✨تمامی دوره‌های دایکه به‌صورت مداوم به‌روزرسانی می‌شوند و شما دسترسی مادام‌العمر به محتوای جدید و کلاس‌ها دارید.
Forwarded from Quera
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
یه افزونه رایگان Chrome می‌تونه سیستم طراحی هر سایتی رو استخراج کنه؛
نتیجه رو برای AI به Claude، ChatGPT، Cursor و ابزارهای دیگه می‌فرسته.
یعنی به‌جای اینکه ظاهر یه سایت رو دستی تحلیل کنی، Design System اون رو تقریباً آماده تحویل می‌گیری.
https://chromewebstore.google.com/detail/gkeiedoojhdmlaimiookeaoppgfpemij
💎 @Htmlcss_channels | #HTML #css #JavaScript
نتیجه رو برای AI به Claude، ChatGPT، Cursor و ابزارهای دیگه می‌فرسته.
یعنی به‌جای اینکه ظاهر یه سایت رو دستی تحلیل کنی، Design System اون رو تقریباً آماده تحویل می‌گیری.
https://chromewebstore.google.com/detail/gkeiedoojhdmlaimiookeaoppgfpemij
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤2
Forwarded from آکادمی همراه
🔸 محمد علی فردباستانی | مدیرکل سیستم‌های منابع سازمانی همراه اول
🔸 احمد حاجی تراب | مدیر کلان داده و خدمات داده شرکت داده‌ورزی سداد
🔸 فرشاد الله دادی | تک لید Big Data همراه اول
🔸 رامتین خسروی | عضو هیأت علمی دانشکده مهندسی برق و کامپیوتر دانشگاه تهران
🔸 حسین عیوضی | مدیر فنی تیم داده شرکت آدین
🔸 عباس فرمانی | مهندس داده همراه اول
🔸 افشین ایقانیان | راهبر تیم DevOps در مبین‌نت
🔸 عرفان طاهری | راهبر تیم SRE کارگزاری مفید
🔸 مسعود کاویانی | دانشمند داده در صبا ایده (آپارات، فیلیمو، سینماتیکت)
🔸 حامد میرنبی | مهندس ارشد شبکه در ناک
🔸 شهاب رنجبری | تک لید پلتفرم و مهندسی داده در اسنپ‌مارکت
🔸 هامون محمدیان پور | هم بنیان گذار دیتاک و مدیر مهندسی اسنپ
🔸 صادق رنجبر | VP of Engineering شرکت دیتاک
🔸 محمدرضا یوسفی‌ها | مهندس داده در شرکت فناوری اطلاعات آدین
🔸 میلاد رحیمی | تحلیل‌گر داده ارشد همراه اول
🔸 علی مدیحی | مهندس داده ارشد در شرکت Snapp Pay
⚠️ ظرفیت این بوت‌کمپ نیز محدود است.
Please open Telegram to view this post
VIEW IN TELEGRAM