خدمت بکند کاران عزیز🤣

#CSS
@CleverDevs
@CleverDevsGp

شورت‌هند CSS👌

#CSS
@CleverDevs - @CleverDevsGp

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

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


https://getcssscan.com/css-box-shadow-examples


#Css
@CleverDevs - @CleverDevsGp

اینطوری یقه عکسایی که alt ندارن رو بگیر

// برا دیباگ بدرد میخوره

#Css | Src
@CleverDevs - @CleverDevsGp

چهار سایت کاربردی برای فرانت‌کارا:
⁣
jonsuh.com/hamburgers⁣

larsenwork.com/easing-gradients⁣

neumorphism.io/#e0e0e0⁣

cssbuttons.app⁣

#CSS
@CleverDevs- @CleverDevsGp

هاور های جذابی میتونید با ویژگی filter تو css بسازید. برای مثال این افکت.

چند تا مثال دیگه هم میتونید تو این ویدئو که قبلا ضبط کردیم ببینید.

img {filter: grayscale (100%);}

img:hover {filter: grayscale(0%);}

#CSS
@CleverDevs - @CleverDevsGp

وقتی مارجین منفی میدی :

#Css
@CleverDevs - @CleverDevsGp

میخوام یه چیز کمتر شناخته شده تو css رو بهتون معرفی کنم که کاربرد های مختلفی داره و یکی از بهترین کارایی که میتونید باهاش بکنید ساخت chart فقط با css هستش

توی css شما میتونید با استفاده از تابع conic-gradient گرادیانت های مختلفی بسازید

میتونید طیف رنگی حلقه ای یا نمودار های دایره ای بسازید


کد پایین برای ساخت نمودار هستش

#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 0% 33%, green 33% 66%, blue 66% 100%);
  border-radius: 50%;
}

توی کد بالا به جای درصد از deg هم میتونید استفاده کنید

لینک های زیر رو هم برای اطلاعات بیشتر ببینید

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient
https://www.w3schools.com/css/css3_gradients_conic.asp

//لطفا این پست و لایک کنید و برا بقیه بفرستید یه نمونه کد دیگه هم ازش میزارم ❤️‍🔥


#Css
@CleverDevs - @CleverDevsGp

اینم یه نمونه کد برای ساختن نمودار با css

#Css
@CleverDevs - @CleverDevsGp

با استفاده از where تو css میتونی بهینه تر کد بزنی

#Css
@CleverDevs - @CleverDevsGp

زمان بندی های مختلف در #css ⏳

@CleverDevs - @CleverDevsGp

با این تیکه کد میتونی یه لودینگ ساده و باحال تو css بسازی

#Css
@CleverDevs - @CleverDevsGp

CSS Grid in 30 Seconds.

Full template and gap

#CSS
@CleverDevs - @CleverDevsGp

Css trick

#css #trick
@CleverDevs - @CleverDevsGp

👈 ‏BEM چیه؟

وقتایی که یه پروژه کوچیک داریم، شاید نام‌گذاری کلاس‌ها زیاد مهم نباشه؛ اما تو اسکیل بزرگتر این قضیه به چشم میاد.

حالا یه روشی برای نام‌گذاری بهتر کلاس‌ها، راحت‌تر شدن، سریع‌تر شدن و بهتر شدن خوانایی داریم:
BEM(Block Element Modifier).

Block:

بلاک یعنی یه بخشی از سایتتون، مثلا یه منو.

Element:

یه بخشی از اون بلاکه، مثلا آیتم همون منو.

Modifier:

طوری که اون المنت باید رفتار کنه، مثلا آیتم زرد، آیتم آبی و .. .

فرم نوشتنش هم به این صورت هست:

<div class="block>
<div class="block__element> </div>
<div class="block__element--modifier> </div>
</div>

#CSS
@CleverDevs- @CleverDevsGp

CSS center 😁

#css #fun
@CleverDevs - @CleverDevsGp

Media Query

یه چیز باحال به CSS اضافه شده😂

مشخص کردن محدوده مدیا ها رو جای این:

@media (min-width: 320px) {}

میتونیم این‌جوری هم انجام بدیم:

@media (width >= 320px) {}

#CSS SRC
@CleverDevs @CleverDevsGp

CSS Logical Properties

یه بحثی هست به اسم پراپرتی‌های منطقی که برای ما فارسی زبان‌ها خوبه که بلدش باشیم. (چون فارسی از راست به چپه)

ما میتونیم جای جهت‌های فیزیکی مثل چپ و راست از جهت‌هایی که بستگی به Rtl یا Ltr بودن HTML دارن استفاده کنیم؛ یعنی چی؟

یعنی مثلا جای

.box{
     margin-right: 24px;
}

از

.box{
     margin-inline-end: 24px;
}

استفاده کنیم.

// برای عمودی از block و افقی از inline استفاده می‌کنیم.

تو این حالت مهم نیست که سایت ما چپ‌چینه یا راست‌چین، در هر صورت المنت بعدی با کلس box بیست‌ و چهار پیکسل فاصله میگیره.

اما تو حالت اول اگه دایرکشن رو از چپ به راست به راست به چپ تغییر می‌دادیم باید یه همچین کدی هم اضافه میکردیم:

html[dir="rtl"] .box {
  margin-right: 0; 
  margin-left: 24px;
}

یسری پراپرتی‌های دیگه که میتونن از این روش پیروی کنن:

text-align, inset, padding, border

#CSS SRC
@CleverDevs @CleverDevsGp

Typography Responsive

بجای استفاده از مدیا کوئری،
یه تکنیک برای ریسپانسیو کردن تایپوگرافی‌‌ها اینه که:

1. فونت‌سایز اون متن توی کوچیک‌ترین حالت سایت رو بدست میارید
مثلا کوچیک‌ترین حالت 320px هست و فونت‌سایز اون متن هم تو این حالت 16px.

2. همینکارو برای بزرگ‌ترین حالت هم انجام میدیم مثلا 1280px حداکثر سایز سایته و تو این حالت فونت‌سایز 28px هست.

3. حالا این اطلاعات رو طبق عکس وارد این سایت میکنیم:
Fluid Typography Calculator

4. و بوم یه فانکشن clamp بهمون میده و فونت‌سایز اون متن رو برابر باهاش قرار میدیم.

#Design #CSS #Tool
@CleverDevs @CleverDevsGp