|
|
| خط ۱: |
خط ۱: |
| <!-- شروع کانتینر اصلی برای قرار دادن کل طرح در وسط صفحه -->
| |
| {| 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 style="
| |
| width: 230px;
| |
| height: 230px;
| |
| border-radius: 15px; /* تغییر از ۵۰٪ به ۱۵ پیکسل برای تبدیل دایره به مربع با گوشههای نرم */
| |
| /* افکت گرادیان نوری برای سهبعدی کردن سطح مربع */
| |
| 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: 215px;
| |
| height: 215px;
| |
| border-radius: 8px; /* مربع داخلی هم متناسب با بیرونی تنظیم شده است */
| |
| 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;
| |
| background-color: #f9f9f9;
| |
| ">
| |
|
| |
| <!-- ۳. بخش فراخوانی تصویر (هوشمند سازی شده برای فیت شدن در مربع) -->
| |
| <div style="min-width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center;">
| |
| [[File:1.jpg|300px|link=|alt=icon]]
| |
| </div>
| |
|
| |
| </div> <!-- پایان مربع داخلی -->
| |
| </div> <!-- پایان مربع بیرونی -->
| |
|
| |
| |} <!-- پایان کل کد -->
| |
|
| |
|
| |
|
| |
|
| |
| <!-- کانتینر بیرونی جهت وسطچین کردن آیکون در صفحه --> | | <!-- کانتینر بیرونی جهت وسطچین کردن آیکون در صفحه --> |
| {| style="margin: 20px auto; background: transparent; border: none; border-collapse: collapse;" | | {| style="margin: 20px auto; background: transparent; border: none; border-collapse: collapse;" |
