مثال CSS
- صفحه قبل پروژه grid CSS
- صفحه بعدی امتحان CSS
انتخاب‌گرهای CSS
استفاده CSS
رنگ CSS
پس‌زمینه CSS
کناره CSS
- تنظیم عرض لبه‌های چهارگانه
- تنظیم عرض لبه بالا
- تنظیم عرض لبه پایین
- تنظیم عرض لبه سمت چپ
- تنظیم عرض لبه سمت راست
- تنظیم سبک لبه‌های چهارگانه
- تنظیم سبک لبه بالا
- تنظیم سبک لبه پایین
- تنظیم سبک لبه سمت چپ
- تنظیم سبک لبه سمت راست
- تنظیم رنگ لبه‌های چهارگانه
- تنظیم رنگ لبه بالا
- تنظیم رنگ لبه پایین
- تنظیم رنگ لبه سمت چپ
- تنظیم رنگ لبه سمت راست
- تمام ویژگیهای لبه در یک بیان
- افزودن لبه‌ها به عنصر
- تنظیم لبه متفاوت برای هر چهار سمت
- تمام ویژگیهای لبه بالا در یک بیان
- تمام ویژگیهای لبه پایین در یک بیان
- تمام ویژگیهای لبه سمت چپ در یک بیان
- تمام ویژگیهای لبه سمت راست در یک بیان
حاشیه CSS
پادکسی CSS
- تعیین درون‌تراشه متفاوت برای هر چهار سمت
- استفاده از درون‌تراشه کوتاه با چهار مقدار
- استفاده از درون‌تراشه کوتاه با سه مقدار
- استفاده از درون‌تراشه کوتاه با دو مقدار
- استفاده از درون‌تراشه کوتاه با یک مقدار
- دورن‌تراشه و عرض عنصر (بدون تنظیم box-sizing)
- دورن‌تراشه و عرض عنصر (تنظیم box-sizing)
- تنظیم درون‌تراشه سمت چپ عنصر
- تنظیم درون‌تراشه سمت راست عنصر
- تنظیم درون‌تراشه بالا عنصر
- تنظیم درون‌تراشه پایین عنصر
ارتفاع/عرض CSS
حلقه CSS
متن CSS
شبکه CSS
لینک CSS
لیست CSS
جداول CSS
- تعیین لبه‌های سیاه table، th و td
- استفاده از border-collapse
- لبه‌های تک اطراف جدول
- تعیین عرض و ارتفاع جدول
- تنظیم افقی‌ترازی محتوای
- تنظیم عمودیت محتوای
- تعیین پاداش درونی th و td
- خط‌های افقی
- جدول‌های قابل تکان دادن
- جدول‌های ستونی
- تعیین رنگ لبه‌های جدول
- تنظیم موقعیت عنوان جدول
- جدول‌های پاسخگو
- ایجاد جدول‌های زیبا
نمایش CSS
محل‌یابی CSS
- محل‌یابی عناصر در برابر پنجره مرورگر
- محل‌یابی عناصر در برابر موقعیت عادی آن‌ها
- محل‌یابی عناصر با استفاده از مقادیر مطلق
- محل‌یابی چسبنده
- پوشاندن عناصر
- تنظیم شکل عنصر
- استفاده از مقادیر پیکسلی برای تنظیم لبه بالایی تصویر
- استفاده از مقادیر پیکسلی برای تنظیم لبه پایینی تصویر
- تنظیم حاشیه سمت چپ تصویر با استفاده از مقیاس پیکسل
- تنظیم حاشیه سمت راست تصویر با استفاده از مقیاس پیکسل
- مکان‌دهی تصویر و متن (به گوشه بالا سمت چپ)
- مکان‌دهی تصویر و متن (به گوشه بالا سمت راست)
- مکان‌دهی تصویر و متن (به گوشه پایین سمت چپ)
- مکان‌دهی تصویر و متن (به گوشه پایین سمت راست)
- مکان‌دهی تصویر و متن (به وسط)
پر کردن CSS
- استفاده از overflow: visible - محتوا بیش از حد نیست. آن در خارج از قاب عناصر رندر می‌شود.
- استفاده از overflow: hidden - محتوا بیش از حد است، اما محتوا اضافی پنهان می‌شود.
- استفاده از overflow: scroll - محتوا بیش از حد است، اما یک نوار اسکرول اضافه شده است تا بتوانید محتوا را مشاهده کنید.
- استفاده از overflow: auto - اگر محتوا بیش از حد باشد، باید یک نوار اسکرول اضافه شود تا بتوانید محتوا را مشاهده کنید.
- استفاده از overflow-x و overflow-y
شناور کردن CSS
- استفاده ساده از ویژگی float
- شناور کردن تصویر با حاشیه و اطراف به سمت راست سطر
- شناور کردن تصویر با عنوان به سمت راست
- گذاردن اولین حرف سطر به چپ شناور
- بستن شناور (با استفاده از ویژگی clear)
- بستن شناور (با استفاده از hack clearfix)
- ایجاد جعبه‌های شناور
- ایجاد تصاویر کنار هم
- ایجاد جعبه‌های یکسان‌سایز (با استفاده از flexbox)
- ایجاد منو افقی
- ایجاد نمونه‌ای از قالب وب
inline-block CSS
تراز عناصر CSS
- تراز به وسط با استفاده از حاشیه
- تراز متن به وسط
- تراز تصویر به وسط
- تراز چپ/راست با استفاده از position
- تراز چپ/راست با استفاده از position - راه‌حل‌های کrosس‌بستر
- تراز چپ/راست با استفاده از float
- تراز چپ/راست با استفاده از float - راه‌حل‌های کrosس‌بستر
- تراز عمودی با استفاده از padding
- تراز افقی و عمودی
- تراز عمودی با استفاده از line-height
- تراز افقی و عمودی با استفاده از position
کامپوزیتورهای CSS
کلاس CSS
عنصر CSS
تولید محتوای CSS
شفافیت CSS
منو ناوبری CSS
لیست کشویی CSS
انتخاب‌گرهای ویژگی CSS
- انتخاب همه‌ی عناصر <a> با ارزش attribute target
- انتخاب همه‌ی عناصر <a> با ارزش attribute target="_blank"
- انتخاب همه‌ی عناصر با ارزش title که شامل کلمه "flower" در لیست کلمات جدا شده با فاصله است
- انتخاب همه‌ی عناصر با ارزش class که با "top" شروع می‌شود (باید کل کلمه باشد)
- انتخاب همه‌ی عناصر با ارزش class که با "top" شروع می‌شود (باید کل کلمه نباشد)
- انتخاب همه‌ی عناصر با ارزش class که با "test" تمام می‌شود
- انتخاب همه‌ی عناصر با ارزش class شامل "te"
فرم CSS
- زمینه‌ی ورودی با عرض کامل
- زمینه‌ی ورودی پر شده
- زمینه‌ی ورودی با حاشیه
- زمینه‌ی ورودی با خط پایین
- زمینه‌ی ورودی با رنگ
- زمینه‌ی ورودی که تمرکز را دریافت کرده است
- زمینه‌ی ورودی که تمرکز را دریافت کرده است 2
- زمینه‌ی ورودی با آیکون
- میدان جستجو با اثر انیمیشنی
- تنظیم سبک فیلد متنی
- تنظیم سبک منو انتخاب‌کننده
- تنظیم سبک دکمه
- فرم پاسخ‌دهنده
گرد CSS
تصویر کناره CSS
پس‌زمینه CSS
- افزودن چندین تصویر زمینه به عنصر
- تعیین اندازه تصویر زمینه
- استفاده از "contain" و "cover" برای بزرگنمایی تصویر زمینه
- تعیین اندازه تصویر زمینه
- تصویر زمینه به اندازه کامل (کاملاً پوشش دهنده محدوده محتوای اصلی)
- استفاده از background-origin برای تعیین مکان قرارگیری تصویر زمینه
- استفاده از background-clip برای تعیین محدوده‌ای که زمینه باید ترسیم شود
تغییرات رنگ CSS
- تدرج خطی - از بالا به پایین
- تدرج خطی - از چپ به راست
- تدرج خطی - استفاده از خطوط کوتاه و بلند
- تدرج خطی - تنظیم زاویه خاص
- تدرج خطی - استفاده از چندین نقطه رنگ
- تدرج خطی - استفاده از رنگ‌های رنگارنگ + متن
- تدرج خطی - استفاده از شفافیت
- تدرج خطی - تکرار تدرج خطی
- تدرج محیطی - توزیع یکسان نقاط رنگ
- تدرج محیطی - تنظیم فاصله‌های مختلف بین نقاط رنگ
- تدرج محیطی - تنظیم شکل
- تدرج محیطی - استفاده از کلمات کلیدی اندازه‌های مختلف
- تدرج محیطی - تکرار تدرج محیطی
اثر سایه CSS
- اثر سایه ساده
- افزودن رنگ به سایه
- افزودن ابهام به سایه
- متن سفید با سایه سیاه
- سایه‌های نورانی قرمز
- سایه‌های نورانی قرمز و آبی
- متن سفید با سایه‌های سیاه، آبی و آبی تیره
- افزودن سایه ساده به عنصر
- افزودن رنگ به box-shadow
- افزودن رنگ و ابهام به box-shadow
- ایجاد تصویر کارت کاغذی مانند (متن)
- ایجاد تصویر کارت کاغذی مانند (تصویر پولی)
تأثیرات متن CSS
فونت وب CSS
تغییرات 2D CSS
- translate() - حذف عنصر از موقعیت فعلی
- rotate() - چرخش عناصر به سمت راست
- rotate() - چرخش عناصر به سمت چپ
- scale() - بزرگ کردن عنصر
- scale() - کوچک کردن عنصر
- skewX() - کج کردن عنصر در محور X
- skewY() - کج کردن عنصر در محور Y
- skew() - کج کردن عنصر در محور X و Y
- matrix() - چرخش، بزرگ‌کردن، حرکت و کج کردن عنصر
تغییرات 3D CSS
过渡 CSS
آنی‌سازی CSS
آیکون ابزار نما CSS
تصویر با استایل CSS
object-fit CSS
دکمه‌های CSS
صفحات CSS
چندین ستون CSS
رابط کاربری CSS
متغیرهای CSS
اندازه‌گیری جعبه CSS
CSS جعبه‌های انعطاف‌پذیر
- جعبه‌های انعطاف‌پذیر با سه عنصر انعطاف‌پذیر
- جعبه‌های انعطاف‌پذیر با سه عنصر انعطاف‌پذیر - مسیر rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- ترتیب عنصرهای انعطاف‌پذیر
- Margin-right:auto;
- Margin:auto; = مرکز قرار دادن کامل
- در عنصر انعطاف‌پذیر align-self تنظیم کنید
- طول عنصر انعطاف‌پذیر را نسبت به بخش‌های دیگر آن تعیین کنید
- با استفاده از جعبه‌های انعطاف‌پذیر کتابخانه‌های تصویری واکنش‌گرا ایجاد کنید
- با استفاده از جعبه‌های انعطاف‌پذیر وب‌سایت‌های واکنش‌گرا ایجاد کنید
پرسش‌های رسانه‌ای CSS
پرسش‌های رسانه‌ای CSS - مثال‌های بیشتر
- تنوع رنگ پس‌زمینه بر اساس عرض صفحه
- منو‌های ناوبری واکنش‌گرا
- استفاده از شناور برای ستون‌های واکنش‌گرا
- استفاده از Flexbox برای ستون‌های واکنش‌گرا
- پنهان کردن عناصر با استفاده از پرسش‌های رسانه‌ای
- اندازه فونت واکنش‌گرا
- کتابخانه تصاویر واکنش‌گرا
- وب‌سایت واکنش‌گرا
- تغییر قالب صفحه بر اساس جهت مرورگر
- طول حداقلی تا طول حداکثری
طراحی وب واکنش‌گرا CSS
شبکه CSS
- صفحه قبل پروژه grid CSS
- صفحه بعدی امتحان CSS
