🚨 خبر جذاب دنیای CSS! 🔥

📸 ساخت گالری‌هایی شبیه پینترست، با CSS!

🤯 قابلیتی به اسم CSS Grid Lanes در Safari 26.4 معرفی شده که امکان ساخت چیدمان‌های Masonry رو با CSS فراهم می‌کنه؛ یعنی تصاویر با اندازه‌های مختلف، مرتب کنار هم قرار می‌گیرن!

💡 چرا مهمه؟
✅ کدنویسی ساده‌تر برای گالری‌های تصویری
✅ نیاز کمتر به کتابخانه‌های JavaScript
✅ طراحی رابط‌های کاربری جذاب‌تر

⚠️ البته پشتیبانی مرورگرها رو قبل از استفاده بررسی کن!

💬 به نظرت CSS در آینده چقدر می‌تونه جای JavaScript رو در طراحی وب بگیره؟ 👀👇


#HTML
#CSS

PARSE-X 🚀

🚨 خبر مهم دنیای HTML!

گوگل در حال توسعه قابلیت HTML-in-Canvas است؛ فناوری‌ای که امکان ترکیب عناصر واقعی HTML با محیط‌های گرافیکی Canvas را فراهم می‌کند.

🔥 نتیجه؟ ساخت تجربه‌های تعاملی و سه‌بعدی پیشرفته‌تر در وب، با حفظ قابلیت‌هایی مثل دسترس‌پذیری و جست‌وجوپذیری عناصر HTML.

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

#HTML

#PARSE_X

🚨 خبر مهم دنیای CSS؛ طراحی وب در حال تغییر است!

🔥 با قابلیت جدید CSS Anchor Positioning، توسعه‌دهنده‌ها می‌تونن عناصری مثل منوهای شناور و تولتیپ‌ها رو مستقیماً نسبت به یک عنصر دیگه موقعیت‌دهی کنن.

📌 این قابلیت کنترل دقیق‌تر روی رابط کاربری رو ممکن می‌کنه و در بعضی موارد، نیاز به محاسبات دستی با جاوااسکریپت رو کاهش می‌ده.

💡 به نظرت وقتشه بخشی از کارهایی که با جاوااسکریپت انجام می‌دیم، به خود CSS بسپاریم؟

#CSS #HTML
#PARSE-X

🚀 ترفند مدرن CSS | انیمیشن ورود بدون JavaScript

با قابلیت جدید @starting-style می‌تونی برای ظاهر شدن عناصر، انیمیشن تعریف کنی؛ حتی وقتی عنصر با display: none مخفی بوده!

.card {
display: none;
opacity: 0;
transform: translateY(15px);
transition: opacity .3s, transform .3s,
display .3s allow-discrete;
}

.card.show {
display: block;
opacity: 1;
transform: translateY(0);
}

@starting-style {
.card.show {
opacity: 0;
transform: translateY(15px);
}
}

💡 نکته: با @starting-style می‌تونی حالت اولیه انیمیشن رو هنگام ظاهر شدن عنصر مشخص کنی.

بدون نیاز به JavaScript برای خود انیمیشن! 🔥

#CSS #HTML #PARSE-X

🐍 ترفند حرفه‌ای HTML & CSS

💡 می‌دونستی می‌تونی بدون JavaScript برای عناصر سایت Tooltip بسازی؟

فقط با ترکیب "data-*" و تابع "attr()" در CSS!

HTML:

<button data-tooltip="Click me!">
Hover over me
</button>

CSS:

button {
position: relative;
}

button:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #222;
color: white;
padding: 8px 12px;
border-radius: 6px;
white-space: nowrap;
}

⚡ نکته: تابع "attr()" مقدار یک ویژگی HTML رو مستقیماً داخل CSS دریافت می‌کنه.

#HTML #CSS #PARSE-X

🚨 خبر جدید دنیای CSS!

🎨 کنترل حرفه‌ای‌تر گوشه‌ها با CSS جدید!

در نسخه Chrome 157 قابلیت جدیدی به نام "corner" معرفی شده که امکان تنظیم هم‌زمان شعاع و شکل گوشه‌های عناصر رو فراهم می‌کنه.

قبلاً برای این کار باید چند ویژگی جداگانه می‌نوشتیم؛ اما حالا می‌تونیم ساده‌تر عمل کنیم:

.card {
corner: 20px squircle;
}

نتیجه؟ گوشه‌هایی با فرم نرم و منحنی‌تر، بدون کدنویسی اضافه! 🤯

🐍 CSS هر روز قدرتمندتر می‌شه!

#CSS #HTML #PARSE-X