ModuleTrick 🔢

توی این اپیزود قراره روش جدیدی برای استایل دهی به المنت های مشابه داخل یک والد و یاد بگیریم⚡️

#ModuleTrick #css
@CodeModule

انواع Pseudo class ها در css3 🔵

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

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

1️⃣شبه کلاس invalid:

با استفاده از شبه کلاس invalid تو CSS میتونین برای عناصری که دارای مقدار نامعتبر (invalid) هستند، استایل دلخواه تعریف کنین.

input[type="email"]:invalid {
 border: 2px solid black;
 background-color:red;
 color:#fff;
}

2️⃣شبه کلاس first-child:

شبه کلاس first-child به شما این اجازه رو میده تا اولین فرزند هر پرنت رو بهش استایل بدید.

body p: first-child {
/*Write css codes*/
}

3️⃣شبه کلاس last-child:

برای مثال استفاده در تگ P ( یعنی تمامی تگ های P که آخرین فرزند از تگ والد ( پدرشون ) هستن رو انتخاب میکنه )

body p:last-child {
background-color:#1d7ce7;
color:#fff;
padding:5px;
}

4️⃣شبه کلاس nth-child:

می‌تونین به عنوان پارامتر، شماره اون فرزند رو وارد کنید و یا میتونین با استفاده از کلمات کلیدی ( odd یعنی فرد و even یعنی زوج ) معمولا و بیشتر در جدول ها استفاده میشه. ( مثلا گفتیم سطرهای فرد فلان رنگ زمینه و سطرهای زوج بهمان رنگ )

li:nth-child(3) {
 background-color:#e30730;
}

/* For odd tr */
table tr:nth-child(odd){
background-color:#f2f2f2;
}
 
/* For even tr */
table tr:nth-child(even){
background-color:#8AC007;
color:#fff;
}

5️⃣شبه کلاس not:

با استفاده از این شبه کلاس میتونید به هر تگی، جز اونی که کلاس یا آیدی مشخصی داره استایل مورد نظرتون رو بدید.

p:not(.free) {
background-color:green;
color:white;
text-align:center;
}

6️⃣شبه کلاس disable:

با استفاده از شبه کلاس disabled میتونین برای تگ هایی که غیرفعال هستن ( اگه از صفت disabled درون یک تگ استفاده کنیم اون تگ غیرفعال میشه ) ، استایل دلخواه تعریف کنید.

button:disabled {
background-color:red;
color: white;
}

شبه کلاس های زیادی وجود داره که هر کدوم رو نسبت به نیازمون میتونیم استفاده کنیم. ما توی این پست قصد داشتیم چند تا از پر کاربرد و جالب ترینشون رو بهتون معرفی کنیم. امیدوارم لذت برده باشید 😎

#css #styling
@CodeModule

با Autoprefixer بیشتر آشنا بشید🔵

از ابزار Autoprefixer برای افزودن پیشوندهای مرورگر (vendor prefixes) به کدهای CSS به منظور حمایت از مرورگرهای قدیمی و جلوگیری از مشکلات سازگاری مرورگرها استفاده میشه. این ابزار به طور خودکار پیشوندهای مرورگرها رو به کدهای CSS شما اضافه می‌کنه.

کد زیر و در نظر بگیرید:

div { 
  transition: all 1s ease;
 }
 

برای اینکه این استایل بهترین پشتیبانی و در مرورگرهای مختلف داشته باشه باید به صورت زیر پیشوندگذاری بشه:

div {   
 -webkit-transition: all 1s ease; 
 -moz-transition: all 1s ease;                              ‌ -o-transition: all 1s ease; 
 transition: all 1s ease;
 }

قبلنا برای اینکه مجبور به نوشتن پیشوندها به صورت دستی نباشیم از ابزارهایی مثل پلاگین های Sublime استفاده می کردیم. به مرور با بوجود آمدن پیش پردازنده هایی (preprocessor) مثل Sass و Less یا Stylus می تونستیم از mixin ها برای اضافه کردن پیشوندها استفاده کنیم.

اما این روزها بازار ابزارهایی مثل Grunt و Gulp داغ هست و میشه از بسته هایی که برای این ابزارها نوشته شده برای کارهای مختلف استفاده کرد. یکی از این بسته ها Autoprefixer هست که معروف ترین ابزار این روزها برای نوشتن پیشوندها هست و گوگل استفاده از این ابزار و توصیه می کنه 💀

برتری که Autoprefixer نسبت به دیگر ابزارهای پیشوندگذاری داره اینه که بر اساس تنظیماتی که ما براش در نظر می گیریم و بر اساس آماری که از سایت caniuse داره، عملیات پیشوندگذاری و انجام میده.


اطلاعات بیشتر و نحوه استفاده از این ابزار و میتونید تو این مقاله مطالعه کنید⚡️


#autoprefixer #css
@CodeModule

یه سایت همه فن حریف برای 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

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

‏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

واحد های اندازه گیری 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