html and css آموزش

👈 این ۱۵ سایت رو بشناس، سطح طراحی‌هات چند پله بالاتر می‌ره!

از طراحی سایت‌های مدرن و انیمیشن‌های خفن گرفته تا کامپوننت‌های آماده و ایده‌های UI/UX؛ این منابع می‌تونن ساعت‌ها توی وقتت صرفه‌جویی کنن!

🎨 ۱۵ منبع جذاب برای طراح‌ها و برنامه‌نویس‌ها:

https://modulify.ai/templates — قالب‌های آماده سایت
https://motionin.design — انیمیشن و موشن‌دیزاین
https://landdding.com — تکنیک‌های طراحی بصری
https://wonderlist.design — طرح‌های حرفه‌ای Figma
https://iconly.design — مجموعه آیکن‌های کاربردی
https://scrolltide.co — ایده‌های انیمیشن اسکرول
https://land-book.com — الهام طراحی سایت
https://godly.website — نمونه سایت‌های خلاقانه
https://supahero.io — ایده طراحی لندینگ‌پیج
https://footer.design — طراحی فوترهای جذاب
https://60fps.design — انیمیشن رابط کاربری موبایل
https://cta.gallery — ایده‌های دکمه و CTA
https://grainient.supply — گرادینت‌های متحرک
https://backgrounds.supply — پس‌زمینه‌های آماده
https://on.design — ابزار و فضای طراحی



💎 @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…

معرفی ابزارهای سئو با هوش مصنوعی؛ کدام‌یک رایگان هستند؟

ابزارهای سئو مبتنی بر هوش مصنوعی در سال‌های اخیر به کمک تولیدکنندگان محتوا آمده‌اند تا تحقیق کلمات کلیدی، بهینه‌سازی مقالات و تحلیل رقبا را سریع‌تر انجام دهند. در میان ابزارهای شناخته‌شده، Jasper AI دارای نسخه رایگان محدود است، اما امکانات کامل آن پولی است. ابزارهایی مانند Surfer SEO، Semrush، Frase و NeuronWriter نسخه رایگان کامل ندارند و بیشتر با دوره آزمایشی یا امکانات محدود رایگان ارائه می‌شوند. Ahrefs نیز برخی ابزارهای رایگان دارد، اما قابلیت‌های اصلی آن نیازمند اشتراک است. برای شروع بدون هزینه، ابزارهایی مانند Google Search Console، Google Trends و Keyword Planner همچنان گزینه‌های کاربردی برای بررسی وضعیت سایت و پیدا کردن موضوعات مناسب هستند.


💎   | #HTML #css #JavaScript

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

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

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

ساده‌ترین راه، فعال‌سازی روی <html> هست. فقط کافیه این CSS رو اضافه کنی:
@view-transition {
navigation: auto;
}
همین! حالا هر جابه‌جایی بین صفحات، خودکار انیمیشن داره.

۲. شخصی‌سازی انیمیشن با https://t.me/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;
});
}


💎   | #HTML #css #JavaScript