blur:
این فیلتر یه حالت مات شده به المنت میده که خیلی اونو جذاب میکنه، توی تصویر بالا از سمت چپ به راست میتونید اثرش رو مشاهده کنید.

#CSS

Channel | Group | YouTube

Brightness:

اینم حالت روشن و تاریکی رو ست میکنه براتون، که میتونین تو استایل هاتون ازش استفاده کنید.

#CSS

Channel | Group | YouTube

Contrast:

این افکت contrast خیلی جاها بکار میاد! مثلا برای هاور ها
#CSS

Channel | Group | YouTube

Drop-Shadow:

واقعا این یکی از بهترین افکت های که ازش خیلی جاها استفاده کردم همین افکته .میاد دور اون عکسه براساس حالت شکلی که داره shadow ایجاد میکنه.

#CSS

Channel | Group | YouTube

10 روش برای تسلط بر Tailwind CSS مثل یک پرو!

پارت ۴

7. بهینه‌سازی دارک مود

فریمورک Tailwind CSS تو ایجاد نسخه‌ی دارک مود طراحی‌های شما بسیار عالی عمل میکنه. از ویژگی dark: میتونین برای اعمال استایل‌های خاص برای کاربران کقتی که از طریق جاوا اسکریپت حالت دارک‌مود رو فعال میکنن استفاده کنید تا چشمای کاربراتون اذیت نشه😉
اینجا یه مثال استفاده از ویژگی dark: رو داریم:

<div class="bg-white dark:bg-gray-800">حالت روشن و تاریک</div>

8. استفاده از JIT

حالت JIT (Just-In-Time) در Tailwind CSS به قول معروف life saver برای توسعه وب هست🗿. در این حالت تنها استایل هایی کامپایل میشن که شما اونا رو وارد کنین و نه تموم کلاسهای Tailwind و خب این به طور چشمگیری اندازه فایل و زمان ساخت رو کاهش می‌ده. حالت JIT رو میتونین تو کانفیگ پروژه‌تون فعال کنید:

// tailwind.config.js
module.exports = {
  // ...
  mode: 'jit',
  purge: [],
  // ...
}

منبع: لینک مقاله در مدیوم
#Tailwind

Channel | Group | YouTube

ساده ترین روش های نصب بوتسترپ

1.استفاده از CDN:
برای استفاده از Bootstrap از طریق CDN (Content Delivery Network)، می‌تونید لینک‌های CDN Bootstrap رو به صفحه‌ی وب خودتون اضافه کنید. به این صورت نیازی به دانلود و نصب Bootstrap بر روی سرور خودتون ندارید و می‌تونید به راحتی از نسخه‌های جدید Bootstrap استفاده کنید. مثال:

<noscript src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></noscript>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

2.استفاده از پکیج منیجر:

برای این روش، شما می‌تونین از ابزارهای پکیج منیجر مثل npm، yarn، Bower و Composer استفاده کنید که Bootstrap رو به پروژه خودتون اضافه می‌کنه. مثال:

- نصب با npm:
npm install bootstrap


- نصب با Bower:
bower install bootstrap


- نصب با Composer:
composer require twbs/bootstrap

#Bootstrap

Channel | Group | YouTube

چتو دلت میاد؟

#meme_video

Channel | Group | YouTube

10 روش برای تسلط بر Tailwind CSS مثل یک پرو!

پارت آخر

۹. درک دستورالعمل @apply

دستورالعمل @apply بهتون اجازه می‌ده که کلاس‌های کمکی قابل استفاده مجددی رو تعریف کنین و اونها رو تو CSS کاستومایز خودتون یا کومپوننت‌ها اعمال کنین، یه مثالش رو همین پایین براتون میزارم :

<style>
.btn {
@apply px-4 py-2 bg-blue-500 text-white rounded;
}
</style>

<button class="btn">دکمه طراحی شده</button>

۱۰. همیشه اپدیت باشید!

فریمورک Tailwind CSS ی هپروژه فعاله و ویژگی‌ها و بهبودهای جدید رو به طور منظم منتشر میکنه. با داکیومنت رسمی، پست‌های وبلاگ و بحث‌های انجمن از آخرین و بهترین ویژگی‌های اون استفاده کنین و به روز باشین.!
#Tailwind
منبع: لینک مقاله در مدیوم

Channel | Group | YouTube

ولکام دو مای یودوب جنل🗿

#meme_image

Channel | Group | YouTube

آخرت حق😎

#meme_image

Channel | Group | YouTube

تو این عکس میتونین انواع مختلف مقدار دهی پراپرتی padding رو ببینین👌

#CSS

Channel | Group | YouTube

عاقا یه اسکی از مهرشاد بریم😎

Mesmerising...
Now on -1k-

بقول معروف حد رو رد کردیم🔥
دیگه وقته کارای بزرگه...
خبرای بزرگی تو راهه، منتظرمون باشین

Channel | Group | YouTube

اقا چطور با استفاده از پراپرتی 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