یه سایت همه فن حریف برای css 🔵

با استفاده از این سایت، میتونید استایل های مختلفی مثل gradient, boxShadow borderRadius ,transform, border و ... رو ایجاد، و تو پروژه هاتون استفاده کنید 😎


➡️Website◀️

#tools #css
@CodeModule

🎮 بازی کن، یاد بگیر !

تو این سایت شما میتونید با بازی کردن در یک مزرعه، کل CSS Grid و مثل آب خوردن یاد بگیرید 😉

حتما بهش سر بزنید 🔥

➡️Website◀️

#css #grid
@CodeModule

با استفاده از این سایت، Clip path کاستوم خودت رو بساز 🔥

سایت Bennett Feely's Clippy یک ابزار آنلاینه که به کاربران این اجازه رو میده، تا به راحتی CSS clip-path کاستوم خودشون رو ایجاد کنن. این ابزار به شما کمک می‌کنه تا با استفاده از رابط گرافیکی، اشکال مختلف رو برش بدید و در نهایت کد CSS مربوط به اون رو دریافت کنید.

پ.ن: clip-path به شما این امکان رو میده که با برش دادن یک عنصر به یک شکل (دایره، بیضی، چند ضلعی و ...) اشکال پیچیده در CSS و وبسایت ایجاد کنید.

🔵Website

#css #clippath #tools
@CodeModule

🔵 با استفاده از این سایت، Box Shadow کاستوم خودت رو بساز !

سایت Css Matic یک ابزار آنلاینه که با استفاده ازش میتونید به صورت دستی، Box Shadow دلخواه خودتون رو تنظیم و بسازید و خروجی کد Css ای اون رو، مشاهده و کپی کنید ✈️

همچنین قابلیت های دیگه ای، مثل ساخت gradient و border radius رو هم داره.


🔵 Box Shadow Generator


#tools #css
@CodeModule

🔵 با تابع calc در Css بیشتر آشنا بشید!

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

این تابع بخصوص برای انجام عملیات ریاضی بر روی مقادیر نسبی (مثل em, rem, vw, %) بسیار کاربردی و مفیده. در مثال زیر عرض یک عنصر نسبت به عرض عنصر نگهدارنده اون (والدش) محاسبه شده :

.element { 
  margin-right: calc(10% + 5px); 
} 

⚠️ توجه داشته باشید که باید بین علامت ریاضی، جمع و تفریق و مقادیر، یک فاصله وجود داشته باشه، در غیر این صورت استایل درست محاسبه نمیشه و با مشکل رو به رو میشیم.

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

  margin-right: calc(10% -5px); /* خطا */ 
  margin-right: calc(10% +5px); /* خطا */ 
  margin-right: calc(10%/5px);  /* صحیح */ 
  margin-right: calc(10%*5px);  /* صحیح */

با استفاده از این تابع، میتونید دقیق تر و حساب شده تر مقادیر پراپرتی هاتون رو حساب کنید. نمونه مثال بیشتر و سایر اطلاعات رو میتونید تو مقاله زیر مطالعه کنید 🏖️

🔵Article

#css #calc
@CodeModule

کدهای CSS اضافه رو پاک کن! 🔵

در واقع Purgecss ابزاریه که کدهای CSS بلااستفاده رو حذف می‌کنه، و شما می‌تونید از این ابزار به عنوان قسمتی از چرخهٔ توسعهٔ پروژتون استفاده کنید.

شما ممکنه به عنوان یک طراح وب‌سایت از فریمورک‌هایی نظیر Bootstrap ،Foundation و ... استفاده کنید، اما در نهایت شما قسمت اندکی از این فریمورک‌ها رو استفاده می‌کنید و قسمت اعظم استایل‌های CSS موجود در این فریمورک‌ها، بلااستفاده میمونن که باعث میشه حجم فایل هاتون زیاد بشه.

اینجا PurgeCSS به شما کمک می‌کنه که کدهای CSS اضافی و غیرضروری، که در فایل‌های CSS شما وجود دارن رو حذف کنید و به این‌ ترتیب، حجم فایل‌های CSS کمتر میشه.

در نهایت استفاده از PurgeCSS می‌تونه به بهینه‌سازی و بهبود عملکرد پروژتون کمک زیادی کنه. برای اطلاعات بیشتر و نحوه استفاده از این ابزار، میتونید داکیومتش رو مطالعه کنید.

Document 🌕

#purgecss #css
@CodeModule

در به در دنبال ابزار‌های کاربردی css نباش 🔵

سایت زیر مجموعه‌ای از بهترین ابزار‌های کاربردی و مهم css رو جمع آوری کرده، و به راحتی میتونید ابزار مد نظرتونو پیدا و استفاده کنید 💀

🔵Website

#css #tools
@CodeModule

5 تا از بهترین سایت‌های ارائه دهنده قالب‌های Html/Css 💀

🔵html5up

🔵freehtml5

🔵styleshout

🔵free-css

🔵tooplate

#template #html #css
@CodeModule

😎با Webkit بیشتر آشنا بشید

🟡‏WebKit یک موتور رندر صفحات وبه که هسته‌ی مرکزی مرورگر در نمایش محتوای صفحات سایت‌هارو تشکیل میده.

وظیفه‌ی اصلی Webkit، تجزیه و تحلیل کدهای HTML و XHTML و ... و تولید و نمایش ظاهر صفحه هست. در واقع، مرورگر واسطه‌ای بین کاربر و موتور رندر هست و وظایف دیگه ای مثل برقراری ارتباط با اینترنت، مدیریت امنیت، تجربه‌ی کاربری و آپدیت هارو بر عهده داره. همچنین Webkit از سیستم‌عامل‌های mac os، windows، linux و سیستم‌عامل‌های شبه‌ یونیکسی پشتیبانی میکنه.

✅مزایای استفاده از Webkit چیه؟

🟢سرعت بالا

🟢عملکرد قابل اعتماد

🟢امنیت بالا

🟢پشتیبانی از جدیدترین استانداردهای وب

🟢سازگاری با طیف وسیعی از سیستم‌عامل‌ها

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

⚡️پیشوند موتور های مختلف : پیشوند موتور Gecko در فایرفاکس "moz" و پیشوندهای نسخه‌های قدیمی مرورگرهای اینترنت مثل اکسپلورر و اوپرا "ms" و "o" بودن.

امروزه، مرورگر Edge هم از موتور webkit استفاده میکنه و مرورگر اوپرا هم محتوای صفحات وب رو با استفاده از webkit نمایش میده. وقتی که یک ویژگی اختصاصی به صورت استاندارد در میاد، پیشوند اون حذف میشه.

🟡مرورگرها ممکنه تا مدت‌ها از دستورات با پیشوند پشتیبانی کنن و حتی پیشوندهای اختصاصی مرورگرهای دیگه رو هم شناسایی کنن. یک مثال از استفاده Webkit ها در css :

.CodeModule {
  width: 500px;
  height: 500px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}

و در نتیجه Webkit یک موتور رندر قدرتمند، و سریعه که در طیف وسیعی از برنامه‌ها از جمله مرورگرهای وب، برنامه‌های کاربردی وب و ابزارهای توسعه وب استفاده میشه. Webkit به طور مداوم در حال توسعه و آپدیته و جدیدترین استانداردهای وب رو ساپورت میکنه 🏖️


#webkit #browser #css
@CodeModule

5 کتابخانه کاربردی CSS-in-JS 🚀

کتابخانه‌های موسوم به CSS-in-Javascript، اخیرا به شدت روند رو به رشدی داشتن و در حال محبوب شدن هستن. در این پست ۵ کتابخانه مطرح و مرتبط با این موضوع رو براتون جمع آوری کردم⬇️

1️⃣STYLED COMPONENTS

2️⃣JSS

3️⃣EMOTION

4️⃣RADIUM

5️⃣STYLETRON

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

#css #js
@CodeModule

با این ابزار خلاقیت رو به اوج برسون 🚀

‏Bennett Feely یک وبسایت هست که ابزارهای خلاقانه و کاربردی بهتون ارائه میده، که با استفاده از این ابزارها میتونید به سادگی و بدون نیاز به دانش تخصصی، ایده‌های خودتون رو به واقعیت تبدیل کنید.

برخی از ابزارهای Bennett Feely ⬇️

‏* ztext.js: تایپوگرافی 3 بعدی رو به هر وب‌سایت و فونت دلخواهی اضافه کنید.

‏* CSS Scales: این ابزار به شما امکان میده مقیاس‌های رنگی رو از ColorBrewer و van der Walt، Smith و Firing به صورت گرادیانت دریافت کنید.

‏* CSS Pie Chart: با استفاده از گرادیانت‌های مخروطی، نمودارهای دایره‌ای رو به سادگی بسازید.

علاوه بر اینا، ابزار های مختلف دیگه ای هم داره که در توسعه پروژه‌ها بهتون کمک میکنه. پیشنهاد میکنم یه سر به وبسایتش بزنید 💀


#tools #css
@CodeModule

5 وبسایت خفن که بهت لودینگ های خیره‌کننده css تحویل میدن!! 🔵

1⃣freefrontend-css-loaders

2⃣loading.io

3⃣spinkit

4⃣preloaders

5⃣css-loaders

#loading #css
@CodeModule

22 نکته و ترفند مفید CSS که هر دولوپری باید از اونها مطلع باشه. پیشنهاد میکنم مقاله زیر رو از دست ندید ❗️

♻️Article

#css
@CodeModule

مدیریت کلاس ها با پکیج classnames 😎

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

این امر به خصوص در مواقعی که نیاز به اعمال چندین کلاس بر اساس شرایط خاص دارید، بسیار مفیده.

برای کسب اطلاعات بیشتر به داکیومنت این کتابخانه مراجعه کنید ⬇️

🌐Document

#classnames #css
@CodeModule

واحد های اندازه گیری svh , dvh , vh و تفاوت هاشون در css 🔵

🔵در CSS، واحدهای اندازه‌گیری dvh، svh و vh به ترتیب به معنای "درصد ارتفاع نمای دید" (viewport height) هستن، اما هر کدوم کاربرد و رفتار خاص خودشون رو دارن.

1️⃣‏vh (Viewport Height) :

 این واحد به معنای 1 درصد از ارتفاع نمای دید (viewport) هست. به عنوان مثال، 100vh برابر با 100 درصد از ارتفاع نمای دیده.و اگر کاربر اندازه پنجره مرورگر رو تغییر بده، اندازه‌های مبتنی بر vh نیز به طور اتوماتیک تغییر میکنه.

2️⃣‏dvh (Dynamic Viewport Height) :

این واحد مشابه vh هست، اما به طور خاص برای نمای داینامیک طراحی شده. به این معنی که dvh به تغییرات ارتفاع نمای دید در حین نمایش محتوای پویا (مثل کیبورد موبایل) حساسه. به عنوان مثال، اگر کیبورد در دستگاه‌های موبایل باز بشه، dvh ممکنه کمتر از vh باشه چون ارتفاع قابل مشاهده کاهش پیدا می‌کنه.

3️⃣‏svh (Small Viewport Height) :

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

‼️تفاوت‌های این واحد های اندازه گیری :

تغییرات داینامیک: dvh و svh به تغییرات دینامیک در صفحه (مثل باز شدن کیبورد) حساس‌تر هستند، در حالی که vh ثابته.

✅و برای طراحی‌های واکنش‌گرا و بهینه‌سازی تجربه کاربری در دستگاه‌های موبایل، استفاده از dvh و svh می‌تونه مفیدتر باشه.

این واحدها به شما کمک می‌کنن تا تجربه کاربری بهتری رو در دستگاه‌های مختلف فراهم کنید.

#css #styling
@CodeModule