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

دیداریویکی‌متن

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

{{{تصویر}}}

@@ خط ۱: / خط ۱: @@
-<!DOCTYPE html>
+<div>
-<html lang="fa" dir="rtl">
+<!-- کانتینر بیرونی جهت وسط‌چین کردن آیکون در صفحه -->
-<head>
-  <meta charset="UTF-8">
-  <title>طرح دایره‌ای با عکس دلخواه</title>
-  <style>
-    /* تنظیمات پایه صفحه */
-    body {
-      margin: 0;
-      padding: 0;
-      min-height: 100vh;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: #ffffff;
-      font-family: sans-serif;
-    }
-    /* ظرف اصلی برای نگهداشتن دایره */
+  <!-- مربع سه‌بعدی بیرونی با کلاس انیمیشن هاور -->
-    .icon-wrapper {
+  <div class="wiki-3d-circle">
-      width: 260px;
-      height: 260px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-     /* دایره‌ی پس‌زمینه اصلی (با گرادیان و سایه نرم) */
+     <!-- قاب سفید داخلی -->
-    .circle-bg {
+    <div class="wiki-3d-inner-frame-circle">
-      width: 230px;
-      height: 230px;
-      border-radius: 50%; /* تبدیل مربع به دایره */
-      background: radial-gradient(circle at center, #ffffff 0%, #f4f4f4 70%, #e9e9e9 100%); /* گرادیان ملایم */
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* سایه نرم زیر دایره */
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden; /* برش دادن اضافات عکس */
-      position: relative;
-    }
-    /* تنظیمات عکس دلخواه */
+      <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار -->
-    .custom-image {
+       <div class="wiki-3d-image-wrapper-circle">
-       width: 85%; /* ابعاد عکس داخل دایره */
+{{{تصویر}}}
-      height: 85%;
+      </div>
-      border-radius: 50%; /* دایره‌ای کردن عکس */
-      object-fit: cover; /* تنظیم هوشمند عکس بدون کشیدگی */
-      border: 3px solid #ffffff; /* حاشیه سفید ظریف دور عکس */
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* سایه کوچک برای عمق دادن به عکس */
-    }
-  </style>
-</head>
-<body>
-  <!-- ظرف اصلی -->
+    </div> <!-- پایان قاب داخلی -->
-  <div class="icon-wrapper">
+  </div> <!-- پایان مربع بیرونی -->
-    <!-- دایره پس‌زمینه -->
-    <div class="circle-bg">
-      <!-- آدرس عکس خود را اینجا قرار دهید -->
-      <img src="https://via.placeholder.com/300" alt="عکس دلخواه" class="custom-image">
-    </div>
-  </div>
-</body>
+<!-- پایان کانتینر -->
-</html>
+</div>