CSS مثال
- پچھلے ویب CSS گرید آئٹم
- پائیدار ویب CSS معتبر
انتخابگر CSS
استفاده CSS
رنگ CSS
پسزمینه CSS
- پیج کی پس منظر رنگ کا سٹ
- مختلف عناصر کی پس منظر رنگ کا سٹ
- تصویر کو پیج کا پس منظر بنائیں
- پس منظر تصویر کو صرف افقی طور پر کسپی کرنا
- پس منظر تصویر کا مقام نکالنا کا طریقہ
- پس منظر تصویر کا ساٹشائز (یہ تصویر پیج کی بقیہ جگہ کے ساتھ نہیں رول آؤٹ ہوتی)
- تمام پس منظر کا حصہ کا ایک کیمن کیمن استعمال کریں
- اعلیًک پس منظر مثال
کناره CSS
- چار کیرنل پیدائی کی چوڑائی کا سٹ
- اوپر کیرنل پیدائی کی چوڑائی کا سٹ
- نیچلی کیرنل پیدائی کی چوڑائی کا سٹ
- بائیں کیرنل پیدائی کی چوڑائی کا سٹ
- دائیں کیرنل پیدائی کی چوڑائی کا سٹ
- چار کیرنل پیدائی کا انداز کا سٹ
- اوپر کیرنل پیدائی کا انداز کا سٹ
- نیچلی کیرنل پیدائی کا انداز کا سٹ
- بائیں کیرنل پیدائی کا انداز کا سٹ
- دائیں کیرنل پیدائی کا انداز کا سٹ
- چار کیرنل پیدائی کی رنگ کا سٹ
- اوپر کیرنل پیدائی کی رنگ کا سٹ
- نیچلی کیرنل پیدائی کی رنگ کا سٹ
- بائیں کیرنل پیدائی کی رنگ کا سٹ
- دائیں کیرنل پیدائی کی رنگ کا سٹ
- تمام کیرنل پیدائی کا ایک کیمن کیمن استعمال کریں
- عنصر کو دائرہ کی کیرنل دینا
- تمام کیرنل پیدائی کا ایک کیمن کیمن استعمال کریں
- تمام اوپر کیرنل پیدائی کا ایک کیمن کیمن استعمال کریں
- تمام نیچلی کیرنل پیدائی کا ایک کیمن کیمن استعمال کریں
- تمام بائیں کیرنل پیدائی کا ایک کیمن کیمن استعمال کریں
- تمام دائیں کیرنل پیدائی کا ایک کیمن کیمن استعمال کریں
حاشیه CSS
- عنصر کی مختلف اطراف کی ماورائی پیدائی کا سٹ
- چار مقصد کا سخت ماورائی پیدائی استعمال کریں
- تین مقصد کا سخت ماورائی پیدائی استعمال کریں
- دو مقصد کا سخت ماورائی پیدائی استعمال کریں
- ایک مقصد کا سخت ماورائی پیدائی استعمال کریں
- ماورائی پیدائی کو auto رکھیں تاکہ ان کا مرکوز کیا جائے
- بائیں ماورائی پیدائی کو والد عنصر سے وارث کریں
- ماورائی پیدائی کا جوڑ
پاداش CSS
- عنصر کی مختلف اطراف کی پینتنگ کا سٹ
- چار مقصد کا سخت پینتنگ استعمال کریں
- تین مقصد کا سخت پینتنگ استعمال کریں
- دو مقصد کا سخت پینتنگ استعمال کریں
- ایک مقصد کا سخت پینتنگ استعمال کریں
- پینتنگ اور عنصر کی چوڑائی (box-sizing نہیں استعمال)
- پینتنگ اور عنصر کی چوڑائی (box-sizing کا استعمال)
- عنصر کی بائیں پینتنگ کا سٹ
- عنصر کی دائیں پینتنگ کا سٹ
- عنصر کی اوپر پینتنگ کا سٹ
- عنصر کی نیچلی پینتنگ کا سٹ
CSS اونچائی/چوڑائی
کنارههای CSS
متنی CSS
شبکه CSS
لینک CSS
لیست CSS
جداول CSS
- تعیین لبههای سیاه table، th و td
- استفاده از border-collapse
- لبههای یکپارچه دور جدول
- تعیین عرض و ارتفاع جدول
- تنظیم تقارن افقی محتوا (text-align)
- تنظیم تقارن عمودی محتوا (vertical-align)
- تعیین حاشیههای درونی عناصر 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 - راه حل چند مرورگر
- تراز چپ/راست با استفاده از float
- تراز چپ/راست با استفاده از float - راه حل چند مرورگر
- تراز عمودی با استفاده از padding
- تراز عمودی و افقی
- تراز عمودی با استفاده از line-height
- تراز عمودی و افقی با استفاده از position
ترکیبگر CSS
pseudo-class CSS
pseudo-element CSS
تولید محتوای CSS
شفافیت CSS
نوار ناوبری CSS
لیست کشویی CSS
انتخابگر ویژگی CSS
- تمام عناصر <a> با ارزش attribute target را انتخاب کنید
- تمام عناصر <a> با ارزش attribute target="_blank" را انتخاب کنید
- تمام عناصر با ارزش title که شامل کلمات جدا شده با فاصله و یکی از آنها "flower" است را انتخاب کنید
- تمام عناصر با ارزش class که با "top" شروع میشود را انتخاب کنید (باید کل کلمه باشد)
- تمام عناصر با ارزش class که با "top" شروع میشود را انتخاب کنید (باید کل کلمه نباشد)
- تمام عناصر با ارزش class که با "test" پایان مییابد را انتخاب کنید
- تمام عناصر با ارزش class شامل "te" را انتخاب کنید
فرم CSS
طرحبندی وبسایت CSS
کنارههای گرد CSS
تصویر کناره CSS
پسزمینه CSS
- عنصر کو متعدد پس منظر تصاویر دینا
- پس منظر تصویر کا حجم طے کرنا
- "contain" اور "cover" کا استعمال سے پس منظر تصویر کو سکال کرنا
- پس منظر تصویر کا حجم طے کرنا
- پورے حجم کا پس منظر تصویر (کامپلیٹ کانٹینر علاقہ)
- background-origin کے استعمال سے پس منظر کی تصویر کی پوزیشن طے کرنا
- background-clip کے استعمال سے پس منظر کا ترسیم کا علاقہ طے کرنا
تغییرات رنگ CSS
- خطی گریدینٹ - سمت بالا سمت نیچا
- خطی گریدینٹ - سمت چپ سمت راست
- خطی گریدینٹ - کھوجیاتی
- خطی گریدینٹ - معین درجہ
- خطی گریدینٹ - متعدد رنگ نشان
- خطی گریدینٹ - رنگین سماک اور متن
- خطی گریدینٹ - شفافیت
- خطی گریدینٹ - تکرار شدہ خطی گریدینٹ
- شعاعی گریدینٹ - مسافت مختلف کا رنگ نشان
- شعاعی گریدینٹ - مختلف رنگ کا نشان
- شعاعی گریدینٹ - شکل طے کرنا
- شعاعی گریدینٹ - مختلف انداز کی کلمات
- شعاعی گریدینٹ - تکرار شدہ شعاعی گریدینٹ
CSS چکرچکاوی اثر
- سادے چکرچکاوی اثر
- چکرچکاوی میں رنگ دینا
- چکرچکاوی میں تارکائی کا اثر دینا
- سفید متن کا چکرچکاوی اثر - کالے چکرچکاوی
- لال نیواین چکرچکاوی اثر
- لال اور بلو نیواین چکرچکاوی اثر
- سفید متن کا چکرچکاوی اثر - کالے، بلو اور بلو چکنائی
- عنصر میں سادے box-shadow دینا
- box-shadow میں رنگ دینا
- box-shadow میں رنگ اور تارکائی کا اثر دینا
- چکرچکاوی کا کارڈ بنانا (متن)
- چکرچکاوی کا کارڈ بنانا (بولی لی آئیگس تصویر)
effets text CSS
CSS Web فونٹ
CSS 2D تبدیلی
- translate() - آجائی سے عنصر کو ختم کرنا
- rotate() - کچلنا بالا چکرچکاوی کا عنصر
- rotate() - کچلناپایین چکرچکاوی کا عنصر
- scale() - افزایش عنصر
- scale() - کاهش عنصر
- skewX() - کج کردن عنصر در محور X
- skewY() - کج کردن عنصر در محور Y
- skew() - کج کردن عنصر در محور X و Y
- matrix() - چرخش، بزرگسازی، حرکت و کج کردن عنصر
CSS 3D تبدیلی
CSS تبدیلی
CSS انیمیشن
- انیمیشن را به یک عنصر متصل کنید
- انیمیشن - تغییر رنگ پسزمینه یک عنصر
- انیمیشن - تغییر رنگ پسزمینه و مکان یک عنصر
- انیمیشن با تأخیر
- انیمیشنها قبل از توقف سه مرتبه اجرا میشوند
- انیمیشنهای همیشگی
- انیمیشنهای تغییر از جهت مخالف
- انیمیشنهای تغییر تدریجی
- منحنیهای سرعت انیمیشن
- ویژگیهای خلاصهسازی انیمیشن
CSS توجیہات
تصویر با استایل CSS
- تصویر قوسدار
- تصویر دایرهای
- تصویر مینیاتوری
- تصویر مینیاتوری به عنوان لینک
- ریسپانسیو عکس
- توضیحات تصویر (سمت چپ بالا)
- توضیحات تصویر (سمت راست بالا)
- توضیحات تصویر (سمت چپ پایین)
- توضیحات تصویر (سمت راست بالا)
- توضیحات تصویر (مرکز)
- تصویر پولاریس
- فیلتر تصویر خاکستری
- پیشرفته - تصویر مدال از طریق CSS و JavaScript
CSS Object-fit
CSS بٹن
CSS پینجنگ
CSS کثیر ستون
CSS استعمال کاربر
CSS متغیر
CSS باکس سائزنگ
کوئیچین فلیکس بoks
- فلیکس بoks با سه عنصر فلیکس
- فلیکس بoks با سه عنصر فلیکس - جهت 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; = center کامل
- در عنصر فلیکس align-self تنظیم کنید
- طول یک عنصر فلیکس را نسبت به بخشهای دیگر آن تعیین کنید
- با استفاده از فلیکس بoks یک کتابخانه تصاویر پاسخگو ایجاد کنید
- با استفاده از فلیکس بoks یک وبسایت پاسخگو ایجاد کنید
CSS میڈیا کوئریز
CSS میڈیا کوئریز - مزید مثال
- اسکرین کی وسعت کے مطابق پس منظر رنگ تنظیم کریں
- ریسپانسیو ناویگیشن منو
- فلیٹ کا استعمال سے ریسپانسیو ستون
- فلیکس بیکس کا استعمال سے ریسپانسیو ستون
- میڈیا کوئریز کا استعمال سے عنصر پنهان کریں
- ریسپانسیو فونٹ سائز
- ریسپانسیو عکس گالری
- ریسپانسیو ویب سائٹ
- براہ کرم مرورکر کی سمت کے مطابق پیج کا انداز بدل دیں
- کمترین وسعت سے زیادہ وسعت
CSS ریسپانسیو ویب ڈیزائن
- پچھلے ویب CSS گرید آئٹم
- پائیدار ویب CSS معتبر
