کانتینرعکس دایره - فراغیب

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

نسخهٔ ‏۸ ژوئیهٔ ۲۰۲۶، ساعت ۱۱:۰۵

     [[File:{{{تصویر}}}|200px|link=|class=custom-img]]

@@ خط ۱: / خط ۱: @@
+<!-- شروع جدول نگهدارنده کل طرح برای تراز کردن آن در وسط صفحه -->
 {| style="margin: 20px auto; background: transparent; border: none; border-collapse: collapse;"
+<!-- ایجاد یک سلول در جدول برای مشخص کردن ابعاد بیرونی (عرض و ارتفاع ۲۶۰ پیکسل) -->
 | style="width: 260px; height: 260px; display: flex; justify-content: center; align-items: center;" |
-<div style="width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fcfcfc 40%, #ececec 80%, #dfdfdf 100%); border: 3px solid #eef0f3; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), inset 0 4px 8px rgba(255, 255, 255, 1), inset 0 -6px 12px rgba(0, 0, 0, 0.08); display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative;">
-  <div style="width: 230px; height: 230px; border-radius: 50%; border: 4px solid #ffffff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); overflow: hidden; display: flex; justify-content: center; align-items: center;">
+  <!-- دایره بیرونی و اصلی (بک‌گراند سه‌بعدی و سایه‌ها در این بخش اعمال شده‌اند) -->
-    [[File:search.png|200px|link=|class=custom-img]]
+  <div style="
-  </div>
+    width: 230px; /* عرض دایره بیرونی */
-</div>
+    height: 230px; /* ارتفاع دایره بیرونی */
-|}
+    border-radius: 50%; /* تبدیل جعبه به دایره کامل */
+    /* افکت گرادیان نوری از بالا چپ به پایین راست برای سه‌بعدی کردن رنگ دایره */
+    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fcfcfc 40%, #ececec 80%, #dfdfdf 100%);
+    border: 3px solid #eef0f3; /* لبه باریک دور دایره برای جدا شدن از پس‌زمینه */
+    /* افکت‌های سایه: اولی سایه بیرونی ملایم، دومی نور سفید داخلی از بالا، سومی سایه تیره داخلی در پایین */
+    box-shadow: 0 0px 55px rgb(100, 149, 237), inset 0 4px 8px rgba(255, 255, 255, 1), inset 0 -6px 12px rgba(0, 0, 0, 0.08);
+    display: flex; /* فعال کردن چیدمان جعبه‌ای برای قرار دادن دایره بعدی در مرکز */
+    justify-content: center; /* وسط‌چین کردن افقی محتویات داخل دایره */
+    align-items: center; /* وسط‌چین کردن عمودی محتویات داخل دایره */
+    overflow: hidden; /* برش دادن بخش‌های اضافی تصویر که از دایره بیرون می‌زنند */
+    position: relative; /* موقعیت‌دهی نسبی برای هماهنگی فرزندان */
+  {{{outer style}}};">
+    <!-- دایره داخلی (که تصویر شما درون آن قرار می‌گیرد و حاشیه سفید دارد) -->
+    <div style="
+      width: 215px; /* اندازه دایره داخلی نسبت به دایره بیرونی (۸۲ درصد) */
+      height:215px; /* ارتفاع دایره داخلی نسبت به دایره بیرونی */
+      border-radius: 50%; /* دایره‌ای کردن کادر داخلی */
+      border: 4px solid #ffffff; /* خط حاشیه سفید ضخیم دور تصویر */
+      box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12); /* سایه نرم دور تصویر برای برجسته شدن آن روی دایره اصلی */
+      overflow: hidden; /* برش خوردن گوشه‌های عکس به شکل دایره کامل */
+      display: flex; /* چیدمان منعطف برای وسط‌چین کردن عکس */
+      justify-content: center; /* وسط‌چین افقی عکس */
+      align-items: center; /* وسط‌چین عمودی عکس */
+    {{{inner style}}};">
+      <!-- تگ فراخوانی تصویر از ویکی‌پدیا (می‌توانید نام فایل را با فایل خود جایگزین کنید) -->
+      [[File:{{{تصویر}}}|200px|link=|class=custom-img]]
+    </div> <!-- پایان دایره داخلی -->
+  </div> <!-- پایان دایره بیرونی -->
+|} <!-- پایان جدول نگهدارنده کل طرح -->