کانتینرعکس دایره - فراغیب
Esfandiari (بحث | مشارکتها) صفحه را خالی کرد برچسب: خالی کردن |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش برچسب: برگرداندهشده |
||
| خط ۱: | خط ۱: | ||
<!DOCTYPE html> | |||
<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 { | |||
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 { | |||
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 { | |||
transform: translateY(-4px); | |||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); | |||
} | |||
/* تنظیمات عکس دلخواه با متد بهینه object-fit و لود بهینه */ | |||
.wiki-custom-image { | |||
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) { | |||
.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="https://fa.faraghaib.ir/w/images/1/1e/Earth.png" | |||
alt="تصویر نمایه یا نماد الگو در ویکیپدیا" | |||
title="نمای شماتیک تصویر" | |||
class="wiki-custom-image" | |||
loading="lazy" | |||
width="220" | |||
height="220" | |||
> | |||
</figure> | |||
</div> | |||
</body> | |||
</html> | |||
نسخهٔ ۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۹:۴۶
<!DOCTYPE html>
