اصن بدون آهنگ مگه میشه؟

#meme_video

Channel | Group | YouTube

در این پست چند تا از خفن ترین حالت های فیلتر کردن در css براتون شیر میکنم.

انتشار یادتون نره❤️
#CSS

Channel | Group | YouTube

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