اقا چطور با استفاده از پراپرتی border تو css یه مثلث طراحی کنیم؟🤔
کد:

.upwards-arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid crimson; }

#CSS
#CSS_Tricks

Channel | Group | YouTube

حالا ببینیم کانفیگم وصل میشه...💔

#meme_image

Channel | Group | YouTube

عالی و قوی😎

#meme_image

Channel | Group | YouTube

دوستان میتونین تو این پست، انواع بریک‌پوینت ها رو برای اسکرین های مختلف ببینین 👨‍💻

#CSS

Channel | Group | YouTube

فیچر های جدید CSS از 2023 ---> تا 2024

-پارت 1-

1_ اضافه شدن Aspect Ratio

پشتیبانی از aspect ratio بدون شک یه ارتقای قابل توجه هست. قبلاً حفظ Aspect Ratio ها معمولاً شامل روش‌های میانبر و نامناسب مثله استفاده از ترفندهای پدینگ (padding hacks) بود که، هر چند کاربردی بودن اما به هر حال به کد پیچیدگی غیرضروری میدادن. ورود ویژگی (aspect-ratio) به دولوپرا این امکان را می‌ده که این پراپرتی رو به صورت مستقیم تعریف کنیم، که نه تنها کد رو ساده‌تر می‌کنه بلکه همچنین اطمینان حاصل می‌کند که رفتار قابل پیش‌بینی‌تری تو اندازه‌های مختلف صفحه داشته باشیم. این پشتیبانی native برای طراحی رسپانسیو مفیده و احتمالاً زمان توسعه و تست رو کاهش میده.

مثال:

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

#CSS

Channel | Group | YouTube

مخصوصا وقتی پای پروژه دلاری میاد وسط...

#meme_image

پ.ن: قصدمون شوخیه دوستان ❤️🙏

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 1 -

Channel | Group | YouTube

آخه حس میکنم اینور مارجینش بیشتره بخدا....

#meme_image

Channel | Group | YouTube

فیچر های جدید CSS از 2023 ---> تا 2024

-پارت 2-

2- اندازه ویوپورت

یکی از مسائل طولانی‌مدت تو CSS، ناپیوستگی واحدهای ویوپورت ("vh"، "vw"، و غیره) تو مرورگرها و دستگاه‌های مختلف بوده. واحدهای پویای ویوپورت تو CSS، اینجا حل این مسأله رو بر عهده گرفتن، با این امکان که کنترل دقیق‌تری روی نحوه رندر شدن المان‌ها فراهم می‌کنن و مشکلات مرورگر رو کاهش میدن. مثلا، واحدهای "dvh" و "dvw" که اشاره کردیم، ناحیه قابل مشاهده از ویوپورت رو در نظر می‌گیرن، که ساخت طرح‌هایی که با تعامل کاربرا مثله اسکرول یا زوم‌کردن سازگار باشن رو آسون تر می‌کنه.

تو سال 2023، واحدهای پویای ویوپورت تو اکثر مرورگرهای اصلی از جمله Chrome، Firefox و Safari پشتیبانی میشه. با این حال، برخی از مرورگرهای قدیمی و موبایل ممکنه که هنوز پشتیبانی محدودی داشته باشن. پس، استراتژی‌هایی مثله استفاده از توابع "calc()" با فالبک ها، برای سازگاری های گسترده‌تر استفاده می‌شن.

برای مثال به این کد رو ببینید:

.header {
    height: 50dvh; /* 50% از ارتفاع نمای قابل مشاهده */

    font-size: calc(16px + 3dvw); /* اندازه ابتدایی 16 پیکسل + 3% از عرض نمای قابل مشاهده */
    background-color: #f7f7f7;
}

در اینجا، ارتفاع ".header" نصف ارتفاع صفحه‌ی نمایش استفاده شده با "dvh" و فونت سایز از 16 پیکسل شروع و با توجه به عرض صفحه به "dvw" افزایش پیدا میکنه. به این ترتیب، می‌تونیم از واحدهای پویای ویوپورت برای طرح‌های انعطاف‌پذیر استفاده کنیم.

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 2 -

Channel | Group | YouTube

تجربه اشو داشتین؟🗿

#meme_image

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 3 -

Channel | Group | YouTube

3_Transforms

تبدیل‌ها در CSS فیچر جدیدی نیستن، اما چیز جالب اون، قابلیتیه که به شما اجازه می‌ده تا تبدیل‌هایی مثله "translate"، "rotate" و "scale" را با روش‌های پیچیده‌تری از قبل ترکیب کنین. این موضوع صد البته برای انیمیشن‌ها و ترانزیشن‌های پیچیده خیلی حیاتیه. داشتن کنترل بیشتر روی تبدیل‌های جداگونه مثله "rotate"، "translate" و "scale" واقعاً امکاناتتون رو گسترش می‌ده، از تأثیرات پارالاکس بهتر تا انیمیشن‌های روونتر. توابع جدید مانند "rotate3d" و به‌روزرسانی‌هایی برای "matrix" و "matrix3d" این کارها رو حتی آسونتر و انعطاف‌پذیرتر از قبل میکنن. این معنیش اینه که می‌تونین انیمیشن‌های پیچیده‌ای بسازین اونم بدون اینکه بیش از حد به JavaScript یا کتابخانه‌های دیگر وابسته باشین!

به عنوان مثال، اگر نیاز داشته باشیم که یه المان به اندازه 360 درجه روی یک محور قطری به طور پیوسته چرخش کنه، می‌تونیم از این کد استفاده کنیم:

@keyframes rotateAnimation {

  from {

    transform: rotate3d(1, 1, 1, 0deg);

  }

  to {

    transform: rotate3d(1, 1, 1, 360deg);

  }

}

.box {

  width: 100px;

  height: 100px;

  background-color: red;

  animation: rotateAnimation 2s infinite linear;

}

#CSS

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 4 -

Channel | Group | YouTube

تازه از --c هم استفاده میکنم🗿

#meme_image

Channel | Group | YouTube

فیچر های جدید CSS از 2023 ---> تا 2024

-پارت آخر-

اضافه شدن Nesting!
این ویژگی سالها تو Sass بوده ولی حالا...
بالاخره به css اومده😎 .

👨‍💻 با استفاده از این ویژگی بالاخره میتونیم سلکتورهای فرزند رو داخل سلکتورهای والدینشان گروه بندی کنیم!

🧑‍💻 به جای سلکتوری مثله "والد .فرزند"، می‌تونین "فرزند" رو داخل "والد" بزارین!

به عنوان مثال برای استایل دهی به یه کارت داریم:

.card {
    /* استایل‌های کارت */
}

.card:hover, 
.card:focus {
    /* استایل‌های اصلاحگر */
}

حالا بیاین از Nesting استفاده کنیم 🔥:

.card {
    /* استایل‌های کارت */
    &:hover,
    &:focus {
        /* استایل‌های اصلاحگر */
    }
}

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 5 -

Channel | Group | YouTube

میدونستین با html میتونین ایموجی به صفحه تون اضافه کنین؟🤔

#HTML

Channel | Group | YouTube