Today I learned: 6 CSS Snippets Every Frontend Developer Should Know in 2025

#css #article

تاس سه بُعدی فقط با CSS

با این برنامه‌ی بسیار جالب که فقط با اسکریپت CSS بسیار هنرمندانه‌ تاس های واقعی را شبیه سازی کرده می توان بدون صدا تخته نرد هم بازی کرد!
برای چرخش تاس ها و انیمیشن نرم اونها هم از جاوااسکریپت استفاده شده.
کدنویسی با هوش مصنوعی DeepSeek

#javascript #css #html

🔶 جایگزین های رنگ سیاه #000000 در CSS

Obsidian | #0B1215 | ابسیدین

Licorice | #1A1110 | شیرین بیان

Onyx | #353839 | عقیق

Black Raisin | #242124 | کشمش سیاه

Arsenic | #3B444B | آرسینک

Oil Black | #0C0C0C | نفت سیاه

Ebony | #555D50 | آبنوس

Jet Black | #0E0E10 | کهربایی

Black Olive | #3B3C36 | زیتونی

Outer Space | #414A4C | برون فضا

Charcoal | #35454F | زغال سنگی

</Elmira Khazaei>

#CSS

@TheRaymondDev

ریویو پروژه NextJS
توی این جلسه یک پروژه تو این جلسه یک پروژه NextJS رو با هم ریویو می‌کنیم.

مشاهده ویدئو

درباره ماب ریویو:
ماب ریویو یه رویداد دوستانه و خودمونی برای انتقال تجربه دانشه.
توی این رویداد دور هم جمع می‌شیم تا یک سورس کد رو با هم ریویو کنیم و درباره پرکتیس‌های بهتر و دلایلش صحبت کنیم.

مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!
15:22 چطوری یک خط خالی توی کد روی استخدام شدن شما تاثیر می‌ذاره؟
31:30 اضافه کردن فرمتر و لینتر
33:03 از public چیزی ایمپورت نکنید
34:47 کی و چطوری باید کامپوننتمون رو بشکنیم؟
42:35 مسئله useless fragment
43:51 یکپارچگی پیاده سازی و اسم گذاری
45:15 مسئله layout
48:04 مسئله اسم گذاری
53:46 بررسی کامپوننت Banner
55:11 چرا نباید از z-index و overflow زیاد استفاده کنید
55:54 تعداد خط‌های کامپوننت Code Smell حساب می‌شه.
57:42 نحوده درست مدیریت z-index
59:51 اصل Single Responsibility تو فرانت اند
01:02:52 چه چیزهایی رو نباید توی کامپوننت برد؟
1:08:55 درک مسئله Spacing
1:11:07 پیاده سازی درست تم dark و light با taildinw
1:16:23 انکپسوله کردن مسئولیت های کامپوننت ها
1:20:07 کی از margin استفاده کنیم کی از padding
1:22:00 از grid و flex تو در تو استفاده نکنید.
1:27:34 به CSS فحش ندیم
1:28:32 فرق بین space و gap توی tailwind
1:30:25 جمع بندی

#fullstacksjs #mobreview #css #react #typescript #nextjs

🔶 فریم ورک CSS با استایل گیت هاب با Primer Style

https://primer.style/

#css

@TheRaymondDev

قابلیت جدید CSS برای ساخت Carousel
تو این ویدئو به قابلیت جدید CSS برای ساخت Carousel می‌پردازیم.

مشاهده ویدئو

این ویدئو بخشی از استریم های هفتگی جامعه ست شما هم میتونید با دنبال کردن کانال توی لایو ها شرکت کنید:
https://twitch.tv/fullstacksjs

عضویت در جامعه:
https://fullstacksjs.com

#wus #carousel #css

🔶 انیمیشن کردن المان ها با CSS

دو تا کلاس fade-in و fade-up داریم که یکی نمایش تدریجی است و دومی ظاهر شدن تدریجی همراه با حرکت به بالا است.

کد کلاس fade-in :

.fade-in {
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    animation-delay: 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

کد کلاس fade-up :

.fade-up {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

و کد بعدی اینکه انیمیشن ها با تاخیر اجرا می شود. فرض کن چهار باکس دارید و یکی یکی با تاخیر انیمیشن اجرا شود.

.delay-0 {
    animation-delay: 0.5s;
}

.delay-1 {
    animation-delay: 1s;
}

.delay-2 {
    animation-delay: 1.5s;
}

.delay-3 {
    animation-delay: 2s;
}

کلاس بندی به این صورت است :

<article class="card fade-in delay-0"></article>
<article class="card fade-in delay-1"></article>
<article class="card fade-in delay-2"></article>
<article class="card fade-in delay-3"></article>

#CSS

@TheRaymondDev

🔺توابع if/else به CSS اضافه شدن 🔥

- این ویژگی فعلاً از کروم 137 به بعد در دسترس هست

- مشاهدهٔ دمو

#css

Today I Learned: animation-composition from this article

#css #animation

🔶 چگونه یه گرید بنتو با TailwindCSS به صورت رسپانسیو ایجاد کنیم؟

کد زیر:

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 lg:grid-cols-6">
  <!-- 1 Large box spanning 2x2 -->
  <div class="rounded-xl md:col-span-2 md:row-span-2"></div>
  <!-- 2 Tall box spanning 2 rows -->
  <div class="rounded-xl md:row-span-2"></div>
  <!-- 3 Regular box -->
  <div class="rounded-xl md:row-span-3 lg:row-span-2"></div>
  <!-- 4 Wide box spanning 2 columns -->
  <div class="rounded-xl md:col-span-2"></div>
  <!-- 5 Tall box spanning 2 rows -->
  <div class="rounded-xl md:row-span-2 lg:col-span-2"></div>
  <!-- 6 Regular boxes -->
  <div class="rounded-xl md:col-span-2"></div>
  <!-- 7  box -->
  <div class="rounded-xl lg:col-span-2"></div>
  <!-- 8 Wide box spanning 3 columns -->
  <div class="rounded-xl md:col-span-3"></div>
  <!-- 9 Regular boxes -->
  <div class="rounded-xl lg:col-span-2"></div>
  <!-- 10 box -->
  <div class="rounded-xl col-span-full lg:col-span-1"></div>
</div>

#css
@TheRaymondDev

🔶 با شرط if در CSS به شما امکان می دهد سبک های شرطی را به صورت درون خطی بنویسید.

#css

@TheRaymondDev

قالب ها و آیکون های نمونه در کانال علاوه بر اینکه ایده به شما میدن کمک می کنند که اصول طراحی و سرعت بخشیدن در ساخت سایت و پنل های ادمین رو تجربه کنید:

https://t.iss.one/codinginaday/607

یادآوری:
اجرای فیلم در تصویر زمینه‌ی سایت یا برنامه، به جای عکس.

https://t.iss.one/codinginaday/601

Draft for CSS Environment Variables

https://www.w3.org/news/2025/first-public-working-draft-css-environment-variables-module-level-1

#css #env #news

🔺با این ٢٠٠ سوال مهارت CSS خودتون رو به چالش بکشین:

https://css-questions.com/

#css

The CSS Reset, again

https://pawelgrzybek.com/the-css-reset-again/

#css #reset #article

I wrote another article today
Why CSS Is So Hard for Generative AIs to Understand?

Don't forget to share if you liked it

#css #ai #tailwind #article