الگو:کانتینر کادر چرخان - تاریخچهٔ نسخه‌ها

https://fa.faraghaib.ir/w/index.php?action=history&feed=atom&title=%D8%A7%D9%84%DA%AF%D9%88%3A%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1_%DA%A9%D8%A7%D8%AF%D8%B1_%DA%86%D8%B1%D8%AE%D8%A7%D9%86 الگو:کانتینر کادر چرخان - تاریخچهٔ نسخه‌ها 2026-08-26T08:28:41Z تاریخچهٔ نسخه‌ها برای این صفحه در ویکی MediaWiki 1.43.8 https://fa.faraghaib.ir/w/index.php?title=%D8%A7%D9%84%DA%AF%D9%88:%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1_%DA%A9%D8%A7%D8%AF%D8%B1_%DA%86%D8%B1%D8%AE%D8%A7%D9%86&diff=6197&oldid=prev Javid: صفحه‌ای تازه حاوی «<html>  <section class="gallery-section" aria-labelledby="gallery-title">  <h2 id="gallery-title" class="sr-only"> گالری تصاویر </h2> <div class="gallery-con...» ایجاد کرد 2026-08-10T12:14:31Z

<p>صفحه‌ای تازه حاوی «<html>  <section class="gallery-section" aria-labelledby="gallery-title">  <h2 id="gallery-title" class="sr-only"> گالری تصاویر </h2> <div class="gallery-con...» ایجاد کرد</p> <p><b>صفحهٔ تازه</b></p><div><html><br /> <br /> <br /> <section class="gallery-section" aria-labelledby="gallery-title"><br /> <br /> <br /> <h2 id="gallery-title" class="sr-only"><br /> گالری تصاویر<br /> </h2><br /> <br /> <div class="gallery-container"><br /> <br /> <div class="gallery-grid"><br /> <br /> <br /> <article class="gallery-card"><br /> <br /> <figure class="gallery-figure"><br /> <br /> <img<br /> src="images/photo-01.webp"<br /> alt="توضیح مناسب برای تصویر اول"<br /> loading="lazy"<br /> decoding="async"<br /> width="600"<br /> height="400"><br /> <br /> </figure><br /> <br /> </article><br /> <br /> <br /> <article class="gallery-card"><br /> <br /> <figure class="gallery-figure"><br /> <br /> <img<br /> src="images/photo-02.webp"<br /> alt="توضیح مناسب برای تصویر دوم"<br /> loading="lazy"<br /> decoding="async"<br /> width="600"<br /> height="400"><br /> <br /> </figure><br /> <br /> </article><br /> <br /> <br /> <article class="gallery-card"><br /> <br /> <figure class="gallery-figure"><br /> <br /> <img<br /> src="images/photo-03.webp"<br /> alt="توضیح مناسب برای تصویر سوم"<br /> loading="lazy"<br /> decoding="async"<br /> width="600"<br /> height="400"><br /> <br /> </figure><br /> <br /> </article><br /> <br /> <br /> <article class="gallery-card"><br /> <br /> <figure class="gallery-figure"><br /> <br /> <img<br /> src="images/photo-04.webp"<br /> alt="توضیح مناسب برای تصویر چهارم"<br /> loading="lazy"<br /> decoding="async"<br /> width="600"<br /> height="400"><br /> <br /> </figure><br /> <br /> </article><br /> <br /> <br /> <article class="gallery-card"><br /> <br /> <figure class="gallery-figure"><br /> <br /> <img<br /> src="images/photo-05.webp"<br /> alt="توضیح مناسب برای تصویر پنجم"<br /> loading="lazy"<br /> decoding="async"<br /> width="600"<br /> height="400"><br /> <br /> </figure><br /> <br /> </article><br /> <br /> <br /> <article class="gallery-card"><br /> <br /> <figure class="gallery-figure"><br /> <br /> <img<br /> src="images/photo-06.webp"<br /> alt="توضیح مناسب برای تصویر ششم"<br /> loading="lazy"<br /> decoding="async"<br /> width="600"<br /> height="400"><br /> <br /> </figure><br /> <br /> </article><br /> <br /> </div><br /> <br /> </div><br /> <br /> </section><br /> <br /> <style><br /> /*==========================================================<br /> Responsive Image Gallery<br /> Part 2 - Base CSS (Mobile First)<br /> SEO + Performance + Accessibility<br /> ==========================================================*/<br /> <br /> /*------------------------------<br /> متغیرها<br /> ------------------------------*/<br /> <br /> :root{<br /> <br /> --gallery-gap:20px;<br /> <br /> --gallery-radius:18px;<br /> <br /> --gallery-shadow:<br /> 0 8px 25px rgba(0,0,0,.08);<br /> <br /> --gallery-shadow-hover:<br /> 0 18px 40px rgba(0,0,0,.12);<br /> <br /> --gallery-bg:#ffffff;<br /> <br /> --gallery-transition:.35s ease;<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> تنظیمات کلی<br /> ------------------------------*/<br /> <br /> *,<br /> *::before,<br /> *::after{<br /> <br /> box-sizing:border-box;<br /> <br /> }<br /> <br /> <br /> .gallery-section{<br /> <br /> width:100%;<br /> <br /> padding:24px 14px;<br /> <br /> margin:0 auto;<br /> <br /> }<br /> <br /> <br /> .gallery-container{<br /> <br /> width:100%;<br /> max-width:1400px;<br /> margin:auto;<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> عنوان فقط برای سئو<br /> ------------------------------*/<br /> <br /> .sr-only{<br /> <br /> position:absolute;<br /> <br /> width:1px;<br /> <br /> height:1px;<br /> <br /> padding:0;<br /> <br /> margin:-1px;<br /> <br /> overflow:hidden;<br /> <br /> clip:rect(0,0,0,0);<br /> <br /> white-space:nowrap;<br /> <br /> border:0;<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> گرید تصاویر<br /> ------------------------------*/<br /> <br /> .gallery-grid{<br /> <br /> display:grid;<br /> <br /> grid-template-columns:1fr;<br /> <br /> gap:var(--gallery-gap);<br /> <br /> align-items:stretch;<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> کارت<br /> ------------------------------*/<br /> <br /> .gallery-card{<br /> <br /> background:var(--gallery-bg);<br /> <br /> border-radius:var(--gallery-radius);<br /> <br /> overflow:hidden;<br /> <br /> box-shadow:var(--gallery-shadow);<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> Figure<br /> ------------------------------*/<br /> <br /> .gallery-figure{<br /> <br /> margin:0;<br /> <br /> line-height:0;<br /> <br /> overflow:hidden;<br /> <br /> border-radius:inherit;<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> تصویر<br /> ------------------------------*/<br /> <br /> .gallery-figure img{<br /> <br /> display:block;<br /> <br /> width:100%;<br /> <br /> height:auto;<br /> <br /> object-fit:cover;<br /> <br /> border-radius:inherit;<br /> <br /> backface-visibility:hidden;<br /> <br /> transform-origin:center center;<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> جلوگیری از کشیدگی تصاویر<br /> ------------------------------*/<br /> <br /> .gallery-card img{<br /> <br /> aspect-ratio:16 / 10;<br /> <br /> }<br /> <br /> <br /> /*------------------------------<br /> تصاویر لینک‌دار<br /> ------------------------------*/<br /> <br /> .gallery-card a{<br /> <br /> display:block;<br /> <br /> text-decoration:none;<br /> <br /> color:inherit;<br /> <br /> }<br /> /*==========================================================<br /> Part 3<br /> Hover Effects + Responsive Layout<br /> ==========================================================*/<br /> <br /> <br /> /*---------------------------------<br /> افکت هاور کارت<br /> ----------------------------------*/<br /> <br /> .gallery-card{<br /> <br /> transition:<br /> box-shadow .35s ease,<br /> transform .35s ease;<br /> <br /> }<br /> <br /> <br /> /*---------------------------------<br /> افکت هاور تصویر<br /> ----------------------------------*/<br /> <br /> .gallery-figure img{<br /> <br /> transition:<br /> transform .45s ease;<br /> <br /> will-change:transform;<br /> <br /> }<br /> <br /> <br /> /* فقط روی دستگاه‌هایی که هاور دارند */<br /> @media (hover:hover){<br /> <br /> .gallery-card:hover{<br /> <br /> box-shadow:var(--gallery-shadow-hover);<br /> <br /> }<br /> <br /> .gallery-card:hover .gallery-figure img{<br /> <br /> transform:rotate(-3deg) scale(1.02);<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> /* هنگام کلیک در موبایل */<br /> .gallery-card:active .gallery-figure img{<br /> <br /> transform:rotate(-3deg) scale(1.02);<br /> <br /> }<br /> <br /> <br /> /*---------------------------------<br /> Tablet<br /> ----------------------------------*/<br /> <br /> @media (min-width:768px){<br /> <br /> .gallery-section{<br /> <br /> padding:35px 20px;<br /> <br /> }<br /> <br /> .gallery-grid{<br /> <br /> grid-template-columns:repeat(2,minmax(0,1fr));<br /> <br /> gap:24px;<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> /*---------------------------------<br /> Laptop<br /> ----------------------------------*/<br /> <br /> @media (min-width:1024px){<br /> <br /> .gallery-grid{<br /> <br /> grid-template-columns:repeat(3,minmax(0,1fr));<br /> <br /> gap:28px;<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> /*---------------------------------<br /> Desktop Large<br /> ----------------------------------*/<br /> <br /> @media (min-width:1400px){<br /> <br /> .gallery-grid{<br /> <br /> gap:32px;<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> /*---------------------------------<br /> تصاویر خیلی بزرگ<br /> ----------------------------------*/<br /> <br /> .gallery-figure{<br /> <br /> background:#f8f9fa;<br /> <br /> }<br /> <br /> <br /> /* جلوگیری از پرش تصویر */<br /> .gallery-figure img{<br /> <br /> vertical-align:middle;<br /> <br /> }<br /> <br /> <br /> /*---------------------------------<br /> کاهش انیمیشن برای کاربران<br /> ----------------------------------*/<br /> <br /> @media (prefers-reduced-motion:reduce){<br /> <br /> .gallery-card,<br /> .gallery-figure img{<br /> <br /> transition:none;<br /> <br /> }<br /> <br /> }<br /> /*==========================================================<br /> Part 4<br /> Professional Settings<br /> MediaWiki + SEO + Mobile First<br /> ==========================================================*/<br /> <br /> <br /> /*--------------------------------------------------<br /> تنظیمات قابل تغییر<br /> فقط این مقادیر را تغییر بده<br /> --------------------------------------------------*/<br /> <br /> :root{<br /> <br /> /* تعداد ستون در دسکتاپ */<br /> --desktop-columns:3;<br /> <br /> /* تعداد ستون در تبلت */<br /> --tablet-columns:2;<br /> <br /> /* فاصله کارت‌ها */<br /> --gallery-gap:24px;<br /> <br /> /* گردی گوشه‌ها */<br /> --gallery-radius:20px;<br /> <br /> /* میزان چرخش تصویر */<br /> --gallery-rotate:-3deg;<br /> <br /> /* میزان بزرگ شدن تصویر */<br /> --gallery-scale:1.03;<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> جلوگیری از مشکلات رندر<br /> --------------------------------------------------*/<br /> <br /> .gallery-grid{<br /> <br /> align-items:stretch;<br /> <br /> justify-content:center;<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> کارت<br /> --------------------------------------------------*/<br /> <br /> .gallery-card{<br /> <br /> position:relative;<br /> <br /> isolation:isolate;<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> کادر تصویر<br /> --------------------------------------------------*/<br /> <br /> .gallery-figure{<br /> <br /> position:relative;<br /> <br /> overflow:hidden;<br /> <br /> border-radius:inherit;<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> تصویر<br /> --------------------------------------------------*/<br /> <br /> .gallery-figure img{<br /> <br /> width:100%;<br /> <br /> display:block;<br /> <br /> object-fit:cover;<br /> <br /> transform-origin:center center;<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> Hover<br /> --------------------------------------------------*/<br /> <br /> @media (hover:hover){<br /> <br /> .gallery-card:hover .gallery-figure img{<br /> <br /> transform:<br /> rotate(var(--gallery-rotate))<br /> scale(var(--gallery-scale));<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> Responsive<br /> --------------------------------------------------*/<br /> <br /> @media (min-width:768px){<br /> <br /> .gallery-grid{<br /> <br /> grid-template-columns:<br /> repeat(var(--tablet-columns),1fr);<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> @media (min-width:1024px){<br /> <br /> .gallery-grid{<br /> <br /> grid-template-columns:<br /> repeat(var(--desktop-columns),1fr);<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> جلوگیری از کشیده شدن تصاویر<br /> --------------------------------------------------*/<br /> <br /> .gallery-card img{<br /> <br /> aspect-ratio:16/10;<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> چاپ<br /> --------------------------------------------------*/<br /> <br /> @media print{<br /> <br /> .gallery-card{<br /> <br /> box-shadow:none;<br /> <br /> }<br /> <br /> }<br /> <br /> <br /> /*--------------------------------------------------<br /> Dark Mode<br /> --------------------------------------------------*/<br /> <br /> @media (prefers-color-scheme:dark){<br /> <br /> .gallery-card{<br /> <br /> background:#222;<br /> <br /> }<br /> <br /> }<br /> </style><br /> <br /> </html></div>

Javid