|
|
| (۳۹ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| <!DOCTYPE html> | | <div> |
| <html lang="fa" dir="rtl"> | | <!-- کانتینر بیرونی جهت وسطچین کردن آیکون در صفحه --> |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>طرح دایرهای ریسپانسیو با عکس دلخواه</title>
| |
| <style>
| |
| /* تنظیمات پایه صفحه برای پیشنمایش استاندارد */
| |
| body {
| |
| margin: 0;
| |
| padding: 0;
| |
| min-height: 100vh;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| background-color: #f8f9fa; /* رنگ پسزمینه پیشفرض ویکیپدیا */
| |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
| |
| }
| |
|
| |
|
| /* ظرف اصلی با قابلیت انعطافپذیری و ریسپانسیو کامل */
| | <!-- مربع سهبعدی بیرونی با کلاس انیمیشن هاور --> |
| .wiki-icon-container {
| | <div class="wiki-3d-circle"> |
| width: 100%;
| |
| max-width: 260px; /* حداکثر اندازه در دسکتاپ */
| |
| aspect-ratio: 1 / 1; /* حفظ تناسب مربعی در تمام ابعاد */
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| box-sizing: border-box;
| |
| padding: 10px;
| |
| }
| |
|
| |
|
| /* دایرهی پسزمینه اصلی (بهینهسازی شده برای سئو بصری و موبایل) */ | | <!-- قاب سفید داخلی --> |
| .wiki-circle-bg {
| | <div class="wiki-3d-inner-frame-circle"> |
| width: 100%;
| |
| height: 100%;
| |
| border-radius: 50%;
| |
| background: radial-gradient(circle at center, #ffffff 0%, #f4f4f4 70%, #e9e9e9 100%);
| |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* سایه ملایم استاندارد وب */
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| overflow: hidden;
| |
| position: relative;
| |
| transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن نرم برای تعامل کاربر */
| |
| }
| |
|
| |
|
| /* هاور ملایم برای بهبود تجربه کاربری */
| | <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار --> |
| .wiki-circle-bg:hover {
| | <div class="wiki-3d-image-wrapper-circle"> |
| transform: translateY(-4px);
| | {{{تصویر}}} |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
| | </div> |
| }
| |
|
| |
|
| /* تنظیمات عکس دلخواه با متد بهینه object-fit و لود بهینه */ | | </div> <!-- پایان قاب داخلی --> |
| .wiki-custom-image {
| | </div> <!-- پایان مربع بیرونی --> |
| width: 85%;
| |
| height: 85%;
| |
| border-radius: 50%;
| |
| object-fit: cover;
| |
| border: 3px solid #ffffff;
| |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
| |
| /* جلوگیری از کشیدگی تصویر در مرورگرهای قدیمی */
| |
| display: block;
| |
| }
| |
|
| |
|
| /* بهینهسازی اختصاصی برای نمایشگرهای بسیار کوچک (موبایل) */
| | <!-- پایان کانتینر --> |
| @media (max-width: 320px) {
| | </div> |
| .wiki-icon-container {
| |
| max-width: 180px;
| |
| }
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| | |
| <!-- ظرف معنایی (Semantic) مناسب برای سئو -->
| |
| <div class="wiki-icon-container">
| |
| <figure class="wiki-circle-bg">
| |
| <!--
| |
| توضیحات سئو:
| |
| 1. loading="lazy" بارگذاری تصویر را تا زمان رسیدن کاربر به آن به تعویق میاندازد که سرعت لود را به شدت بالا میبرد.
| |
| 2. alt دقیق و مرتبط با موضوع تصویر انتخاب شود.
| |
| 3. title برای نمایش متن راهنما هنگام نگه داشتن ماوس اضافه شده است.
| |
| -->
| |
| <img
| |
| src="earth.png"
| |
| alt="تصویر نمایه یا نماد الگو در ویکیپدیا"
| |
| title="نمای شماتیک تصویر"
| |
| class="wiki-custom-image"
| |
| loading="lazy"
| |
| width="220"
| |
| height="220"
| |
| >
| |
| </figure>
| |
| </div>
| |
| | |
| </body>
| |
| </html>
| |