آموزش CSS Grid در CSS

توسط قابلیت Grid می توانیم بخش بندی و گرید بندی صفحات html رو انجام بدیم، ما در این مقاله به مطالب مهم این حوزه اشاره کرده ایم. Grid برای استفاده از گرید بندی باید حالت نمایشی المان پدر رو روی حالت grid قرار دهیم. .container { display: grid; } Grid-template-columns توسط این پراپرتی می توانیم … ادامه

آموزش FlexBox در CSS

فلکس باکس (FlexBox) چیست و چه کاربردی دارد؟ Flexible Box Layout قابلیت جدید CSS است که برای مرتب کردن و طرح بندی عناصر داخلی یک کانتینر کاربرد دارد، با استفاده از فلکس باکس می می توانیم مدیریت بهتری بر روی عناصر داخلی یک بخش داشته باشیم. در ادامه با جزئیات و سایر پراپرتی های فلکس … ادامه

انیمیشن (Animations) در CSS و نحوه کار با آن

در CSS قالب های خوبی برای خلق انیمیشن های جذاب در صفحات وب وجود دارد. توسط این پراپرتی و توسط رول keyframe می توانیم انیمیشن های جذابی برای صفحات وب ایجاد کنیم. ما محدود و عامیانه توضیح دادیم، خواستی بیشتر بدونی این لینک رو ببین. /* پراپرتی مخصوص نوشتن دستورات انیمیشن در واقع داخل این … ادامه

مبحث Media Query و ریسپانسیو سازی صفحات در CSS

توسط مدیا کوئری ها در css می توانیم المان های خودمان را نسبت به عرض صفحه نمایشگر کاربر چیدمان کنیم و استایل های مختلفی برای سایز های متفاوت نمایشگر داشته باشیم. در این لینک و این لینک بصورت کامل توضیح داده شده است، ما نیز یکسری توضیحات عامیانه ای را در مقاله مطرح می کنیم. … ادامه

متغییر ها (var) در CSS

متغییر ها در CSS مثل یک ظرف هستند که داده ای رو در خود نگهداری می کنند و ما می توانیم از طریق نام متغییر می توانیم به داده هاش دسترسی داشته باشیم. فرض کنیم یک کد رنگی رو به عنوان متغییر تعریف کردیم و همه جا میتونیم بهش دسترسی داشته باشیم و دیگه نیاز … ادامه

پراپرتی transform در css

از ترانس فرم برای چرخش المان ها، بزرگ و کوچک کردن و… استفاده میشود که مقادیر زیادی را می پذیرید. ما یکسری از مقادیر مهمش رو در ادامه بررسی میکنم ولی اگر نیاز به اطلاعات بیشتری داشتید میتونید از این لینک مطالعه کنید. rotate چرخش المان، توسط rotate اتفاق می افته، که بصورت transfotm: rotate(20deg) … ادامه

مبحث transition در CSS – مدت زمان تغییر وضعیت یک المان

از پراپرتی transition برای تاخیر در تغییر وضعیت یک المانی استفاده میشه، فرض کنیم یک دکمه داریم که رنگش سبزه، و در حالت hover آن گفتیم وقتی ماوس میره روش رنگش سبز کم رنگ بشه، وقتی ماوس روش میره این تغییر رنگ با سرعت زیاد انجام میشه و یه حالت بدی رو ایجاد میکنه، ما … ادامه

بررسی توابع ریاضی در CSS

در سی اس اس هم می توان یکسری عملیات ریاضی را در کدهای css انجام داد که ما به یکسری از آنها اشاره می کنیم: Calc (1000px + 280px) با استفاده از این دستور می توان عملیات ریاضی را در دادن اعداد به پراپرتی ها استفاده کرد. به مثال زیر توجه کنید: .box { width: … ادامه

سلکتور اتری بیوت (Attribute Selector) در CSS

در css این امکان وجود داره که ما از طریق پراپرتی خاصی، بتوانیم attribute های فایل html رو انتخاب کرده و بهشون استایل بدیم. که در ادامه توضیحاتی ارائه شده است. [attribute] توی این پراپرتی می توانیم المان هایی را در html انتخاب کنیم که این اتری بیوت رو دارند، برای مثال کد زیر رو … ادامه

آموزش Pseudo کلاس و المنت در CSS و کاربرد آنها

سودو کلاس ها، در واقع کلاس هایی هستند که با : در کد سی اس اس قابل استفاده است. در ادامه برخی از Pseudo-classes توضیح داده شده است، برای کسب اطلاعات بیشتر می توانید این لینک را مشاهده کنید. root: این کلاس در واقع شبیه به html است و کدهای اعمالی به آن به تگ … ادامه