CSS:مثال ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو

{{Expansion depth limit exceeded}}

<span class="error">Expansion depth limit exceeded

  • شیوه نوشتار

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • انتخابگر عنصر
  • انتخابگر id
  • انتخابگر کلاس (برای همه عناصر)
  • انتخابگر کلاس (فقط برای عنصر Expansion depth limit exceeded)
  • یک عنصر HTML که فقط به دو کلاس اشاره می‌کند
  • انتخابگر سراسری
  • گروه‌بندی انتخابگرها

توضیح انتخابگرها در CSS

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • CSS خارجی
  • CSS داخلی
  • CSS درون خطی
  • چندین style sheet
  • ترتیب آبشاری {{Expansion depth limit exceeded|Cascading}}

CSS how to explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • نظر یک خطی
  • نظر چند خطی

CSS comments explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم رنگ پس زمینه یک عنصر
  • تنظیم رنگ متن
  • تنظم رنگ کادر
  • تنظیم مقدارهای رنگ متفاوت
  • تنظیم مقادیر RGB
  • تنظیم مقادیر HEX
  • تنظیم مقادیر HSL

CSS colors explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم رنگ پس زمینه یک صفحه
  • تنظیم رنگ پس زمینه عناصر مختلف
  • تنظیم تصویر بعنوان پس زمینه صفحه
  • نحوه تکرار یک تصویر پس زمینه فقط بصورت افقی
  • نحوه قرار گرفتن یک تصویر پس زمینه
  • یک تصویر پس زمینه ثابت (این تصویر با بقیه صفحه پیمایش نمی‌شود)
  • همه ویژگی‌های پس زمینه در یک اعلان
  • مثال پس زمینه پیشرفته

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم عرض چهار کادر
  • تنظیم عرض کادر بالا
  • تنظیم عرض کادر پایین
  • تنظیم عرض کادر چپ
  • تنظیم عرض کادر راست
  • تنظیم استایل چهار کادر
  • تنظیم استایل کادر بالا
  • تنظیم استایل کادر پایین
  • تنظیم استایل کادر چپ
  • تنظیم استایل کادر راست
  • تنظیم رنگ چهار کادر
  • تنظیم رنگ کادر بالا
  • تنظیم رنگ کادر پایین
  • تنظیم رنگ کادر چپ
  • تنظیم رنگ کادر راست
  • همه ویژگی‌های کادر در یک اعلان
  • اضافه‌کردن کادر با گوشه‌های گرد به یک عنصر
  • تنظیک کادرها در هر طرف
  • همه ویژگی‌های کادر بالا در یک اعلان
  • همه ویژگی‌های کادر پایین در یک اعلان
  • همه ویژگی‌های کادر چپ در یک اعلان
  • همه ویژگی‌های کادر راست در یک اعلان

Border properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تعیین حاشیه‌های متفاوت برای هر طرف عنصر
  • استفاده از ویژگی مختصر حاشیه با چهار مقدار
  • استفاده از ویژگی مختصر حاشیه با سه مقدار
  • استفاده از ویژگی مختصر حاشیه با دو مقدار
  • استفاده از ویژگی مختصر حاشیه با یک مقدار
  • تنظیم حاشیه برابر با auto برای وسط چین کردن عنصر در داخل نگه دارنده اش
  • ارث بری حاشبه چپ از عنصر والد
  • Collapse حاشیه

Margin properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تعیین paddingهای متفاوت برای هر طرف یک عنصر
  • استفاده از ویژگی مختصر padding با چهار مقدار
  • استفاده از ویژگی مختصر padding با سه مقدار
  • استفاده از ویژگی مختصر padding با دو مقدار
  • استفاده از ویژگی مختصر padding با یک مقدار
  • عرض و padding عنصر (بدون box-sizing)
  • عرض و padding عنصر (با box-sizing)
  • تنظیم padding چپ یک عنصر
  • تنظیم padding راست یک عنصر
  • تنظیم padding بالا یک عنصر
  • تنظیم padding پایین یک عنصر

Padding properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم ارتفاع و عرض یک عنصر
  • تنظیم max-width یک عنصر
  • تنظیم عرض و ارتفاع عناصر متفاوت
  • تنظیم عرض و ارتفاع یک تصویر با استفاده از درصد
  • تنظیم min-width و max-width یک عنصر
  • تنظیم min-height و max-height یک عنصر

Dimension properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • نمایش مدل جعبه‌ای
  • تعیین یک عنصر با عرض کلی ۲۵۰ پیکسل

Box model explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • رسم خطی در اطراف عنصر (Outline)
  • تنظیم استایل outline
  • تنظیم رنگ outline
  • استفاده از outline-color: معکوس کردن یک outline
  • تنظیم عرض outline
  • استفاده از ویژگی مختصر outline
  • ایجاد فاصله بین یک outline و لبه/کادر یک عنصر

Outline properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم رنگ متن عناصر مختلف
  • تراز بنذی متن
  • حذف خط زیرین لینک‌ها
  • آراستگی متن
  • کنترل حروف در متن
  • تورفتگی متن
  • تعیین فاصله بین کاراکترها
  • تعیین فاصله بین خطوط
  • تنظیم جهت متن یک عنصر
  • افزایش فاصله‌های خالی بین کلمات
  • ایجاد سایه متن برای یک عنصر
  • غیرفعال کردن wrapping در داخل یک عنصر
  • ترازبندی عمودی تصویری در داخل متن

Text properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم قلم متن
  • تنظیم اندازه قلم
  • تنظیم اندازه قلم به پیکسل
  • تنظیم اندازه قلم به em
  • تنظیم اندازه قلم به درصد و em
  • تنظیم استایل قلم
  • تنظیم نوع دیگر قلم
  • تنظیم میزان برجستگی قلم
  • همه ویژگی‌های قلم در یک اعلان

Font properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • آیکون‌های Font Awesome
  • آیکون‌های بوت استرپ
  • آیکون‌های گوگل

Icons explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • اضافه‌کردن رنگ‌های متفاوت به لینک‌های بازدید شده/نشده
  • استفاده از text-decoration برای لینک‌ها
  • تعیین رنگ پس زمینه برای لینک‌ها
  • اضافه‌کردن استایل‌هایی به ابرلینک‌ها
  • انواع مختلف cursorها
  • پیشرفته - ایجاد جعبه‌های لینک
  • پیشرفته - ایجاد جعبه‌های لینک با کادرها

Link properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • همهٔ آیتم‌های لیست متفاوت در لیست‌ها
  • تنظیم تصویری بعنوان نشانگر آیتم لیست
  • موقعیت دهی نشانگر آیتم لیست
  • حذف تنظیمات پیش‌فرض لیست
  • همه ویژگی‌های لیست در یک اعلان
  • استایل دهی لیست‌ها با رنگ‌ها
  • لیست‌های کادردار با عرض کامل

List properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم کادر مشکی برای عناصر جدول، th و th
  • استفاده از border-collapse
  • کادر تکی در اطراف جدول
  • تعیین عرض و ارتفاع جدول
  • تنظیم ترازبندی افقی محتوا (text-align)
  • تنظیم ترازبندی عمودی محتوا (vertical-align)
  • تعیین padding برای عناصر جدول، th و th
  • تقسیم کننده‌های افقی
  • جدول Hoverable
  • جدول‌های راه راه
  • تعیین رنگ کادرهای جدول
  • تنظیم محل عنوان جدول
  • جدول واکنش گرا
  • ایجاد یک جدول تجملی

Table properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • نحوه پنهان کردن یک عنصر (visibility:hidden)
  • نحوه نمایش ندادن یک عنصر (display:none)
  • نحوه نمایش عنصر سطح بلوک بعنوان یک عنصر درون خطی
  • نحوه نمایش یک عنصر درون خطی بعنوان عنصر سطح بلوک
  • نحوه استفاده CSS بهمراه جاوا اسکریپت برای نمایش محتوای پنهان

Display properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • موقعیت دهی عنصر نسبت به پنجره مرورگر
  • موقعیت دهی عنصر نسبت به موقعیت عادی آن
  • موقعیت دهی عنصر با یک مقدار مطلق
  • موقعیت دهی چسبنده
  • عناصر هم پوشان
  • تنظیم شکل عنصر
  • تنظیم لبه بالای تصویر با استفاده از یک مقدار پیکسلی
  • تنظیم لبه پایینی تصویر با استفاده از یک مقدار پیکسلی
  • تنظیم لبه چپ تصویر با استفاده از یک مقدار پیکسلی
  • تنظیم لبه راست تصویر با استفاده از یک مقدار پیکسلی
  • موقعیت دهی به متن تصویر (گوشه بالا چپ)
  • موقعیت دهی به متن تصویر (گوشه بالا راست)
  • موقعیت دهی به متن تصویر (گوشه پایین چپ)
  • موقعیت دهی به متن تصویر (گوشه پایین راست)
  • موقعیت دهی به متن تصویر (وسط چین)

Positioning properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • استفاده از overflow: visible - سرریز بریده نمی‌شود. بیرون از جعبه رندر می‌شود
  • استفاده از overflow: hidden - سرریز بریده نمی‌شود و مابقی آن پنهان می‌شود
  • استفاده از overflow: scroll - سرریز بریده می‌شود اما برای دیدن مابقی محتوا نوار پیمایش اضافه می‌شود
  • استفاده از overflow: auto - سرریز بریده می‌شود، برای دیدن مابقی محتوا باید یک نوار پیمایش اضافه شود

استفاده از overflow-x و overflow-y.

Overflow properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • یک استفاده ساده از ویژگی float
  • تصویری با کادر و حاشیه‌ها که به سمت راست در پاراگراف float می‌شود
  • تصویری با عنوان که به سمت راست float می‌شود
  • Float شدن اولین حرف پاراگراف به سمت چپ
  • خاموش کردن float (استفاده از ویژگی clear)
  • خاموش کردن float (استفاده از هک {{Expansion depth limit exceeded|"clearfix"}})
  • ایجاد جعبه‌های شناور {{Expansion depth limit exceeded|Floating}}
  • ایجاد تصاویر کنار هم {{Expansion depth limit exceeded|side-by-side}}
  • ایجاد جعبه‌هایی با ارتفاع برابر (با flexbox)
  • ایجاد منوی افقی {{Expansion depth limit exceeded|horizontal}}
  • ایجاد مثال چیدمان وب

Float properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • نمایش تفاوت‌های بین درون خطی، بلوک درون خطی و بلوک
  • استفاده از بلوک درون خطی برای ایجاد لینک‌های راهبری

Inline-block explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • وسط چین کردن با حاشیه
  • وسط چین کردن متن
  • وسط چین کردن تصویر
  • راست/چپ چین کردن با موقعیت {{Expansion depth limit exceeded|Position}}
  • راست/چپ چین کردن با Position - راه حل Crossbrowser
  • راست/چپ چین کردن با flaot
  • راست/چپ چین کردن با flaot - راه حل Crossbrowser
  • وسط چین کردن عمودی با padding
  • وسط چین کردن افقی و عمودی
  • وسط چین کردن عمودی با ارتفاع خط {{Expansion depth limit exceeded|line-height}}
  • وسط چین کردن عمودی و افقی با موقعیت

Align properties explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • انتخابگر جد
  • انتخابگر فرزند
  • انتخابگر برادر مجاور
  • انتخابگر برادر عمومی

Combinator selectors explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • اضافه‌کردن رنگ‌های متفاوت به یک ابرلینک
  • اضافه‌کردن استایل‌های دیگر به ابرلینک
  • استفاده از {{Expansion depth limit exceeded|:focus}}
  • {{Expansion depth limit exceeded|:first-child}} - تطبیق با اولین عنصر p
  • {{Expansion depth limit exceeded|:first-child}} - تطبیق با اولین عنصر i در همه عناصر p
  • {{Expansion depth limit exceeded|:first-child}} - تطبیق با همه عناصر i در همه عناصر p که فرزند اول هستند
  • استفاده از {{Expansion depth limit exceeded|:lang}}

Pseudo-classes explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • مخصوص کردن اولین حرف در یک متن
  • مخصوص کردن اولین خط در یک متن
  • مخصوص کردن اولین خط و حرف در یک متن
  • استفاده از {{Expansion depth limit exceeded|:before}} برای درج محتوا پیش از یک عنصر
  • استفاده از {{Expansion depth limit exceeded|:after}} برای درج محتوا پس از یک عنصر

Pseudo-elements explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • درج URL در پرانتز بعد از هر لینک با ویژگی محتوا
  • شماره‌گذاری بخش‌ها و زیربخش‌ها با {{Expansion depth limit exceeded|"Section 1", "1.1", "1.2"}} و غیره
  • مشخص کردن علامت‌های نقل‌قول با ویژگی نقل‌قول

CSS Counters explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • ایجاد تصاویر شفاف
  • ایجاد تصاویر شفاف - جلوه mouseover
  • جلوه mouseover معکوس برای تصاویر شفاف
  • box/div شفاف
  • box/div شفاف با مقادیر RGBA
  • ایجاد جعبه شفاف دارای متن برروی یک تصویر پس زمینه
  • Image opacity explained نوارهای راهبری {{Expansion depth limit exceeded|Navigation}}
  • نوار راهبری عمودی {{Expansion depth limit exceeded|vertical}} با استایل کامل
  • نوار راهبری افقی {{Expansion depth limit exceeded|horizontal}} با استایل کامل
  • نوار راهبری عمودی ثابت با ارتفاع کامل
  • نوار راهبری افقی ثابت
  • نوار راهبری چسبنده (در IE یا Edge 15 و قدیمی تر کار نمی‌کند)
  • Navigation واکنش گرای بالا
  • Navigation واکنش گرای کناری

Navigation bars explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • متن Dropdown
  • منوی Dropdown
  • منوی Dropdown راست چین
  • تصویر Dropdown
  • نوار راهبری Dropdown

Dropdowns explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • گالری تصاویر
  • گالری تصاویر واکنش گرا

Image gallery explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • یک image sprite
  • image sprite - یک لیست راهبری
  • یک image sprite با جلوه hover

Image sprites explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • انتخاب همه عناصر <a> با ویژگی target
  • انتخاب همه عناصر <a> با ویژگی {{Expansion depth limit exceeded|1=target="_blank"}}
  • انتخاب همه عناصر با یک ویژگی title که دارای لیستی از کلمات است که با فاصله از هم جدا شده‌اند، یکی از آنها “flower” است
  • انتخاب همه عناصر با مقدار خصوصیت کلاسی که با “top” شروع می‌شود (باید کلمه کامل باشد)
  • انتخاب همه عناصر با مقدار خصوصیت کلاسی که با “top” شروع می‌شود (نباید کلمه کامل باشد)
  • انتخاب همه عناصر با مقدار خصوصیت کلاسی که با “test” تمام می‌شود
  • انتخاب همه عناصر با مقدار خصوصیت کلاسی که دارای “te” باشد

Attribute selectors explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • فیلد ورودی با عرض کامل
  • فیلد ورودی دارای padding
  • فیلد ورودی کادر دار
  • فیلد ورودی با کادر پایینی
  • فیلدهای ورودی رنگی
  • فیلدهای ورودی focus شده
  • فیلدهای ورودی focus شده ۲
  • ورودی با آیکون/تصویر
  • ورودی جستجوی متحرک
  • استایل دهی حوزه متن
  • استایل دهی منوهای انتخاب
  • استایل دهی کلیدهای ورودی
  • فرم واکنش گرا

Forms explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • ایجاد یک شمارنده
  • شمارنده تودرتو ۱
  • شمارنده تودرتو ۲

Counters explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • چیدمان ساده و واکنش گرای وب
  • یک مثال وب‌سایت

Website Layout explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • اضافه‌کردن گوشه‌های گرد به عناصر
  • گرد کردن هر گوشه بصورت مجزا
  • ایجاد گوشه‌های بیضوی

CSS rounded corners explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • ایجاد کادر تصویر در اطراف یک عنصر، با استفاده از کلید واژه round
  • ایجاد کادر تصویر در اطراف یک عنصر، با استفاده از کلید واژه stretch
  • کادر تصویر - مقادیر slice متفاوت

CSS border images explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • اضافه‌کردن چند تصویر پس زمینه برای یک عنصر
  • تعیین اندازه تصویر پس زمینه
  • Scale کردن تصویر پس زمینه با استفاده از "contain" و "cover"
  • مشخص کردن اندازه‌های چند تصویر پس زمینه
  • تصویر پس زمینه با اندازه کامل (ناحیه محتوا را کاملاً پر می‌کند)
  • استفاده از background-origin برای تعیین اینکه تصویر پس زمینه کجا قرار داده شود
  • استفاده از background-clip برای تعیین ناحیه رسم پس زمینه

CSS backgrounds explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • گرادیان خطی - بالا به پایین
  • گرادیان خطی - چپ به راست
  • گرادیان خطی - قطری
  • گرادیان خطی - با یک زاویه خاص
  • گرادیان خطی - با چند ایستگاه رنگ
  • گرادیان خطی - رنگ یک رنگین کمان + متن
  • گرادیان خطی - با شفافیت
  • گرادیان خطی - یک گرادیان خطی تکرار شونده
  • گرادیان شعاعی - ایستگاه‌های رنگ با فاصله برابر
  • گرادیان شعاعی - ایستگاه‌های رنگ با فاصله متفاوت
  • گرادیان شعاعی - تنظیم شکل
  • گرادیان شعاعی - کلیدواژه‌های اندازه‌های مختلف
  • گرادیان شعاعی - یک گرادیان شعاعی تکرار شونده

CSS gradients explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • جلوه سایه ساده
  • اضافه‌کردن یک رنگ به سایه
  • اضافه‌کردن حالت کدری به سایه
  • متن سفید با سایه سیاه
  • یک سایه درخشان نئونی قرمز رنگ
  • یک سایه درخشان نئونی قرمز و آبی
  • متن سفید با سایه سیاه، آبی، و آبی تیره
  • اضافه‌کردن یک box-shadow ساده به یک عنصر
  • اضافه‌کردن رنگ به box-shadow
  • اضافه‌کردن رنگ و حالت کدری به box-shadow
  • ایجاد کارت‌های کاغذ مانند (متن)
  • ایجاد کارت‌های کاغذ مانن (تصاویر polaroid)

CSS shadow effects explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • مشخص کردن اینکه چگونه محتوای پنهان، سرریز باید به کاربر علامت داده شود
  • نحوه نمایش محتوای سرریزشده هنگامی که روی عنصر hover می‌شود
  • اجازه داده به کلمات طولانی برای شکسته شدن و wrap شدن به خط بعدی
  • تعیین قوانین شکسته شدن خط

CSS text explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • استفاده از قلم‌های «خودتان» در قاعده {{Expansion depth limit exceeded|@font-face}}
  • استفاده از قلم‌های خودتان در قاعده {{Expansion depth limit exceeded|@font-face}} (برجسته {{Expansion depth limit exceeded|bold}})

CSS web fonts explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • {{Expansion depth limit exceeded|translate()}} - جابجا کردن یک عنصر از مکان فعلی آن
  • {{Expansion depth limit exceeded|rotate()}} - چرخاندن یک عنصر در جهت ساعتگرد
  • {{Expansion depth limit exceeded|rotate()}} - چرخاندن یک عنصر در جهت پاد ساعت گرد
  • {{Expansion depth limit exceeded|scale()}} - افزایش دادن یک عنصر
  • {{Expansion depth limit exceeded|scale()}} - کاهش دادن یک عنصر
  • {{Expansion depth limit exceeded|skewX()}} - کج کردن یک عنصر در امتداد محور X
  • {{Expansion depth limit exceeded|skewY()}} - کج کردن یک عنصر در امتداد محور Y
  • {{Expansion depth limit exceeded|skew()}} - کج کردن یک عنصر در امتداد محورهای X و Y
  • {{Expansion depth limit exceeded|matrix()}} - چرخاندن، scale، جابجا کردن و کج کردن یک عنصر

CSS 2D transforms explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • {{Expansion depth limit exceeded|rotateX()}} - چرخش یک عنصر حول محور X با یک درجه داده شده
  • {{Expansion depth limit exceeded|rotateY()}} - چرخش یک عنصر حول محور Y با یک درجه داده شده
  • {{Expansion depth limit exceeded|rotateZ()}} - چرخش یک عنصر حول محور Z با یک درجه داده شده
  • CSS 3D transforms explained انتقال‌ها {{Expansion depth limit exceeded|Transitions}}
  • انتقال - تغییر عرض یک عنصر
  • انتقال - تغییر عرض و ارتفاع یک عنصر
  • تعیین منحنی‌های سرعت متفاوت برای یک انتقال
  • تعیین تأخیر برای جلوه انتقال
  • اضافه‌کردن یک تبدیل به یک جلوه انتقال
  • مشخص کردن همه ویژگی‌های انتقال در یک ویژگی مختصر

CSS transitions explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • الحاق انیمیشن به یک عنصر
  • انیمیشن - تغییر رنگ پس زمینه یک عنصر
  • انیمیشن - تغییر رنگ پس زمینه {{Expansion depth limit exceeded|background-color}} و مکان یک عنصر
  • به تأخیر انداختن انیمیشن
  • اجرای انیمیشن، ۳ بار پیش از توقف
  • اجرای انیمیشن برای همیشه
  • اجرای انیمیشن در جهت معکوس
  • اجرای انیمیشن در دوره‌های متناوب
  • منحنی‌های سرعت انیمیشن
  • ویژگی مختصر انیمیشن

CSS animations explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • Tooltip راست
  • Tooltip چپ
  • Tooltip بالا
  • tooltip پایین
  • Tooltip با فلش
  • Tooltip متحرک

Tooltips explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تصویر با گوشه‌های گرد
  • تصویر دایره‌ای
  • تصویر Thumbnail
  • تصویر Thumbnail بعنوان لینک
  • تصویر واکنش گرا
  • متن تصویر (گوشه بالا چپ)
  • متن تصویر (گوشه بالا راست)
  • متن تصویر (گوشه پایین چپ)
  • متن تصویر (گوشه پایین راست)
  • متن تصویر (وسط چین)
  • تصاویر polaroid
  • فیلتر تصویر خاکستری
  • پیشرفته - Modal تصویر با CSS و جاوا اسکریپت

CSS Images explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • بریدن کناره‌های تصویر، محافظت از نسبت ابعاد، و پرکردن فضا
  • مثالی از همه مقادیر ویژگی object-fit

Object-fit explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • کلیدهای CSS ساده
  • رنگ‌های کلید
  • اندازه‌های کلید
  • کلیدهای با گوشه‌های گرد
  • کادرهای کلید رنگی
  • کلیدهای Hoverable
  • کلیدهای سایه دار
  • کلیدهای غیرفعال
  • عرض کلید
  • گروه‌های کلید
  • گروه کلید کادر دار
  • کلید متحرک (حالت Hover)
  • کلید متحرک (حالت Ripple)
  • کلید متحرک (حالت کلیک شده)

CSS buttons explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • صفحه بندی ساده
  • صفحه بندی hoverable و فعال
  • صفحه بندی hoverable و فعال با گوشه‌های گرد
  • جلوه انتقال hoverable
  • صفحه بندی کادر دار
  • صفحه بندی کادر دار با گوشه‌های گرد
  • صفحه بندی با فاصله میان لینک‌ها
  • اندازه صفحه بندی
  • صفحه بندی با فاصله میان لینک‌ها
  • صفحه بندی وسط چین
  • Breadcrumbs

CSS pagination explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • ایجاد چند ستون
  • ایجاد فاصله خالی بین ستون‌ها
  • تعیین استایل قاعده بین ستون‌ها
  • تعیین عرض قاعده بین ستون‌ها
  • تعیین رنگ قاعده بین ستون‌ها
  • تعیین عرض، استایل و رنگ قاعده بین ستون‌ها
  • تعیین تعداد ستون‌هایی که یک عنصر باید در میان آنها گسترده شود
  • تعیین عرض پیشنهادی و بهینه برای ستون‌ها

CSS multiple columns explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • اجازه داده به کاربر برای تغییر اندازه عرض یک عنصر
  • اجازه داده به کاربر برای تغییر اندازه ارتفاع یک عنصر
  • اجازه داده به کاربر برای تغییر اندازه هم عرض و هم ارتفاع یک عنصر
  • اضافه‌کردن فاصله بین یک outline و کادر عنصر

CSS user interface explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • استفاده از تابع {{Expansion depth limit exceeded|var()}}
  • استفاده از تابع {{Expansion depth limit exceeded|var()}} برای درج چند مقدار ویژگی شخصی‌سازی شده

CSS variables explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • عرض عنصر بدون box-sizing
  • عرص عنصر با box-sizing
  • عناصر فرم + box-sizing

CSS box sizing explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • Flexbox با سه آیتم flex
  • Flexbox با سه آیتم flex - جهت راست به چپ {{Expansion depth limit exceeded|rtl}}
  • جهت flex - ردیف معکوس {{Expansion depth limit exceeded|flex-direction - row-reverse}}
  • جهت flex - ستون {{Expansion depth limit exceeded|flex-direction - column}}
  • جهت flex - ستون - معکوس {{Expansion depth limit exceeded|flex-direction - column-reverse}}
  • ترازبندی محتوا - flex-end {{Expansion depth limit exceeded|justify-content - flex-end}}
  • ترازبندی محتوا - مرکز {{Expansion depth limit exceeded|justify-content - center}}
  • ترازبندی محتوا - فاصله در میان {{Expansion depth limit exceeded|justify-content - space-between}}
  • ترازبندی محتوا - فاصله در اطراف {{Expansion depth limit exceeded|justify-content - space-around}}
  • ترازبندی آیتم‌ها - کشیده شدن {{Expansion depth limit exceeded|align-items - stretch}}
  • ترازبندی آیتم‌ها - flex-start {{Expansion depth limit exceeded|align-items - flex-start}}
  • ترازبندی آیتم‌ها - flex-end {{Expansion depth limit exceeded|align-items - flex-end}}
  • ترازبندی آیتم‌ها - مرکز {{Expansion depth limit exceeded|align-items - center}}
  • ترازبندی آیتم‌ها - baseline {{Expansion depth limit exceeded|align-items - baseline}}
  • flex-wrap - nowrap
  • flex-wrap - wrap
  • flex-wrap - wrap-reverse
  • ترازبندی محتوا - مرکز {{Expansion depth limit exceeded|align-content - center}}
  • ترتیب دهی به آیتم‌های flex
  • {{Expansion depth limit exceeded|Margin-right:auto;}}
  • {{Expansion depth limit exceeded|Margin:auto;}} = کاملاً وسط چین
  • align-self در آیتم‌های flex
  • تعیین طول آیتم flex، نسبت به بقیه آیتم‌های flex
  • ایجاد گالری تصاویر واکنش گرا با flexbox
  • ایجاد وب‌سایت واکنش گرا با flexbox

CSS flexbox explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تغییر زنگ پس زمینه به سبز روشن اگر عرض viewport برابر با ۴۸۰ پیکسل یا بیشتر باشد
  • نمایش منویی که اگر عرض viewport برابر با ۴۸۰ پیکسل یا بیشتر باشد به سمت چپ صفحه float خواهد شد

CSS media queries explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • تنظیم رنگ‌های پس زمینه متفاوت براساس عرض صفحه
  • منوی راهبری {{Expansion depth limit exceeded|navigation}} واکنش گرا
  • ستون‌های واکنش گرا با استفاده از float
  • ستون‌های واکنش گرا با استفاده ازflexbox
  • پنهان کردن عناصر با media queryها
  • سایز قلم واکنش گرا
  • گالری تصویر واکنش گرا
  • وب‌سایت واکنش گرا
  • تغییر چیدمان یک صفحه براساس جهت مرورگر
  • کمترین عرض به بیش‌ترین عرض

CSS media queries examples explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • grid view واکنش گرا
  • اضافه‌کردن نقطه شکست برای رایانه‌های رومیزی، لپ تاپ‌ها و موبایل‌ها
  • نقاط شکست معمولی
  • تصویر واکنش گرا
  • ویدیو واکنش گرا
  • فریم ورک واکنش گرا {{Expansion depth limit exceeded|W3.CSS}}
  • فریم ورک واکنش گرا: بوت استرپ

CSS responsive webdesign explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

<span class="error">Expansion depth limit exceeded

  • چیدمان {{Expansion depth limit exceeded|layout}} شبکه
  • عناصر شبکه
  • فاصله بین ستون‌های شبکه
  • خطوط شبکه
  • نگه‌دارنده شبکه
  • آیتم‌های شبکه

CSS grid explained

{{Expansion depth limit exceeded|Main Page|Cover page}}

{{Expansion depth limit exceeded|قبل=CSS:الگوها|بعد=}} {{Expansion depth limit exceeded}} {{Expansion depth limit exceeded|title={{Expansion depth limit exceeded| {{{Expansion depth limit exceeded}}} | تمامی مثال‌های CSS - ویکی‌کد}}

|description= تمامی مثال‌های CSS را در این صفحه می‌توانید مشاهده نمائید.

}}

{{Expansion depth limit exceeded}}