#tools #website #css #grid #tailwind

● با این سایتا لنگ گرید نمیمونی ●

وقتی با گرید در CSS کار می‌کنیم، خیلی پیش میاد که بعضی از پروپرتی های مهم رو فراموش کنیم و نتونیم طرحی که در ذهن خودمون داریم رو به درست ایجاد کنیم 🫠

میخوام سه تا سایت جالب بهتون معرفی بکنم که میتونید خیلی ساده با UI خوبی که براتون آماده کردند Grid مد نظر خودتون رو پیاده سازی کنید 😎

1️⃣ https://cssgrid-generator.netlify.app

2️⃣ https://grid.layoutit.com

3️⃣ https://visual-grid-generator.netlify.app

اگر هم دوست داشتید به طور کامل تر در مورد Grid داخل CSS اطلاعات کسب کنید میتونید از طریق داکیومنت زیر اقدام کنید 📄

https://learncssgrid.com


البته هنوز تموم نشده، اگر از tailwind استفاده میکنید میتونید از سایت tailwindgen استفاده بکنید که میاد گرید دلخواهتون رو با استفاده از class های tailwind براتون ایجاد میکنه و با فرمت HTML یا JSX خروجی رو براتون می‌فرسته 🤩 🔥

https://www.tailwindgen.com


Channel | YouTube | Instagram

#tools #website #css #csstrciks

●● معرفی وبسایت css-tricks ●●

وبسایت CSS-Tricks یه منبع خیلی پرطرفدار و معتبر بین توسعه‌دهندگان وبه که بیشتر روی #css و ترفندهای مربوط به طراحی و توسعه وب تمرکز داره. این سایت رو کریس کویر تو سال ۲۰۰۷ راه انداخت و با ارائه مقالات، راهنماها، نمونه کدها و کلی ترفندهای جذاب، خیلی زود تو جامعه توسعه‌دهندگان شناخته شد و محبوبیت پیدا کرد.

💎 ویژگی های کلیدی این وبسایت 💎

🔹 ایده‌ها و الهام‌های جدید برای طراحی خلاقانه‌تر بهتون می‌ده.

🔹 کدهای آماده (Snippets) ارائه می‌ده که سرعت کدنویسی‌تون رو افزایش می‌ده.

🔹 شما رو با ابزارها و فریم‌ورک‌های مدرن مثل React و Vue.js آشنا می‌کنه.

به طور کلی، CSS-Tricks به شما کمک می‌کنه تا با یادگیری اصول و تکنیک‌های جدید، بهینه‌تر و حرفه‌ای‌تر در طراحی صفحات عمل کنید 👌

🌐 مشاهده وبسایت

Channel | Group | YouTube

#css #animation

●● آشنایی با Keyframes ها در CSS ! ●●

با استفاده از Keyframes ها در CSS میتونید انیمیشن‌های جذاب و کاربردی با دستورای CSS بسازید و خیلی ساده با درصدها یا کلمه کلیدی (from, to) تغییرات استایل را در طول انیمیشن مشخص می‌کند.

نکته مهمی که هست اینه که بعضی از کامپوننت هارو با تیلویند در اختیارتون قرار میده و اگر هم نبود میتونید بدید چت جی‌پی‌تی و بهش بگید تبدیلش کنه به کد tailwind ⚡

🆔 Channel | Group | YouTube

#website #css

🔸 اگر به طراحی با سبک نئومورفیسم علاقه مندی ولی نمیتونی طرح مورد نظرتو پیاده کنی این سایت بهت کمک می‌کنه تا هر حالتی که میخوای رو باهاش بسازی

این سایت با گزینه های کاربردی که داره بهت کمک می‌کنه که المنتت رو به هر شکلی که میخوای در بیاری و در نهایتم کد css تحویلت میده 🚀

🌐 مشاهده وبسایت

🚀 @coolycode

💎 تفاوت Box-Shadow و Drop-Shadow در CSS 💎

🌐 مشاهده ویدیو در اینستاگرام

#️⃣ #vs #css #shadow

🚀 @coolycode

●● دلایل ایجاد overflow در صفحات html ●●

🔸 احتمالا برای شما هم پیش اومده که در حال کار بر روی یک صفحه وب هستید و ناگهان متوجه اسکرول افقی در صفحه میشوید، توی این مطلب دلایل بروز این مشکل رو بررسی میکنیم

1️⃣ استفاده از واحدهای ثابت مانند px برای عرض

اگر از واحدهای ثابت مثل px برای عرض یک عنصر استفاده کنید و این عرض بیشتر از اندازه ویوپورت باشد، اسکرول ایجاد می‌شود.

راه حل ها :

● ریسپانسیو کردن المنت ها و جلوگیری از بروز این مشکل در سایز های کوچک تر.

● استفاده از واحدهای نسبی مثل % یا vw این.

.element {
  width: 100vw;
}

2️⃣ عدم تنظیم صحیح box-sizing

به صورت پیش‌فرض، ویژگی padding و border به عرض یک عنصر اضافه می‌شوند، که ممکن است باعث شود عرض کلی عنصر از مقدار مورد انتظار بیشتر شود و اسکرول ایجاد کند و راه حل برطرف کردنش استفاده از box-sizing: border-box هستش.

راه حل :

* { box-sizing: border-box; }

استفاده از box-sizing: border-box باعث می‌شود padding و border داخل عرض اصلی محاسبه شوند.

3️⃣ استفاده از position: absolute یا position: fixed

اگر عنصری با استفاده از position: absolute یا position: fixed از ویوپورت خارج شود، می‌تواند اسکرول افقی ایجاد کند.

مثال :

.out-of-bounds { position: absolute; left: 2000px; } 

4️⃣ عدم مدیریت صحیح کلمات بلند یا لینک‌ها

متن‌ها یا لینک‌های بسیار بلند که در یک خط قرار می‌گیرند (مانند لینک‌های طولانی یا کلمات بدون فاصله) می‌توانند عرض صفحه را بشکنند و اسکرول افقی ایجاد کنند.

راه حل :

استفاده ویژگی‌های word-break و overflow-wrap باعث میشه تا مرورگر در صورت برخورد با کلمات بلند، اونها رو به صورت خودکار شکسته و در خطوط جدید قرار دهد.

.long-text {
  word-break: break-all;
  overflow-wrap: break-word;
}

✅ راه‌حل جامع

برای جلوگیری از اسکرول افقی در کل صفحه می‌تونید از ویژگی overflow-x: hidden استفاده کنید، اگر نیازی به اسکرول افقی ندارید.

نحوه استفاده :

body { overflow-x: hidden; }

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

💎 توی این مطلب سعی کردم تمامی مواردی که میتونن باعث اسکرول افقی در صفحه بشن رو بهتون توضیح بدم

اگر براتون کاربردی و مفید بود حمایت یادتون نره، برای رفقاتونم بفرستید تا استفاده کنن 🔥❤️

#️⃣ #overflow #css #webpage

🚀 @coolycode

یه سایت براتون آوردم که باهاش می‌تونید این اشکال خفن رو رو به سادگی ایجاد کنید 🔥🤩

این اشکال درواقع با border-radius ساخته میشن و خودتون به صورت دستی هم میتونید ایجادش کنید ولی مشکلی که وجود داره اینه که خیلی باید تغییرش بدید تا به شکل دلخواهتون برسید و این سایت کارتون رو خیلی ساده کرده

لینک این سایت و ریپازیتوی گیت هابش رو زیر این پست تو چنل براتون میزارم

#️⃣ #website #css #shape

🚀 @coolycode

💎 وریبل‌ها در CSS 💎

وریبل‌ها در CSS به شما این امکان رو می‌دن تا مقادیر تکراری مانند رنگ‌ها، اندازه‌ها و فونت‌ها را یک‌بار تعریف کرده و در کل کدهای CSS خود از آن‌ها استفاده کنید. این قابلیت به افزایش خوانایی و مدیریت بهتر کد کمک می‌کند.

نحوه تعریف و استفاده از وریبل‌ها 🚀

➊ وریبل‌ها در CSS با استفاده از -- تعریف می‌شوند و برای دسترسی به آن‌ها از تابع var() استفاده می‌کنیم

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

توی کد بالا وریبل های خودمون رو در شبه کلاس :root تعریف کردیم

➋ حالا برای استفاده از وریبل‌ها در بخش‌های مختلف CSS، کافی است آن‌ها را با تابع var که بالاتر گفتیم فراخوانی کنیم

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--secondary-color);
  font-size: var(--font-size);
}

تو کد بالا رنگ و اندازه فونت عناصر body و button رو با وریبل‌های CSS مقدار دهی کردیم.

#️⃣ #css #css_variables

🚀 @coolycode

💎 شبه‌کلاس root در CSS 💎

شبه‌کلاس root در CSS به عنصر ریشه (یا بالاترین عنصر) در سند HTML اشاره می‌کنه. این شبه‌کلاس یکی از اجزای کلیدی CSS به شمار می‌ره، به‌ویژه وقتی که از متغیرهای CSS ( نمونه استفاده ازش رو در پست های قبلی داشتیم ) استفاده می‌کنیم.

اولویت ( priority ) در :root به چه شکله ؟ 🚀

شبه‌کلاس هایی مثل hover ,focus و root نسبت به انتخابگرهای تگ ( مثل div یا html ) اولویت بیشتری دارن.

یعنی اگر استایل یکسانی هم در انتخابگر تگ و هم در شبه‌کلاس :root تعریف کنید، استایل :root اعمال خواهد شد 🔻

:root {
  --bg-color: lightblue;
}

html {
  --bg-color: pink;
}

body {
  background-color: var(--bg-color); /* پس‌زمینه آبی روشن خواهد بود */
}

تعاملش با جاوااسکریپت چطوره ؟ 💥

جاوااسکریپت به خوبی این مورد رو هندل کرده و شما میتونید متغیرهای تعریف‌شده در :root رو با جاوااسکریپت به صورت داینامیک تغییر بدید، مثل تغییر تم وبسایت.

مثال :

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

توی کد بالا، مقدار متغیر --primary-color به #e74c3c تغییر می‌کنه، و تمام عناصری که از این متغیر استفاده می‌کردند، به روز می‌شن.

امیدوارم حسابی از این پست لذت برده باشی، اگر دوست داشتید با ری‌اکشناتون بهمون انرژی بدید ❤️

#️⃣ #css #root

🚀 @coolycode

اگر سیستمت در دسترس نیست، Tailwind Play بهترین راهه!

با Tailwind Play میتونی یک محیط آنلاین سریع و رسمی برای آزمایش و کدنویسی با Tailwind CSS داشته باشی و بدون نیاز به نصب نتیجه رو در لحظه ببینی

راستی نکته جالبی که وجود داره اینه که میتونی کدت رو سیو کنی و با لینکی که بهت میده با بقیه به اشتراک بزاری 💥

🌐 مشاهده Tailwind Play

✅ نمونه کد ایجاد شده با Tailwind Play

#️⃣ #website #tailwind #css

🚀 @coolycode

حتما از گرداری توی وبسایتتون استفاده کنید ☺️🤌

توی پست جدید یه سایت جالب، در عین حال ساده و کاربردی بهتون معرفی کردم که میتونید باهاش ازین شکلای گردالی خفن و باحال بسازید ✅

پ.ن : مشاهده از یوتوب رو‌ هم اضافه کردیم برای رفقایی که از یوتوب استفاده میکنن 🚀

#️⃣ #NEWPost #css #website‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

بررسی کامل فریمورک TailwindCss 🚀

تیلویند چیه اصلا ⁉️

تیلویند درواقع یه فریمورک CSS‌ای سبک برای طراحی سایته که به جای نوشتن کدهای جداگانه‌ی CSS، از کلاس‌های آماده استفاده می‌کنی یا به اصطلاح همون utility ها.

مثلاً به جای اینکه توی فایل CSS بنویسی دکمه پس‌زمینه آبی و متن سفید داشته باشه، فقط توی HTML کلاس‌های bg-blue-500 و text-white رو اضافه می‌کنی.


مزایا ✅

🎨 قابلیت کاستومایز کردن بسیار بالا

یکی از مهم ترین قابلیت های تیلویند این مورده، چون شما میتونید کلاس‌های سفارشی، تم‌ها، و حتی پلاگین‌های اختصاصی خودتون رو بسازید.

🔝 سبک و بهینه

تیلویند فقط کلاس‌هایی رو که در پروژه استفاده شده‌اند، در خروجی نهایی تولید میکنه (با استفاده از PurgeCSS). این باعث میشه که فایل‌های CSS نهایی بسیار کوچک‌تر از فریمورک‌هایی مثل Bootstrap باشن.

💡 یادگیری نسبتاً ساده

در مقایسه با فریمورک‌هایی که نیاز به یادگیری سیستم گرید و کامپوننت‌های از پیش ساخته‌شده دارند، یادگیری Tailwind آسون‌تره، مخصوصاً برای کسایی که با CSS آشنایی خوبی دارن، ولی خب اولش یه تایم خوبی رو ازتون میگیره تا خوب و دقیق تر باهاش آشنا بشید.

❌ معایب

⏳ زمان توسعه نسبتاً طولانی‌تر

چون Tailwind کامپوننت‌های آماده (مثل دکمه، فرم، مودال) ارائه نمیده، شما باید این موارد رو خودتون بسازید و این میتونه زمانگیر باشه، مگر اینکه از یک کتابخانه‌ی مبتنی بر Tailwind مثل DaisyUI یا Flowbite استفاده کنید.

⁉️ فرآیند ریسپانسیو سازی دشوارتر

تیلویند بر خلاف برخی از لایبرری ها، یک سیستم گرید آماده نداره ولی با کلاس‌های responsive utility-first مثل sm:, md:, lg: این کار کاملاً امکان‌پذیر است، صرفا شیوه‌ اینکار متفاوت تره و خودتون باید انجامش بدید.

❌ محدودیت‌ در طراحی‌های پیچیده

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

#CSS | #Tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

➖➖➖➖➖➖➖➖➖

🔳 مقایسه Tailwind و Bootstrap

همونطور که در جریان هستین؛ تیلویند و بوت استرپ دوتا از محبوب ترین فریمورک های css هستن که خیلیا وقتی میخوان یه css فریمورک انتخاب کنن؛ واسه انتخاب یکی از این دوتا توی دوراهی میمونن.

البته که توی چند سال اخیر استفاده از تیلویند افزایش بسیار چشم گیری داشته و محبوبیت بوت‌استرپ خیلی کمتر شده و ما میخوایم توی این پست این مسئله رو به طور کامل باز کنیم و ببینیم چه مزیت ها و معایبی دارند هردوشون

تیلویند | Tailwind

مزایا ✅
➊ قابلیت کاستومایز سازی بسیار بالا
➋ فوق‌العاده سبک و بهینه، بخاطر ساختارش
➌ یادگیری نسبتاً ساده
➍  پروسه استایل‌دهی سریع‌.

معایب ❌
➊ محدودیت‌ در طراحی‌های پیچیده
➋ جدا نبودن استایل ها و HTML، که میتونه باعث شلوغ شدن کد‌ها بشه، و خب این مورد توی بوت‌استرپ کمتر دیده میشه چپن کامپوننت های از پیش اماده داره

بوت‌ استرپ | Bootstrap

مزایا ✅
➊ وجود کامپوننت های از پیش آماده
➋ وجود grid system برای ریپانسیو سازی

معایب ❌
➊ شباهت زیاد به بقیه سایت هایی که از بوت‌استرپ استفاده میکنند و یونیک نبودن
➋ نیاز مند تایم بیشتر برای یونیک کردن کامپوننت ها
➌ حجم بالا و تاثیر منفی بر روی پرفرمونس، به دلیل عدم وجود بهینه سازی های مناسب

البته مورد سوم توی بوت‌استرپ ۵ بهتر شده 🔺

📊 نتیجه گیری

از این مقایسه میشه نتیجه گرفت که برای توسعه پروژه هایی که دیزاین منحصر به فردی دارن و در مقیاس بزرگ تری هستن، بهتره که از Tailwind استفاده بشه؛ ولی برای پروژه هایی که تایم کمی دارن و یا دیزاین و پرفورمنس در اولویت نیست، بوت استرپ هم میتونه انتخاب خوبی باشه ✅

#framework #css #tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

➖➖➖➖➖➖➖➖➖