|
|
| (۴ نسخهٔ میانی ویرایش شده توسط ۲ کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| | <div> |
| <!-- کانتینر بیرونی جهت وسطچین کردن آیکون در صفحه --> | | <!-- کانتینر بیرونی جهت وسطچین کردن آیکون در صفحه --> |
| {| 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 class="wiki-3d-box" > |
| | |
| | |
| <!-- مربع سهبعدی بیرونی با کلاس انیمیشن هاور --> | |
| <div class="wiki-3d-box"> | |
| | |
| <!-- قاب سفید داخلی --> | | <!-- قاب سفید داخلی --> |
| <div class="wiki-3d-inner-frame"> | | <div class="wiki-3d-inner-frame-circle" > |
| | | <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار --> |
| | | <div class=" wiki- 3d- image- wrapper"> |
| | | [[File:{{{تصویر}}}]] |
| <!-- شروع جدول نگهدارنده کل طرح برای تراز کردن آن در وسط صفحه --> | | </div> |
| {| style="margin: 20px auto; background: transparent; border: none; border-collapse: collapse;"
| | </div> <!-- پایان قاب داخلی --> |
| | |
| <!-- ایجاد یک سلول در جدول برای مشخص کردن ابعاد بیرونی (عرض و ارتفاع ۲۶۰ پیکسل) -->
| |
| | style="width: 260px; height: 260px; display: flex; justify-content: center; align-items: center;" |
| |
| | |
| <!-- دایره بیرونی و اصلی (بکگراند سهبعدی و سایهها در این بخش اعمال شدهاند) -->
| |
| | |
| 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 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:earth.png|200px|link=|class=custom-img]]
| |
| | |
| </div> <!-- پایان دایره داخلی --> | |
| </div> <!-- پایان دایره بیرونی --> | | </div> <!-- پایان دایره بیرونی --> |
| | | |} <!-- پایان کانتینر --> |
| |} <!-- پایان جدول نگهدارنده کل طرح --> | | </div> |
| | <!--style="margin: 20px auto; background: transparent; border: none; border-collapse: collapse;" |
| | | style="width: 800px; height: 260px; display: flex; justify-content: center; align-items: center;"--> |