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
❤6
نمونه کد عملی برای پیاده‌سازی 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
❤1
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
❤4🔥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
❤1🔥1
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
🔥1
معرفی ابزارهای سئو با هوش مصنوعی؛ کدام‌یک رایگان هستند؟
ابزارهای سئو مبتنی بر هوش مصنوعی در سال‌های اخیر به کمک تولیدکنندگان محتوا آمده‌اند تا تحقیق کلمات کلیدی، بهینه‌سازی مقالات و تحلیل رقبا را سریع‌تر انجام دهند. در میان ابزارهای شناخته‌شده، 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
Forwarded from آکادمی همراه
در بوت‌کمپ «برنامه‌نویسی Front-end» آکادمی همراه اول، فقط مفاهیم را یاد نمی‌گیری؛ از پایه شروع می‌کنی، تمرین می‌کنی و آموخته‌هایت را به پروژه‌های واقعی وب تبدیل می‌کنی.
Please open Telegram to view this post
VIEW IN TELEGRAM