ترفندهای طراحی اسکرول‌بار (Scrollbar) سفارشی و مدرن فقط با CSS (تغییر شکل اسکرول بار با CSS)

در دنیای امروز که رقابت بر سر جذب و حفظ کاربر هر روز بیشتر می‌شود، جزئیات کوچک تفاوت‌های بزرگی را رقم می‌زنند. یکی از این جزئیات، که اغلب نادیده گرفته می‌شود اما تأثیر زیادی بر تجربه کاربری و زیبایی‌شناسی سایت شما دارد، اسکرول‌بار است. دیگر زمان اسکرول‌بارهای خاکستری و یکنواخت مرورگرها به سر آمده. اگر آماده‌اید تا با چند خط کد CSS، به سایت خود جلوه‌ای خاص و حرفه‌ای ببخشید، این مقاله برای شماست! همین حالا برای دستیابی به بهترین ابزارهای توسعه وب، سری به فروشگاه ابزارهای ما بزنید و دنیایی از امکانات را کشف کنید.

—

—

چرا اصلا اسکرول‌بار سفارشی؟ فراتر از یک تغییر ظاهری

شاید با خودتان بگویید، اسکرول‌بار که فقط یک ابزار جانبی برای حرکت در صفحه است، چرا باید وقت بگذاریم و آن را سفارشی کنیم؟ پاسخ ساده است: تجربه کاربری (UX) و هویت بصری. در یک وب‌سایت مدرن، هر پیکسل اهمیت دارد و اسکرول‌بار نیز از این قاعده مستثنی نیست.

تجربه کاربری بهتر و روان‌تر

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

هماهنگی کامل با طراحی و برند سایت

اسکرول‌بار بخشی از رابط کاربری است و باید هویت برند شما را منعکس کند. اگر برند شما رنگ‌های خاصی دارد یا از یک سبک طراحی مینیمالیستی بهره می‌برد، منطقی است که اسکرول‌بار نیز همین اصول را دنبال کند. این یکپارچگی بصری باعث می‌شود سایت شما حرفه‌ای‌تر و منسجم‌تر به نظر برسد. این فقط در مورد زیبایی نیست؛ در مورد ایجاد یک تجربه کاربری یکپارچه است که در آن کاربر احساس کند هر عنصر با دقت و هدف طراحی شده است.

—

معرفی ابزارهای جادویی CSS برای اسکرول‌بار: Webkit و استانداردهای جدید

برای تغییر شکل اسکرول‌بار، ما عمدتاً با دو رویکرد اصلی در CSS سروکار داریم: شبه‌عناصر `::-webkit-scrollbar` که بیشتر در مرورگرهای مبتنی بر Webkit (کروم، سافاری، اج جدید) کاربرد دارند و ویژگی‌های استاندارد جدید CSS (مانند `scrollbar-width` و `scrollbar-color`) که فایرفاکس و مرورگرهای دیگر به تدریج از آن‌ها پشتیبانی می‌کنند.

قدرت وب‌کیت و شبه‌عناصر ::-webkit-scrollbar

تاریخچه سفارشی‌سازی اسکرول‌بار در وب، با اکوسیستم Webkit گره خورده است. مرورگرهای مبتنی بر Webkit (مانند کروم، سافاری و مایکروسافت اج پس از مهاجرت به Chromium) از یک سری شبه‌عناصر (Pseudo-elements) اختصاصی پشتیبانی می‌کنند که به ما اجازه می‌دهند تا تقریباً تمام جنبه‌های اسکرول‌بار را کنترل کنیم. این رویکرد به شما انعطاف‌پذیری بسیار زیادی می‌دهد. با این حال، باید توجه داشت که اینها “غیر استاندارد” هستند و ممکن است در مرورگرهایی که از Webkit استفاده نمی‌کنند (مثل فایرفاکس) کار نکنند.

استانداردسازی با CSS Scrollbars Module Level 1

برای حل مشکل ناسازگاری و ایجاد یک روش استاندارد، کنسرسیوم W3C در حال توسعه ماژول CSS Scrollbars Level 1 است. این ماژول ویژگی‌های جدیدی مانند `scrollbar-width` و `scrollbar-color` را معرفی می‌کند که هدفشان ساده‌سازی و یکپارچه‌سازی سفارشی‌سازی اسکرول‌بار در تمام مرورگرها است. در حال حاضر، فایرفاکس از این ویژگی‌ها پشتیبانی می‌کند و انتظار می‌رود که سایر مرورگرها نیز در آینده به این استانداردها بپیوندند. این پیشرفت‌ها آینده‌ای روشن‌تر برای طراحی اسکرول‌بار را نوید می‌دهند.

—

غواصی در دنیای ::-webkit-scrollbar: جزء به جزء

برای اینکه بتوانید اسکرول‌بار را به دلخواه خودتان تغییر دهید، ابتدا باید اجزای آن را بشناسید. `::-webkit-scrollbar` به ما اجازه می‌دهد تا بخش‌های مختلف اسکرول‌بار را هدف قرار دهیم و استایل دهیم.

اجزای اصلی اسکرول‌بار وب‌کیت

1. `::-webkit-scrollbar`: این شبه‌عنصر کل نوار اسکرول (چه افقی و چه عمودی) را هدف قرار می‌دهد. با این می‌توانید عرض یا ارتفاع کل اسکرول‌بار را مشخص کنید.
2. `::-webkit-scrollbar-track`: این بخش مربوط به “مسیر” یا همان background اسکرول‌بار است که دستگیره (thumb) روی آن حرکت می‌کند.
3. `::-webkit-scrollbar-thumb`: این همان “دستگیره” قابل کشیدن اسکرول‌بار است که کاربر برای پیمایش از آن استفاده می‌کند. این مهم‌ترین بخشی است که اغلب استایل داده می‌شود.
4. `::-webkit-scrollbar-corner`: این قسمت، ناحیه‌ای است که دو اسکرول‌بار (عمودی و افقی) در گوشه پایین و سمت راست با هم تلاقی می‌کنند. معمولاً برای محتوای قابل اسکرول دو جهته کاربرد دارد.
5. `::-webkit-scrollbar-button`: این شبه‌عنصر برای دکمه‌های بالا و پایین/چپ و راست در انتهای اسکرول‌بار استفاده می‌شود، هرچند کمتر استفاده می‌شوند و اغلب با `display: none` مخفی می‌شوند.

body::-webkit-scrollbar {
    width: 12px; /* عرض اسکرول‌بار عمودی */
}

body::-webkit-scrollbar-track {
    background: #f1f1f1; /* رنگ مسیر اسکرول‌بار */
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background#888; /* رنگ دستگیره اسکرول‌بار */
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #555; /* رنگ دستگیره هنگام هاور */
}

body::-webkit-scrollbar-corner {
    background: #f1f1f1; /* رنگ گوشه اسکرول‌بار */
}

**توضیح کد:**
در این مثال، ما عرض اسکرول‌بار را ۱۲ پیکسل تنظیم کردیم، سپس برای مسیر، دستگیره و گوشه آن رنگ‌های پس‌زمینه و شعاع گوشه (border-radius) را مشخص کردیم. همچنین برای `::-webkit-scrollbar-thumb:hover` یک حالت هاور تعریف کردیم تا وقتی کاربر ماوس را روی دستگیره می‌برد، رنگ آن تغییر کند. این یک قدم اساسی برای شروع سفارشی‌سازی است.

—

ترفندهای پیشرفته و مدرن‌سازی اسکرول‌بار

حالا که با اصول اولیه آشنا شدید، بیایید به سراغ ترفندهای پیشرفته‌تر برویم که اسکرول‌بار شما را واقعاً متمایز می‌کند.

اسکرول‌بارهای نازک و مخفی‌شونده (Thin & Disappearing Scrollbars)

یکی از روندهای محبوب در طراحی مدرن، استفاده از اسکرول‌بارهای بسیار نازک یا حتی اسکرول‌بارهایی است که فقط هنگام اسکرول ظاهر می‌شوند. این کار به طراحی مینیمالیستی کمک می‌کند و فضای بیشتری برای محتوا فراهم می‌آورد.

body::-webkit-scrollbar {
    width: 8px; /* عرض کمتر */
}

body::-webkit-scrollbar-track {
    background: <span style="color: #282a36; /* مسیر کاملا شفاف */
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.4); /* دستگیره کمی شفاف */
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(85, 85, 85, 0.8); /* شفافیت بیشتر در هاور */
}

body:hover::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.8); /* شفافیت بیشتر دستگیره وقتی روی بدنه هاور می‌شود */
}

انیمیشن و ترانزیشن در اسکرول‌بار (Animation & Transition)

اگرچه نمی‌توانید به طور مستقیم روی شبه‌عناصر `::-webkit-scrollbar` انیمیشن اعمال کنید، اما با کمی خلاقیت می‌توانید با استفاده از ترانزیشن‌ها، به اسکرول‌بار خود حسی پویا ببخشید. معمولاً این کار با تغییر خواص در حالت‌های `:hover` انجام می‌شود.

body::-webkit-scrollbar {
    width: 6px; /* عرض پیش‌فرض */
    transition: width 0.3s ease-in-out; /* ترانزیشن برای تغییر عرض */
}

body:hover::-webkit-scrollbar {
    width: 12px; /* افزایش عرض با هاور روی بدنه */
}

body::-webkit-scrollbar-track {
    background: #f5f5f5;
}

body::-webkit-scrollbar-thumb {
    background-color: #a8a8a8;
    border-radius: 10px;
    transition: background-color 0.3s ease-in-out;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #7c7c7c;
}

اسکرول‌بار سفارشی برای بخش‌های خاص (Specific Elements)

شاید نخواهید اسکرول‌بار کل صفحه را تغییر دهید، بلکه فقط برای یک ``، یک `div` با محتوای قابل اسکرول، یا یک بخش خاص از سایتتان اسکرول‌بار سفارشی داشته باشید. این کار به راحتی با هدف قرار دادن آن المنت با انتخابگر CSS امکان‌پذیر است.</p> <div style="background-color: #f8f9fa;border: 1px solid #dee2e6;padding: 20px;border-radius: 8px;margin: 30px 0"> <h3 style="font-size: 1.4em;font-weight: bold;color: #343a40;margin-bottom: 15px">مثال ۴: اسکرول‌بار سفارشی برای یک `div`</h3> <p style="color: #6c757d;font-size: 0.95em">فرض کنید یک <code>div</code> با کلاس <code>.custom-scroll-area</code> دارید.</p> <div style="background-color: #2d2d2d;color: #f8f8f2;padding: 15px;border-radius: 6px;, monospace;font-size: 0.9em;position: relative"> <pre style="margin: 0;white-space: pre-wrap"><code><span style="color: #ff79c6">.custom-scroll-area</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">height</span><span style="color: #f8f8f2">:</span> <span style="color: #bd93f9">200px</span><span style="color: #f8f8f2">;</span> <span style="color: #50fa7b">overflow-y</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">scroll</span><span style="color: #f8f8f2">;</span> <span style="color: #6272a4">/* مطمئن شوید که قابل اسکرول است */</span> <span style="color: #50fa7b">padding</span><span style="color: #f8f8f2">:</span> <span style="color: #bd93f9">15px</span><span style="color: #f8f8f2">;</span> <span style="color: #50fa7b">border</span><span style="color: #f8f8f2">:</span> <span style="color: #bd93f9">1px</span> <span style="color: #f1fa8c">solid #ccc</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span> <span style="color: #ff79c6">.custom-scroll-area</span><span style="color: #f8f8f2">::-webkit-scrollbar</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">width</span><span style="color: #f8f8f2">:</span> <span style="color: #bd93f9">10px</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span> <span style="color: #ff79c6">.custom-scroll-area</span><span style="color: #f8f8f2">::-webkit-scrollbar-track</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">background</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">#e0e0e0</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span> <span style="color: #ff79c6">.custom-scroll-area</span><span style="color: #f8f8f2">::-webkit-scrollbar-thumb</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">background-color</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">#5cb85c</span><span style="color: #f8f8f2">;</span> <span style="color: #6272a4">/* رنگ سبز برای اسکرول‌بار خاص */</span> <span style="color: #50fa7b">border-radius</span><span style="color: #f8f8f2">:</span> <span style="color: #bd93f9">5px</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span> <span style="color: #ff79c6">.custom-scroll-area</span><span style="color: #f8f8f2">::-webkit-scrollbar-thumb</span><span style="color: #f8f8f2">:hover</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">background-color</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">#4cae4c</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span></code></pre> <div style="text-align: right;margin-top: 10px;font-size: 0.85em;color: #aaa"> <p>این کد را می‌توانید با یک کلیک کپی کنید.</p> </p></div> </p></div> </div> <p>—</p> <h2 style="font-size: 2em;font-weight: bold;color: #2C3E50;margin-top: 40px;margin-bottom: 20px">چالش‌ها و سازگاری مرورگرها: آینده اسکرول‌بار سفارشی</h2> <p>همانطور که دیدید، شبه‌عناصر Webkit ابزارهای قدرتمندی هستند، اما مشکل اصلی آن‌ها عدم پشتیبانی در تمام مرورگرها است. به خصوص فایرفاکس (موتور گکو) از این شبه‌عناصر پشتیبانی نمی‌کند. اینجا استانداردهای جدید W3C به کمک ما می‌آیند.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">CSS Scrollbars Module Level 1: راه حل استاندارد</h3> <p>این ماژول، دو ویژگی کلیدی را برای سفارشی‌سازی اسکرول‌بار معرفی می‌کند که در حال حاضر توسط فایرفاکس پشتیبانی می‌شوند:</p> <p>* <strong style="color: #4CAF50">`scrollbar-width`</strong>: این ویژگی به شما اجازه می‌دهد تا عرض اسکرول‌بار را کنترل کنید. مقادیر ممکن عبارتند از `auto` (پیش‌فرض مرورگر), `thin` (باریک‌تر از حالت عادی) و `none` (مخفی کردن اسکرول‌بار).<br /> * <strong style="color: #4CAF50">`scrollbar-color`</strong>: این ویژگی به شما امکان می‌دهد تا رنگ دستگیره (thumb) و مسیر (track) اسکرول‌بار را به ترتیب مشخص کنید.</p> <div style="background-color: #f8f9fa;border: 1px solid #dee2e6;padding: 20px;border-radius: 8px;margin: 30px 0"> <h3 style="font-size: 1.4em;font-weight: bold;color: #343a40;margin-bottom: 15px">مثال ۵: اسکرول‌بار با استانداردهای CSS (پشتیبانی فایرفاکس)</h3> <p style="color: #6c757d;font-size: 0.95em">این کد در مرورگرهایی که از این استانداردها پشتیبانی می‌کنند، مانند فایرفاکس، به درستی کار می‌کند.</p> <div style="background-color: #2d2d2d;color: #f8f8f2;padding: 15px;border-radius: 6px;, monospace;font-size: 0.9em;position: relative"> <pre style="margin: 0;white-space: pre-wrap"><code><span style="color: #ff79c6">body</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">scrollbar-width</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">thin</span><span style="color: #f8f8f2">;</span> <span style="color: #6272a4">/* اسکرول‌بار باریک */</span> <span style="color: #50fa7b">scrollbar-color</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">#888 #f1f1f1</span><span style="color: #f8f8f2">;</span> <span style="color: #6272a4">/* رنگ دستگیره سپس مسیر */</span> <span style="color: #f8f8f2">}</span> <span style="color: #6272a4">/* برای کروم، سافاری و اج جدید (همچنان به Webkit نیاز دارید) */</span> <span style="color: #ff79c6">body</span><span style="color: #f8f8f2">::-webkit-scrollbar</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">width</span><span style="color: #bd93f9">:</span> <span style="color: #bd93f9">8px</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span> <span style="color: #ff79c6">body</span><span style="color: #f8f8f2">::-webkit-scrollbar-track</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">background</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">#f1f1f1</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span> <span style="color: #ff79c6">body</span><span style="color: #f8f8f2">::-webkit-scrollbar-thumb</span> <span style="color: #f8f8f2">{</span> <span style="color: #50fa7b">background-color</span><span style="color: #f8f8f2">:</span> <span style="color: #f1fa8c">#888</span><span style="color: #f8f8f2">;</span> <span style="color: #50fa7b">border-radius</span><span style="color: #f8f8f2">:</span> <span style="color: #bd93f9">10px</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">}</span></code></pre> <div style="text-align: right;margin-top: 10px;font-size: 0.85em;color: #aaa"> <p>این کد را با خیال راحت کپی کنید!</p> </p></div> </p></div> </div> <p>**نکته مهم:** برای اطمینان از سازگاری در اکثر مرورگرها، بهترین رویکرد این است که هر دو روش Webkit و استانداردهای جدید را با هم استفاده کنید. مرورگرها فقط از ویژگی‌هایی که پشتیبانی می‌کنند استفاده خواهند کرد و بقیه را نادیده می‌گیرند. این باعث می‌شود که سایت شما در همه مرورگرها بهترین تجربه ممکن را ارائه دهد.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">تفاوت وب‌کیت و استانداردهای جدید: یک مقایسه اجمالی</h3> <p>در حالی که Webkit انعطاف‌پذیری بیشتری در استایل‌دهی به جزئیات اسکرول‌بار می‌دهد (مثلاً `::-webkit-scrollbar-track-piece` یا `::-webkit-scrollbar-button` که در Webkit هستند و در استانداردهای جدید نیستند)، استانداردهای W3C رویکردی ساده‌تر و جامع‌تر را برای تنظیمات پایه (عرض و رنگ) در پیش گرفته‌اند. در آینده، احتمالاً استانداردهای W3C کامل‌تر و با انعطاف‌پذیری بیشتری همراه خواهند شد.</p> <p>—</p> <h2 style="font-size: 2em;font-weight: bold;color: #2C3E50;margin-top: 40px;margin-bottom: 20px">نکات طلایی برای طراحی اسکرول‌بار رسپانسیو و بهینه</h2> <p>یک طراحی خوب، فقط به ظاهر زیبا ختم نمی‌شود؛ باید در هر دستگاهی و با هر اندازه‌ای از صفحه نمایش، عالی به نظر برسد و عملکرد خوبی داشته باشد.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">موبایل، تبلت، لپ‌تاپ و حتی تلویزیون: همه جا رسپانسیو!</h3> <p>* **اندازه‌های منعطف (Flexible Sizes):** به جای استفاده از پیکسل‌های ثابت برای عرض اسکرول‌بار، می‌توانید از `em` یا `rem` استفاده کنید تا با تغییر اندازه فونت ریشه، عرض اسکرول‌بار نیز تغییر کند. همچنین، در دستگاه‌های لمسی، ممکن است بخواهید اسکرول‌بارها کمی پهن‌تر باشند تا کار با آنها راحت‌تر شود. می‌توانید از `media query` برای تنظیم عرض اسکرول‌بار در اندازه‌های مختلف صفحه استفاده کنید.<br /> * **مخفی کردن هوشمند (Smart Hiding):** در موبایل، به دلیل محدودیت فضا، اغلب بهتر است اسکرول‌بارها به طور پیش‌فرض مخفی باشند و فقط هنگام اسکرول ظاهر شوند. این کار باعث می‌شود فضای بیشتری برای محتوای اصلی فراهم شود.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">عملکرد و تجربه کاربری: فراتر از زیبایی</h3> <p>* **کنتراست مناسب (Good Contrast):** رنگ اسکرول‌بار شما باید کنتراست کافی با پس‌زمینه داشته باشد تا برای همه کاربران، از جمله افرادی که مشکلات بینایی دارند، قابل مشاهده باشد.<br /> * **خوانایی (Readability):** اطمینان حاصل کنید که تغییرات اسکرول‌بار، در خوانایی و فهم محتوا اختلالی ایجاد نمی‌کند. هدف، بهبود تجربه است، نه صرفاً زیبایی.<br /> * **عدم افراط:** زیاده‌روی در استایل‌دهی به اسکرول‌بار می‌تواند آن را از هدف اصلی خود دور کرده و حتی آزاردهنده کند. سادگی و کارایی همیشه در اولویت است.<br /> * **تست در مرورگرهای مختلف:** همیشه تغییرات خود را در مرورگرهای اصلی (کروم، فایرفاکس، سافاری، اج) و در دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) تست کنید.</p> <p>—</p> <div style="margin: 30px 0"> <h2 style="font-size: 2em;font-weight: bold;color: #2C3E50;margin-bottom: 20px">مقایسه روش‌های اسکرول‌بار سفارشی</h2> <table style="width: 100%;border-collapse: collapse;min-width: 300px"> <thead> <tr style="background-color: #f2f2f2"> <th style="padding: 12px 15px;text-align: right;border: 1px solid #ddd;font-size: 1.1em">ویژگی</th> <th style="padding: 12px 15px;text-align: right;border: 1px solid #ddd;font-size: 1.1em"><code>::-webkit-scrollbar</code> (غیر استاندارد)</th> </tr> </thead> <tbody> <tr> <td style="padding: 10px 15px;border: 1px solid #ddd;background-color: #fff">مرورگرهای پشتیبانی‌کننده</td> <td style="padding: 10px 15px;border: 1px solid #ddd;background-color: #fff">کروم، سافاری، اج (بر پایه Chromium)، اپرا</td> </tr> <tr style="background-color: #f9f9f9"> <td style="padding: 10px 15px;border: 1px solid #ddd">میزان انعطاف‌پذیری</td> <td style="padding: 10px 15px;border: 1px solid #ddd">بالا (کنترل دقیق بر تمام اجزا: مسیر، دستگیره، گوشه، دکمه‌ها)</td> </tr> <tr> <td style="padding: 10px 15px;border: 1px solid #ddd;background-color: #fff">سادگی استفاده</td> <td style="padding: 10px 15px;border: 1px solid #ddd;background-color: #fff">متوسط (نیاز به استایل‌دهی جداگانه برای هر جزء)</td> </tr> <tr style="background-color: #f9f9f9"> <td style="padding: 10px 15px;border: 1px solid #ddd">هدف</td> <td style="padding: 10px 15px;border: 1px solid #ddd">تغییرات ظاهری جامع و جزئی</td> </tr> <tr> <td style="padding: 10px 15px;border: 1px solid #ddd;background-color: #fff">کدنویسی</td> <td style="padding: 10px 15px;border: 1px solid #ddd;background-color: #fff">چندین شبه‌عنصر (مانند `::-webkit-scrollbar-thumb`, `::-webkit-scrollbar-track`)</td> </tr> </tbody> </table> <div style="font-size: 0.9em;color: #777;margin-top: 15px"> <p><strong>نکته:</strong> برای پشتیبانی کامل در همه مرورگرها، استفاده ترکیبی از `::-webkit-scrollbar` و استانداردهای جدید W3C (مانند `scrollbar-width` و `scrollbar-color` که عمدتاً توسط فایرفاکس پشتیبانی می‌شوند) توصیه می‌شود.</p> </p></div> </div> <p>—</p> <h2 style="font-size: 2em;font-weight: bold;color: #2C3E50;margin-top: 40px;margin-bottom: 20px">عیب‌یابی سریع: مشکلات رایج اسکرول‌بار و راه‌حل‌ها</h2> <p>در طول سفارشی‌سازی اسکرول‌بار، ممکن است با چالش‌هایی روبرو شوید. در اینجا به برخی از رایج‌ترین مشکلات و راه حل‌های آن‌ها اشاره می‌کنیم:</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">مشکل ۱: اسکرول‌بار در فایرفاکس نمایش داده نمی‌شود یا استایل آن تغییر نمی‌کند.</h3> <p>* **راه‌حل:** فایرفاکس از شبه‌عناصر `::-webkit-scrollbar` پشتیبانی نمی‌کند. شما باید از ویژگی‌های استاندارد `scrollbar-width` و `scrollbar-color` برای فایرفاکس استفاده کنید.</p> <div style="background-color: #f8f9fa;border: 1px solid #dee2e6;padding: 15px;border-radius: 8px;margin-top: 15px"> <p style="color: #6c757d;, monospace"><code>body { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; }</code></p> </p></div> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">مشکل ۲: اسکرول‌بار سفارشی روی برخی المنت‌ها کار نمی‌کند، حتی اگر `overflow: scroll` داشته باشند.</h3> <p>* **راه‌حل:** مطمئن شوید که انتخابگر CSS شما به درستی المنت مورد نظر را هدف قرار داده است. اگر در حال استایل‌دهی به یک `div` با کلاس `my-container` هستید، باید از `.my-container::-webkit-scrollbar` استفاده کنید، نه فقط `::-webkit-scrollbar`. همچنین، گاهی اوقات `overflow: auto` به جای `scroll` ممکن است باعث عدم نمایش اسکرول‌بار شود، زیرا تنها در صورت نیاز نمایش داده می‌شود.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">مشکل ۳: اسکرول‌بار خیلی پهن یا خیلی نازک است و حس خوبی به کاربر نمی‌دهد.</h3> <p>* **راه‌حل:** با مقادیر `width` در `::-webkit-scrollbar` و `scrollbar-width` در `body` یا المنت هدف بازی کنید. بهترین راه، تست کردن روی دستگاه‌های مختلف است. برای دستگاه‌های لمسی، کمی پهن‌تر بودن ممکن است بهتر باشد. در این زمینه، <a href="https://fa-tools.ir/shop/" style="color: #007bff;text-decoration: none">ابزارهای بررسی رسپانسیو بودن</a> می‌توانند به شما کمک کنند.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">مشکل ۴: رنگ‌بندی یا ظاهر اسکرول‌بار با طرح کلی سایت همخوانی ندارد.</h3> <p>* **راه‌حل:** زمان بیشتری را صرف انتخاب رنگ‌ها و شعاع گوشه‌ها (border-radius) کنید. می‌توانید از پالت رنگی وب‌سایت خود الهام بگیرید. از ابزارهای طراحی رنگ (color palette generators) استفاده کنید تا ترکیب‌های هماهنگ پیدا کنید. این مورد به <a href="https://fa-tools.ir/contact/" style="color: #007bff;text-decoration: none">مشاوره با تیم فنی</a> هم ربط پیدا می‌کند.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">مشکل ۵: اسکرول‌بار در برخی شرایط ناپدید می‌شود.</h3> <p>* **راه‌حل:** اگر `overflow: hidden` به صورت تصادفی یا عمدی روی المنت حاوی محتوای قابل اسکرول اعمال شده باشد، اسکرول‌بار را مخفی می‌کند. مطمئن شوید که `overflow-y: scroll;` یا `overflow: auto;` برای المنت حاوی محتوا تنظیم شده باشد. همچنین، اگر `width` یا `height` اسکرول‌بار را روی `0` تنظیم کرده باشید، طبیعی است که ناپدید شود. در برخی موارد خاص، `overflow: overlay;` نیز می‌تواند استفاده شود تا اسکرول‌بار روی محتوا قرار گیرد و فضای کمتری اشغال کند، اما این ویژگی هنوز هم استانداردسازی نشده است.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">مشکل ۶: اسکرول‌بار عمودی یا افقی در زمان نیاز نمایش داده نمی‌شود.</h3> <p>* **راه‌حل:** گاهی اوقات، فراموش می‌کنیم که برای اسکرول عمودی باید `overflow-y: scroll;` (یا `auto`) و برای اسکرول افقی `overflow-x: scroll;` (یا `auto`) را تنظیم کنیم. همچنین، مطمئن شوید که محتوای داخلی واقعاً از ارتفاع/عرض المنت والد خود بیشتر است، در غیر این صورت، نیازی به اسکرول‌بار نیست و مرورگر آن را نمایش نمی‌دهد.<br /> یکی از مشکلات رایجی که توسعه‌دهندگان بهش برمی‌خورن، اینه که فکر می‌کنن با استایل دادن به اسکرول‌بار، خودش خودکار نمایش داده میشه. نه رفیق، اول باید با `overflow` مشخص کنی که المنت اصلاً قابل اسکرول هست یا نه.</p> <h3 style="font-size: 1.6em;font-weight: bold;color: #34495E;margin-top: 30px;margin-bottom: 15px">مشکل ۷: عملکرد اسکرول‌بار کند یا لگ دارد.</h3> <p>* **راه‌حل:** در بیشتر موارد، <a href="https://fa-tools.ir/blog/%da%a9%d8%af%d9%87%d8%a7%db%8c-%d8%a2%d9%85%d8%a7%d8%af%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%a7%d8%b9%d8%af%d8%a7%d8%af-%d8%a7%d9%86%da%af%d9%84%db%8c%d8%b3%db%8c-%d8%a8/">تغییرات ساده CSS</a> به طور مستقیم باعث کاهش عملکرد نمی‌شود. کندی ممکن است ناشی از انیمیشن‌های سنگین روی المنت‌های دیگر صفحه، جاوااسکریپت ناکارآمد یا حجم بالای DOM باشد. سعی کنید انیمیشن‌های خود را بهینه کنید و از `will-change` CSS property استفاده کنید تا مرورگر بداند کدام ویژگی‌ها قرار است تغییر کنند و رندرینگ را بهینه‌سازی کند. همچنین، مطمئن شوید که در CSS از `background-image` یا `box-shadow`های پیچیده در اسکرول‌بار استفاده نکرده‌اید که ممکن است بار اضافه ایجاد کنند.</p> <p>—</p> <h2 style="font-size: 2em;font-weight: bold;color: #2C3E50;margin-top: 40px;margin-bottom: 20px">جمع‌بندی: اسکرول‌باری که حرفه‌ای بودن شما را فریاد می‌زند!</h2> <p>حالا دیگر شما با تمام ترفندهای لازم برای طراحی اسکرول‌بارهای سفارشی و مدرن فقط با CSS آشنا هستید. از شبه‌عناصر Webkit گرفته تا استانداردهای جدید W3C، شما <a href="https://fa-tools.ir/blog/%da%86%da%af%d9%88%d9%86%d9%87-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-api%d9%87%d8%a7%db%8c-%d9%85%d8%b1%d9%88%da%af%d8%b1%d8%8c-%d9%85%d9%88%d9%82%d8%b9%db%8c/">ابزارهای قدرتمندی</a> برای تبدیل یک جزء ساده وب‌سایت به یک عنصر جذاب و کاربرپسند در اختیار دارید. فراموش نکنید که هرچقدر هم جزئیات کوچک باشند، در مجموع تجربه کاربری را به شکلی عمیق تحت تأثیر قرار می‌دهند.</p> <p>با دقت به هماهنگی رنگ‌بندی، پهنای اسکرول‌بار، و رفتار آن در حالت‌های مختلف (عادی، هاور و در دستگاه‌های مختلف)، می‌توانید وب‌سایتی بسازید که نه تنها زیباست، بلکه از نظر عملکردی نیز بی‌نقص عمل می‌کند. با این کار، نه تنها زیبایی‌شناسی سایت خود را ارتقا می‌دهید، بلکه نشان می‌دهید که به جزئیات و تجربه کاربران خود اهمیت می‌دهید.</p> <p>ما همیشه اینجا هستیم تا به شما کمک کنیم تا بهترین‌ها را خلق کنید. اگر سوالی دارید، برای <a href="tel:09202232789" style="color: #007bff;text-decoration: none;font-weight: bold">تماس با تیم فنی ما</a> تردید نکنید، یا از طریق <a href="https://fa-tools.ir/contact/" style="color: #007bff;text-decoration: none">صفحه تماس با ما</a> با کارشناسان ما در ارتباط باشید. مسیر توسعه وب، یک مسیر پر از یادگیری و خلاقیت است و ما کنارتانیم. موفق باشید!</p> <p>—</p> <div style="background-color: #f0f8ff;border-left: 5px solid #2196F3;padding: 20px;margin: 30px 0;border-radius: 8px"> <h2 style="font-size: 1.8em;font-weight: bold;color: #1976D2;margin-bottom: 15px">❓ سوالات متداول (FAQ Schema)</h2> <ul style="padding: 0"> <li style="margin-bottom: 15px;border-bottom: 1px dashed #cce7ff;padding-bottom: 15px"> <strong style="color: #333;font-size: 1.1em">آیا سفارشی‌سازی اسکرول‌بار با CSS روی تمام مرورگرها کار می‌کند؟</strong></p> <p style="color: #555;margin-top: 5px">خیر، مرورگرهای مبتنی بر Webkit (کروم، سافاری، اج) از شبه‌عناصر `::-webkit-scrollbar` پشتیبانی می‌کنند، در حالی که فایرفاکس از ویژگی‌های استاندارد `scrollbar-width` و `scrollbar-color` استفاده می‌کند. برای سازگاری کامل، بهتر است هر دو روش را به کار ببرید.</p> </li> <li style="margin-bottom: 15px;border-bottom: 1px dashed #cce7ff;padding-bottom: 15px"> <strong style="color: #333;font-size: 1.1em">چگونه می‌توانم اسکرول‌بار را در موبایل متفاوت از دسکتاپ استایل دهم؟</strong></p> <p style="color: #555;margin-top: 5px">با استفاده از Media Queries در CSS، می‌توانید استایل‌های مختلفی را برای اسکرول‌بار بر اساس عرض صفحه نمایش اعمال کنید. به عنوان مثال، می‌توانید عرض اسکرول‌بار را در صفحات کوچک‌تر، کمتر یا حتی مخفی کنید.</p> </li> <li style="margin-bottom: 15px;border-bottom: 1px dashed #cce7ff;padding-bottom: 15px"> <strong style="color: #333;font-size: 1.1em">آیا سفارشی‌سازی اسکرول‌بار بر عملکرد سایت تأثیر می‌گذارد؟</strong></p> <p style="color: #555;margin-top: 5px">معمولاً تغییرات ساده CSS تأثیر ناچیزی بر عملکرد دارند. اما استفاده از انیمیشن‌های پیچیده یا تصاویر پس‌زمینه بزرگ برای اسکرول‌بار ممکن است در برخی موارد باعث کاهش جزئی عملکرد شود. سادگی همیشه توصیه می‌شود.</p> </li> <li style="margin-bottom: 15px;border-bottom: 1px dashed #cce7ff;padding-bottom: 15px"> <strong style="color: #333;font-size: 1.1em">چرا اسکرول‌بار من با وجود `overflow: scroll` نمایش داده نمی‌شود؟</strong></p> <p style="color: #555;margin-top: 5px">ابتدا مطمئن شوید که محتوای داخل المنت شما واقعاً از ارتفاع یا عرض المنت والد بیشتر است. اگر محتوا به اندازه کافی بزرگ نباشد، مرورگر نیازی به نمایش اسکرول‌بار نمی‌بیند. همچنین بررسی کنید که `overflow: hidden` به اشتباه در جایی اعمال نشده باشد.</p> </li> <li style="margin-bottom: 0"> <strong style="color: #333;font-size: 1.1em">آیا راهی برای مخفی کردن کامل اسکرول‌بار وجود دارد؟</strong></p> <p style="color: #555;margin-top: 5px">بله. برای مرورگرهای Webkit می‌توانید `::-webkit-scrollbar { width: 0; height: 0; }` را استفاده کنید. برای فایرفاکس، `scrollbar-width: none;` کارساز است. اما دقت کنید که مخفی کردن کامل اسکرول‌بار می‌تواند به قابلیت استفاده (Usability) آسیب بزند، مگر اینکه جایگزین مناسبی برای ناوبری ارائه دهید.</p> </li> </ul> </div> </div> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-c52f22a" data-id="c52f22a" data-element_type="column" data-e-type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-ff881e4 elementor-toc--minimized-on-tablet elementor-widget elementor-widget-table-of-contents" data-id="ff881e4" data-element_type="widget" data-e-type="widget" data-settings="{"headings_by_tags":["h2"],"exclude_headings_by_selector":[],"no_headings_message":"No headings were found on this page.","marker_view":"numbers","minimize_box":"yes","minimized_on":"tablet","hierarchical_view":"yes","min_height":{"unit":"px","size":"","sizes":[]},"min_height_tablet":{"unit":"px","size":"","sizes":[]},"min_height_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="table-of-contents.default"> <div class="elementor-toc__header"> <h4 class="elementor-toc__header-title"> Table of Contents </h4> <div class="elementor-toc__toggle-button elementor-toc__toggle-button--expand" role="button" tabindex="0" aria-controls="elementor-toc__ff881e4" aria-expanded="true" aria-label="Open table of contents"><svg aria-hidden="true" class="e-font-icon-svg e-fas-chevron-down" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></div> <div class="elementor-toc__toggle-button elementor-toc__toggle-button--collapse" role="button" tabindex="0" aria-controls="elementor-toc__ff881e4" aria-expanded="true" aria-label="Close table of contents"><svg aria-hidden="true" class="e-font-icon-svg e-fas-chevron-up" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path></svg></div> </div> <div id="elementor-toc__ff881e4" class="elementor-toc__body"> <div class="elementor-toc__spinner-container"> <svg class="elementor-toc__spinner eicon-animation-spin e-font-icon-svg e-eicon-loading" aria-hidden="true" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z"></path></svg> </div> </div> </div> <div class="elementor-element elementor-element-7297409 elementor-widget elementor-widget-heading" data-id="7297409" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <h4 class="elementor-heading-title elementor-size-default">آخرین نوشته‌ها</h4> </div> <div class="elementor-element elementor-element-dcc4977 elementor-grid-1 elementor-posts--thumbnail-none elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-widget elementor-widget-posts" data-id="dcc4977" data-element_type="widget" data-e-type="widget" data-settings="{"classic_columns":"1","classic_row_gap":{"unit":"px","size":20,"sizes":[]},"classic_columns_tablet":"2","classic_columns_mobile":"1","classic_row_gap_tablet":{"unit":"px","size":"","sizes":[]},"classic_row_gap_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="posts.classic"> <div class="elementor-widget-container"> <div class="elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid" role="list"> <article class="elementor-post elementor-grid-item post-1017 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-map-%d9%88-filter-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a8%d8%a7-%da%a9%d8%af%d9%87%d8%a7%db%8c-%d8%a2%d9%85%d8%a7%d8%af%d9%87/" > آموزش map و filter در پایتون با کدهای آماده </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-1010 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/list-comprehension-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%da%a9%d9%88%d8%aa%d8%a7%d9%87%d9%86%d9%88%db%8c%d8%b3%db%8c-%d8%ad%d8%b1%d9%81%d9%87%d8%a7%db%8c/" > List comprehension در پایتون — کوتاه‌نویسی حرفه‌ای </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-1003 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-lambda-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%aa%d9%88%d8%a7%d8%a8%d8%b9-%d8%a8%db%8c%d9%86%d8%a7%d9%85-%d8%a8%d8%a7-%d9%85%d8%ab%d8%a7/" > آموزش lambda در پایتون — توابع بی‌نام با مثال </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-998 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-try-except-%d8%a8%d8%a7-%d9%85%d8%ab%d8%a7%d9%84-%da%a9%d8%a7%d9%85%d9%84/" > مدیریت خطا در پایتون — try except با مثال کامل </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-993 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d9%84%d8%a7%d8%b3-%d9%88-%d8%b4%db%8c%d8%a1%da%af%d8%b1%d8%a7%db%8c%db%8c-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85%d8%a8/" > آموزش کلاس و شیءگرایی در پایتون برای مبتدیان </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-985 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%aa%d8%a7%d9%be%d9%84-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%aa%d9%81%d8%a7%d9%88%d8%aa-%d8%a8%d8%a7-%d9%84%db%8c%d8%b3%d8%aa-%d9%88-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%af/" > تاپل در پایتون — تفاوت با لیست و کاربردهای عملی </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-974 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%b3%d8%aa-set-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d9%85%d9%84-%d8%a8%d8%a7-%da%a9%d8%af%d9%87%d8%a7%db%8c-%d8%a2%d9%85%d8%a7/" > ست (Set) در پایتون — آموزش کامل با کدهای آماده </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-951 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b4%d8%b1%d8%b7-if-else-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a8%d8%a7-%d9%85%d8%ab%d8%a7%d9%84%d9%87%d8%a7%db%8c-%d9%81%d8%a7%d8%b1%d8%b3/" > آموزش شرط if else در پایتون با مثال‌های فارسی </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-922 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d8%b1%d8%b4%d8%aa%d9%87%d9%87%d8%a7-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d9%85%d8%aa%d8%af%d9%87%d8%a7%db%8c-%da%a9%d8%a7%d8%b1%d8%a8/" > کار با رشته‌ها در پایتون — متدهای کاربردی و کدهای آماده </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-859 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%aa%d8%a7%d8%a8%d8%b9-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%aa%d8%b9%d8%b1%db%8c%d9%81%d8%8c-%d8%a2%d8%b1%da%af%d9%88%d9%85%d8%a7%d9%86/" > آموزش تابع در پایتون — تعریف، آرگومان، مقدار بازگشتی </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-851 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%ad%d9%84%d9%82%d9%87-for-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a8%d8%a7-%db%b1%db%b5-%d9%85%d8%ab%d8%a7%d9%84-%d9%88%d8%a7%d9%82%d8%b9%db%8c/" > آموزش حلقه for در پایتون با ۱۵ مثال واقعی </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-850 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%af%db%8c%da%a9%d8%b4%d9%86%d8%b1%db%8c-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d9%85%d9%84-%d8%a8%d8%a7-%da%a9%d8%af%d9%87%d8%a7/" > دیکشنری در پایتون — آموزش کامل با کدهای آماده </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-833 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%84%db%8c%d8%b3%d8%aa-%d8%af%d8%b1-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a8%d8%a7-%d9%85%d8%ab%d8%a7%d9%84%d9%87%d8%a7%db%8c-%da%a9%d8%a7%d8%b1%d8%a8-2/" > آموزش لیست در پایتون با مثال‌های کاربردی و کد آماده </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-799 post type-post status-publish format-standard has-post-thumbnail hentry category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/python/%da%a9%d8%af%d9%87%d8%a7%db%8c-%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85%d8%a8%d8%aa%d8%af%db%8c%d8%a7%d9%86-%db%b1%db%b0-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87/" > کدهای پایتون برای مبتدیان — ۱۰ برنامه ساده که باید بنویسید </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-752 post type-post status-publish format-standard has-post-thumbnail hentry category-html" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/html/50-%d8%aa%da%af-%d9%be%d8%b1-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%88-%d9%85%d9%87%d9%85-%d8%a7%da%86-%d8%aa%db%8c-%d8%a7%d9%85-%d8%a7%d9%84-html/" > 50 تگ پر استفاده و مهم اچ تی ام ال HTML </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-747 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%aa%d8%b1%da%a9%db%8c%d8%a8-css-shapes-%d9%88-clip-path-%d8%a8%d8%b1%d8%a7%db%8c-%d8%ae%d9%84%d9%82-%d8%a7%d8%b4%da%a9%d8%a7%d9%84-%d9%87%d9%86%d8%af%d8%b3%db%8c/" > آموزش ترکیب CSS Shapes و Clip-path برای خلق اشکال هندسی نامنظم و مدرن </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-745 post type-post status-publish format-standard has-post-thumbnail hentry category-css category-html" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%da%a9%d8%af%d9%87%d8%a7%db%8c-%d8%a2%d9%85%d8%a7%d8%af%d9%87-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%a8%d8%ac%d9%87%d8%a7%db%8c-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-status-badges-%d8%af%d8%b1%d8%ae%d8%b4/" > کدهای آماده ساخت بج‌های وضعیت (Status Badges) درخشان و کوچک </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-743 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%aa%d8%b1%d9%81%d9%86%d8%af%d9%87%d8%a7%db%8c-css-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b5%d8%ad%db%8c%d8%ad-%d9%81%d8%a7%d8%b5%d9%84%d9%87-%d8%ad%d8%b1%d9%88%d9%81-let/" > ترفندهای CSS برای مدیریت صحیح فاصله حروف (Letter-spacing) در تایپوگرافی فارسی </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-741 post type-post status-publish format-standard has-post-thumbnail hentry category-css category-python" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%aa%d8%a8%d9%87%d8%a7%db%8c-%d9%85%d8%ad%d8%aa%d9%88%d8%a7%db%8c%db%8c-content-tabs-%d9%85%d8%aa%d8%ad%d8%b1%da%a9-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d8%a7/" > طراحی تب‌های محتوایی (Content Tabs) متحرک با استایل‌های پیشرفته و مینیمال </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-739 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%ac%d8%af%d8%a7%d9%88%d9%84-%d8%af%d8%a7%d8%af%d9%87-data-tables-%da%a9%d8%a7%d9%85%d9%84%d8%a7%d9%8b-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%d8%a8%d8%a7/" > ساخت جداول داده (Data Tables) کاملاً ریسپانسیو با اسکرول افقی ملایم </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-737 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%db%8c%d8%a7%d8%af%d9%87%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d9%81%da%a9%d8%aa-%d8%a8%d8%b2%d8%b1%da%af%d9%86%d9%85%d8%a7%db%8c%db%8c-zoom-on-hover-%d9%86/" > آموزش پیاده‌سازی افکت بزرگنمایی (Zoom on Hover) نرم روی کارت‌های وبلاگ </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-735 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%da%a9%d8%af%d9%87%d8%a7%db%8c-css-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d8%a7%d9%81%da%a9%d8%aa-%d9%86%d9%88%db%8c%d8%b2-noise-texture-%d8%b8%d8%b1%db%8c%d9%81-%d8%af%d8%b1/" > کدهای CSS برای ایجاد افکت نویز (Noise Texture) ظریف در پس‌زمینه‌های تیره </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-733 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%af%da%a9%d9%85%d9%87%d9%87%d8%a7%db%8c-%d8%b4%d8%a8%d8%ad-ghost-buttons-%d8%a8%d8%a7-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86%d9%87%d8%a7%db%8c/" > طراحی دکمه‌های شبح (Ghost Buttons) با انیمیشن‌های پر شدن رنگ پس‌زمینه </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-731 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%a7%d8%b3%da%a9%d9%84%d8%aa%d9%88%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%86-skeleton-screen-%d8%a8%d8%b1%d8%a7%db%8c-%d9%84%d9%88%d8%af/" > آموزش ساخت اسکلتون اسکرین (Skeleton Screen) برای لودینگ ظریف محتوا </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-729 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%da%a9%d8%af%d9%87%d8%a7%db%8c-%d8%a2%d9%85%d8%a7%d8%af%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%d9%81%da%a9%d8%aa%d9%87%d8%a7%db%8c-%d9%86%d9%88%d8%b1%db%8c-%d8%af%d8%a7%db%8c%d9%86%d8%a7%d9%85/" > کدهای آماده برای افکت‌های نوری داینامیک روی لبه‌های باکس (Border Glow) </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-727 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%aa%d8%b1%d9%81%d9%86%d8%af%d9%87%d8%a7%db%8c-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-%d8%aa%d9%88%d8%a7%d8%a8%d8%b9-%d8%b1%db%8c%d8%a7%d8%b6%db%8c-css-calc-min-max-clamp/" > ترفندهای استفاده از توابع ریاضی CSS (calc, min, max, clamp) در طراحی سیال </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-725 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%be%d8%a7%d9%be%d8%a2%d9%be%d9%87%d8%a7%db%8c-popup-%d8%ae%d8%b1%d9%88%d8%ac-%d8%a7%d8%b2-%d8%b5%d9%81%d8%ad%d9%87-%d8%a8%d8%a7-%d8%a7%d9%86%db%8c/" > طراحی پاپ‌آپ‌های (Popup) خروج از صفحه با انیمیشن‌های ورود جذاب و بدون پرش </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-723 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b4%d9%85%d8%a7%d8%b1%d9%86%d8%af%d9%87%d9%87%d8%a7%db%8c-counters-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d8%a7%d8%b3/" > آموزش ساخت شمارنده‌های (Counters) خودکار با استفاده از ویژگی counter-reset </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-721 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%da%a9%d8%af%d9%87%d8%a7%db%8c-css-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84%d8%af%d9%87%db%8c-%d8%a8%d9%87-%d9%84%db%8c%d8%b3%d8%aa%d9%87%d8%a7%db%8c-%d8%a8/" > کدهای CSS برای استایل‌دهی به لیست‌های بولت‌دار و ساخت Custom Bullets </a> </h3> </div> </article> <article class="elementor-post elementor-grid-item post-719 post type-post status-publish format-standard has-post-thumbnail hentry category-css" role="listitem"> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://fa-tools.ir/css/%d9%be%db%8c%d8%a7%d8%af%d9%87%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d9%81%da%a9%d8%aa%d9%87%d8%a7%db%8c-%d8%aa%d8%b1%d8%a7%d9%86%d8%b2%db%8c%d8%b4%d9%86-%d9%be%db%8c%da%86%db%8c%d8%af/" > پیاده‌سازی افکت‌های ترانزیشن پیچیده و ترکیبی روی تصاویر هنگام هاور </a> </h3> </div> </article> </div> </div> </div> <div class="elementor-element elementor-element-7144b40 elementor-widget elementor-widget-wp-widget-categories" data-id="7144b40" data-element_type="widget" data-e-type="widget" data-widget_type="wp-widget-categories.default"> <div class="elementor-widget-container"> <h5>دسته‌ها</h5><nav aria-label="دسته‌ها"> <ul> <li class="cat-item cat-item-7"><a href="https://fa-tools.ir/css/">کدهای CSS</a> </li> <li class="cat-item cat-item-9"><a href="https://fa-tools.ir/html/">کدهای HTML</a> </li> <li class="cat-item cat-item-10"><a href="https://fa-tools.ir/python/">کدهای پایتون / Python</a> </li> <li class="cat-item cat-item-1"><a href="https://fa-tools.ir/blog/">وبلاگ</a> </li> </ul> </nav> </div> </div> </div> </div> </div> </section> </div> <footer data-elementor-type="footer" data-elementor-id="35" class="elementor elementor-35 elementor-location-footer" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-665c408 e-flex e-con-boxed e-con e-parent" data-id="665c408" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-52a51ff elementor-widget elementor-widget-html" data-id="52a51ff" data-element_type="widget" data-e-type="widget" data-widget_type="html.default"> <!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FA-TOOLS — Footer Component</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <style> /* ═══════════════════════════════════════ FA-TOOLS FOOTER v3.0 — 2026 REDESIGN مینیمال · سئو شده · متناسب هومپیج ═══════════════════════════════════════ */ :root { --ink: #0a0a0a; --paper: #f4f3ee; --gold: #c5a059; --gold-light: rgba(197,160,89,0.1); --gold-border:rgba(197,160,89,0.22); --muted: #6b6b6b; --border: rgba(0,0,0,0.07); --white: #ffffff; --mono: 'Fira Code', monospace; --serif: 'Cinzel', serif; --sans: 'Vazirmatn', sans-serif; } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } body { font-family:var(--sans); background:var(--paper); direction:rtl; } /* ═══════════════════════════════════════ FOOTER MAIN ═══════════════════════════════════════ */ .ft-footer { background: var(--ink); position: relative; overflow: hidden; } /* subtle grain overlay */ .ft-footer::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; opacity: 0.5; z-index: 0; } /* gold top border */ .ft-footer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold) 35%, var(--gold) 65%, transparent 100%); opacity: 0.5; } .ft-footer-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 72px 40px 0; } /* ── TOP SECTION ── */ .ftf-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 64px; padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,0.06); } /* ── BRAND COL ── */ .ftf-brand {} .ftf-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 24px; } .ftf-logo-box { width: 42px; height: 42px; background: var(--gold); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 0.9rem; font-weight: 900; color: var(--ink); letter-spacing: 1px; transition: transform 0.3s; flex-shrink: 0; } .ftf-logo:hover .ftf-logo-box { transform: rotate(-4deg); } .ftf-logo-text { display: flex; flex-direction: column; } .ftf-logo-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--paper); line-height: 1; letter-spacing: 2px; } .ftf-logo-sub { font-family: var(--mono); font-size: 0.55rem; color: var(--gold); letter-spacing: 2.5px; margin-top: 3px; line-height: 1; } .ftf-desc { font-size: 0.88rem; color: rgba(255,255,255,0.35); line-height: 1.85; max-width: 280px; font-weight: 300; margin-bottom: 28px; } /* phone CTA در فوتر */ .ftf-phone-cta { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; padding: 14px 22px; border: 1px solid var(--gold-border); border-radius: 10px; background: var(--gold-light); transition: all 0.25s; position: relative; overflow: hidden; } .ftf-phone-cta::before { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; z-index: 0; } .ftf-phone-cta:hover::before { transform: scaleX(1); } .ftf-phone-cta:hover .ftf-phone-num, .ftf-phone-cta:hover .ftf-phone-label { color: var(--ink); } .ftf-phone-cta:hover .ftf-phone-ico { background: rgba(10,10,10,0.12); } .ftf-phone-ico { width: 36px; height: 36px; border-radius: 8px; background: rgba(197,160,89,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; transition: background 0.25s; } .ftf-phone-ico svg { width:15px; height:15px; color: var(--gold); transition: color 0.25s; } .ftf-phone-cta:hover .ftf-phone-ico svg { color: var(--ink); } .ftf-phone-meta { position: relative; z-index: 1; } .ftf-phone-label { font-family: var(--mono); font-size: 0.6rem; color: rgba(255,255,255,0.35); letter-spacing: 2px; line-height: 1; transition: color 0.25s; } .ftf-phone-num { font-family: var(--mono); font-size: 0.92rem; font-weight: 500; color: var(--gold); letter-spacing: 1.5px; margin-top: 4px; line-height: 1; transition: color 0.25s; } /* ── NAV COLS ── */ .ftf-nav-col {} .ftf-nav-col h3 { font-family: var(--mono); font-size: 0.65rem; color: var(--gold); letter-spacing: 3px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); } .ftf-nav-col ul { list-style: none; } .ftf-nav-col ul li { margin-bottom: 2px; } .ftf-nav-col ul li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 0.88rem; color: rgba(255,255,255,0.42); text-decoration: none; font-weight: 400; transition: all 0.18s; margin-right: -10px; } .ftf-nav-col ul li a:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.04); padding-right: 16px; } .ftf-nav-col ul li a .ftf-link-tag { margin-right: auto; font-family: var(--mono); font-size: 0.58rem; color: var(--gold); background: var(--gold-light); padding: 2px 7px; border-radius: 3px; border: 1px solid var(--gold-border); flex-shrink: 0; } /* ── BOTTOM BAR ── */ .ftf-bottom { padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .ftf-copy { font-family: var(--mono); font-size: 0.66rem; color: rgba(255,255,255,0.2); letter-spacing: 1px; direction: ltr; } .ftf-copy a { color: rgba(197,160,89,0.55); text-decoration: none; transition: color 0.2s; } .ftf-copy a:hover { color: var(--gold); } .ftf-bottom-links { display: flex; align-items: center; gap: 24px; } .ftf-bottom-links a { font-family: var(--mono); font-size: 0.65rem; color: rgba(255,255,255,0.22); text-decoration: none; letter-spacing: 1px; transition: color 0.2s; } .ftf-bottom-links a:hover { color: var(--gold); } .ftf-bottom-sep { width: 1px; height: 10px; background: rgba(255,255,255,0.1); } .ftf-made { font-family: var(--mono); font-size: 0.63rem; color: rgba(255,255,255,0.15); letter-spacing: 2px; direction: ltr; } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { .ftf-top { grid-template-columns: 1fr 1fr; gap: 48px; } .ftf-brand { grid-column: 1 / -1; } .ftf-desc { max-width: 100%; } } @media (max-width: 640px) { .ft-footer-inner { padding: 52px 24px 0; } .ftf-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; } .ftf-bottom { flex-direction: column; align-items: flex-start; gap: 14px; } .ftf-bottom-links { flex-wrap: wrap; gap: 16px; } } /* demo styles */ body { min-height: 200px; display: flex; flex-direction: column; } .demo-spacer { flex: 1; background: var(--paper); min-height: 80px; display: flex; align-items: center; justify-content: center; } .demo-note { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); background: rgba(197,160,89,0.1); padding: 8px 20px; border-radius: 6px; border: 1px solid rgba(197,160,89,0.22); font-family: var(--mono); } </style> </head> <body> <!-- ═══════════════════════════════════════ FA-TOOLS FOOTER سئو: schema.org/WPFooter + nav + تماس ═══════════════════════════════════════ --> <footer class="ft-footer" itemscope itemtype="https://schema.org/WPFooter" role="contentinfo" aria-label="فوتر سایت"> <div class="ft-footer-inner"> <!-- TOP GRID --> <div class="ftf-top"> <!-- BRAND --> <div class="ftf-brand"> <a href="https://fa-tools.ir/" class="ftf-logo" itemprop="url" aria-label="FA-TOOLS — صفحه اصلی"> <div class="ftf-logo-box" aria-hidden="true">FA</div> <div class="ftf-logo-text" itemprop="name"> <span class="ftf-logo-name">TOOLS</span> <span class="ftf-logo-sub">CODE LIBRARY</span> </div> </a> <p class="ftf-desc" itemprop="description"> مرجع کدهای آماده فارسی برای توسعه‌دهندگان وب. بیش از ۵۰۰ اسنیپت HTML، CSS، JavaScript و Python. </p> <a href="tel:09202232789" class="ftf-phone-cta" itemprop="telephone" aria-label="تماس مستقیم با مهندس مومنی — ۰۹۲۰۲۲۳۲۷۸۹"> <div class="ftf-phone-ico"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.92 2.18 2 2 0 012.91 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L7.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/> </svg> </div> <div class="ftf-phone-meta"> <div class="ftf-phone-label">DIRECT CALL</div> <div class="ftf-phone-num">۰۹۲۰۲۲۳۲۷۸۹</div> </div> </a> </div> <!-- NAV COL 1: کدها --> <nav class="ftf-nav-col" aria-label="لینک‌های کدها" itemscope itemtype="https://schema.org/SiteNavigationElement"> <h3>SNIPPETS</h3> <ul role="list"> <li> <a href="https://fa-tools.ir/snippets/css/" itemprop="url"> <span itemprop="name">اسنیپت‌های CSS</span> <span class="ftf-link-tag">۲۱۰+</span> </a> </li> <li> <a href="https://fa-tools.ir/snippets/js/" itemprop="url"> <span itemprop="name">توابع JavaScript</span> <span class="ftf-link-tag">۱۵۰+</span> </a> </li> <li> <a href="https://fa-tools.ir/snippets/html/" itemprop="url"> <span itemprop="name">المان‌های HTML</span> <span class="ftf-link-tag">۸۰+</span> </a> </li> <li> <a href="https://fa-tools.ir/snippets/python/" itemprop="url"> <span itemprop="name">اسکریپت‌های Python</span> <span class="ftf-link-tag">۶۰+</span> </a> </li> <li> <a href="https://fa-tools.ir/snippets/wordpress/" itemprop="url"> <span itemprop="name">کدهای WordPress</span> <span class="ftf-link-tag">۴۵+</span> </a> </li> </ul> </nav> <!-- NAV COL 2: سایت --> <nav class="ftf-nav-col" aria-label="لینک‌های اصلی سایت" itemscope itemtype="https://schema.org/SiteNavigationElement"> <h3>PAGES</h3> <ul role="list"> <li> <a href="https://fa-tools.ir/" itemprop="url"> <span itemprop="name">صفحه اصلی</span> </a> </li> <li> <a href="https://fa-tools.ir/calculators/" itemprop="url"> <span itemprop="name">ابزارهای رایگان</span> </a> </li> <li> <a href="https://fa-tools.ir/blog/" itemprop="url"> <span itemprop="name">مقالات و راهنما</span> </a> </li> <li> <a href="https://fa-tools.ir/about/" itemprop="url"> <span itemprop="name">درباره مهندس مومنی</span> </a> </li> <li> <a href="https://fa-tools.ir/contact/" itemprop="url"> <span itemprop="name">تماس و سفارش</span> </a> </li> <li> <a href="https://fa-tools.ir/privacy/" itemprop="url"> <span itemprop="name">حریم خصوصی</span> </a> </li> </ul> </nav> </div> <!-- BOTTOM BAR --> <div class="ftf-bottom"> <div class="ftf-copy" aria-label="حق کپی‌رایت"> © <span id="ftYear">2026</span>  <a href="https://fa-tools.ir/" itemprop="url">FA-TOOLS.IR</a>  — ALL RIGHTS RESERVED </div> <nav class="ftf-bottom-links" aria-label="لینک‌های قانونی"> <a href="https://fa-tools.ir/privacy/">حریم خصوصی</a> <span class="ftf-bottom-sep" aria-hidden="true"></span> <a href="https://fa-tools.ir/terms/">قوانین استفاده</a> <span class="ftf-bottom-sep" aria-hidden="true"></span> <a href="https://fa-tools.ir/sitemap.xml" rel="nofollow">Sitemap</a> </nav> <div class="ftf-made" aria-label="طراحی توسط">BUILT BY ENGINEER MOMENI</div> </div> </div> </footer> <script> document.getElementById('ftYear').textContent = new Date().getFullYear(); </script> </body> </html> </div> </div> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/hello-elementor/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <script id="codemirror-js" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js?ver=5.65.16" defer></script> <script id="codemirror-xml-js" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js?ver=5.65.16" defer></script> <script id="codemirror-css-js" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/css/css.min.js?ver=5.65.16" defer></script> <script id="codemirror-js-js" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js?ver=5.65.16" defer></script> <script id="codemirror-html-js" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/htmlmixed/htmlmixed.min.js?ver=5.65.16" defer></script> <script id="dsp-public-js-extra"> var DSP = {"ajax_url":"https://fa-tools.ir/wp-admin/admin-ajax.php","nonce":"f833efa956"}; //# sourceURL=dsp-public-js-extra </script> <script id="dsp-public-js" src="https://fa-tools.ir/wp-content/plugins/devshowcase-plugin/public/js/public.js?ver=1.0.0" defer></script> <script id="rocket-browser-checker-js-after"> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); //# sourceURL=rocket-browser-checker-js-after </script> <script id="rocket-preload-links-js-extra"> var RocketPreloadLinksConfig = {"excludeUris":"/(?:.+/)?feed(?:/(?:.+/?)?)?$|/(?:.+/)?embed/|/(index.php/)?(.*)wp-json(/.*|$)|/refer/|/go/|/recommend/|/recommends/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https://fa-tools.ir","onHoverDelay":"100","rateThrottle":"3"}; //# sourceURL=rocket-preload-links-js-extra </script> <script id="rocket-preload-links-js-after"> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); //# sourceURL=rocket-preload-links-js-after </script> <script id="hello-theme-frontend-js" src="https://fa-tools.ir/wp-content/themes/hello-elementor/assets/js/hello-frontend.js?ver=3.4.9" defer></script> <script id="elementor-webpack-runtime-js" src="https://fa-tools.ir/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=4.1.3" defer></script> <script id="elementor-frontend-modules-js" src="https://fa-tools.ir/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=4.1.3" defer></script> <script id="jquery-ui-core-js" src="https://fa-tools.ir/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" defer></script> <script id="elementor-frontend-js-before"> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Facebook","shareOnTwitter":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Twitter","pinIt":"\u067e\u06cc\u0646 \u06a9\u0646\u06cc\u062f","download":"\u062f\u0627\u0646\u0644\u0648\u062f","downloadImage":"\u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631","fullscreen":"\u062a\u0645\u0627\u0645\u200c\u0635\u0641\u062d\u0647","zoom":"\u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc","share":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc","playVideo":"\u067e\u062e\u0634 \u0648\u06cc\u062f\u06cc\u0648","previous":"\u0642\u0628\u0644\u06cc","next":"\u0628\u0639\u062f\u06cc","close":"\u0628\u0633\u062a\u0646","a11yCarouselPrevSlideMessage":"\u0627\u0633\u0644\u0627\u06cc\u062f \u0642\u0628\u0644\u06cc","a11yCarouselNextSlideMessage":"\u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\u06cc","a11yCarouselFirstSlideMessage":"\u0627\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0633\u062a","a11yCarouselLastSlideMessage":"\u0627\u06cc\u0646 \u0622\u062e\u0631\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0633\u062a","a11yCarouselPaginationBulletMessage":"\u0631\u0641\u062a\u0646 \u0628\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f"},"is_rtl":true,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"\u062d\u0627\u0644\u062a \u0639\u0645\u0648\u062f\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"\u062d\u0627\u0644\u062a \u0627\u0641\u0642\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"\u062d\u0627\u0644\u062a \u0639\u0645\u0648\u062f\u06cc \u062a\u0628\u0644\u062a","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"\u062d\u0627\u0644\u062a \u0627\u0641\u0642\u06cc \u062a\u0628\u0644\u062a","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"\u0644\u067e \u062a\u0627\u067e","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"\u0635\u0641\u062d\u0647 \u0639\u0631\u06cc\u0636 (Widescreen)","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"4.1.3","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_optimized_markup":true,"theme_builder_v2":true,"hello-theme-header-footer":true,"e_pro_free_trial_popup":true,"nested-elements":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"e_opt_in_v4_page":true,"e_components":true,"e_interactions":true,"e_widget_creation":true,"import-export-customization":true,"e_pro_atomic_form":true,"mega-menu":true,"e_pro_variables":true,"e_pro_interactions":true},"urls":{"assets":"https:\/\/fa-tools.ir\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/fa-tools.ir\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/fa-tools.ir\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"b0dee03ab7","atomicFormsSendForm":"93755111a2"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","hello_header_logo_type":"title","hello_footer_logo_type":"logo"},"post":{"id":608,"title":"%D8%AA%D8%B1%D9%81%D9%86%D8%AF%D9%87%D8%A7%DB%8C%20%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C%20%D8%A7%D8%B3%DA%A9%D8%B1%D9%88%D9%84%E2%80%8C%D8%A8%D8%A7%D8%B1%20%28Scrollbar%29%20%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C%20%D9%88%20%D9%85%D8%AF%D8%B1%D9%86%20%D9%81%D9%82%D8%B7%20%D8%A8%D8%A7%20CSS%20%28%20%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%20%D8%B4%DA%A9%D9%84%20%D8%A7%D8%B3%DA%A9%D8%B1%D9%88%D9%84%20%D8%A8%D8%A7%D8%B1%20%D8%A8%D8%A7%20CSS%29%20-%20%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%20%D9%81%D8%A7%D8%B1%D8%B3%DB%8C","excerpt":"","featuredImage":"https:\/\/fa-tools.ir\/wp-content\/uploads\/2026\/05\/d8a7d8a8d8b2d8a7d8b1-d981d8a7d8b1d8b3db8cd8aad8b1d981d986d8afd987d8a7db8c-d8b7d8b1d8a7d8addb8c-d8a7d8b3daa9d8b1d988d984d8a8d8a7.jpg"}}; //# sourceURL=elementor-frontend-js-before </script> <script id="elementor-frontend-js" src="https://fa-tools.ir/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=4.1.3" defer></script> <script id="imagesloaded-js" src="https://fa-tools.ir/wp-includes/js/imagesloaded.min.js?ver=5.0.0" defer></script> <script id="swiper-js" src="https://fa-tools.ir/wp-content/plugins/elementor/assets/lib/swiper/v8/swiper.min.js?ver=8.4.5" defer></script> <script id="elementor-pro-webpack-runtime-js" src="https://fa-tools.ir/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=4.1.1" defer></script> <script id="wp-hooks-js" src="https://fa-tools.ir/wp-includes/js/dist/hooks.min.js?ver=7496969728ca0f95732d"></script> <script id="wp-i18n-js" src="https://fa-tools.ir/wp-includes/js/dist/i18n.min.js?ver=781d11515ad3d91786ec"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'rtl' ] } ); //# sourceURL=wp-i18n-js-after </script> <script id="elementor-pro-frontend-js-before"> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/fa-tools.ir\/wp-admin\/admin-ajax.php","nonce":"3c79772e82","urls":{"assets":"https:\/\/fa-tools.ir\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/fa-tools.ir\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":false},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"fa_IR","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/fa-tools.ir\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; //# sourceURL=elementor-pro-frontend-js-before </script> <script id="elementor-pro-frontend-js" src="https://fa-tools.ir/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=4.1.1" defer></script> <script id="pro-elements-handlers-js" src="https://fa-tools.ir/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=4.1.1" defer></script> </body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->