https://fa.faraghaib.ir/w/index.php?action=history&feed=atom&title=%D8%A7%D9%84%DA%AF%D9%88%3A%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87_%D8%A8%D8%B1%D9%81%DB%8C%2F%D8%A7%D9%85%D8%A7%D9%85%DB%8C
الگو:پس زمینه برفی/امامی - تاریخچهٔ نسخهها
2026-08-26T10:06:01Z
تاریخچهٔ نسخهها برای این صفحه در ویکی
MediaWiki 1.43.8
https://fa.faraghaib.ir/w/index.php?title=%D8%A7%D9%84%DA%AF%D9%88:%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87_%D8%A8%D8%B1%D9%81%DB%8C/%D8%A7%D9%85%D8%A7%D9%85%DB%8C&diff=5971&oldid=prev
Javid: صفحهای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Winter Background</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- ===================================== Winter Background ====================================== --> <div class="winter-background"> <!-- آسمان --> <div class="sky"></div> <!-- برف -...» ایجاد کرد
2026-08-09T10:28:56Z
<p>صفحهای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Winter Background</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- ===================================== Winter Background ====================================== --> <div class="winter-background"> <!-- آسمان --> <div class="sky"></div> <!-- برف -...» ایجاد کرد</p>
<p><b>صفحهٔ تازه</b></p><div><br />
<html lang="fa" dir="rtl"><br />
<br />
<head><br />
<br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<br />
<title>Winter Background</title><br />
<br />
<link rel="stylesheet" href="style.css"><br />
<br />
</head><br />
<br />
<body><br />
<br />
<!-- =====================================<br />
Winter Background<br />
====================================== --><br />
<br />
<div class="winter-background"><br />
<br />
<!-- آسمان --><br />
<div class="sky"></div><br />
<br />
<!-- برف --><br />
<div class="snow-container"><br />
<br />
<!-- فقط با کپی کردن این بلوک میتوان تعداد برف را زیاد کرد --><br />
<br />
<div class="snowflake s1"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake1"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s2"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake2"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s3"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake3"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s4"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake1"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s5"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake2"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s6"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake3"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s7"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake1"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s8"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake2"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s9"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake3"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s10"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake1"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s11"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake2"></use><br />
</svg><br />
</div><br />
<br />
<div class="snowflake s12"><br />
<svg viewBox="0 0 64 64"><br />
<use href="#flake3"></use><br />
</svg><br />
</div><br />
<br />
</div><br />
<br />
</div><br />
<br />
<!-- SVG ها در بخش دوم قرار میگیرند --><br />
<!-- =====================================<br />
Snowflake SVG Library<br />
====================================== --><br />
<br />
<svg xmlns="http://www.w3.org/2000/svg"<br />
style="position:absolute;width:0;height:0;overflow:hidden"><br />
<br />
<defs><br />
<br />
<!-- =========================<br />
Snowflake 1<br />
========================== --><br />
<br />
<symbol id="flake1" viewBox="0 0 64 64"><br />
<br />
<g fill="none"<br />
stroke="#ffffff"<br />
stroke-width="2.4"<br />
stroke-linecap="round"<br />
stroke-linejoin="round"><br />
<br />
<line x1="32" y1="6" x2="32" y2="58"/><br />
<br />
<line x1="10" y1="19" x2="54" y2="45"/><br />
<br />
<line x1="10" y1="45" x2="54" y2="19"/><br />
<br />
<polyline points="32,6 28,12 36,12"/><br />
<polyline points="32,58 28,52 36,52"/><br />
<br />
<polyline points="10,19 17,19 14,25"/><br />
<polyline points="54,45 47,45 50,39"/><br />
<br />
<polyline points="10,45 17,45 14,39"/><br />
<polyline points="54,19 47,19 50,25"/><br />
<br />
<circle cx="32"<br />
cy="32"<br />
r="3"<br />
fill="#ffffff"/><br />
<br />
</g><br />
<br />
</symbol><br />
<br />
<br />
<br />
<!-- =========================<br />
Snowflake 2<br />
========================== --><br />
<br />
<symbol id="flake2" viewBox="0 0 64 64"><br />
<br />
<g fill="none"<br />
stroke="#ffffff"<br />
stroke-width="2.2"<br />
stroke-linecap="round"><br />
<br />
<line x1="32" y1="5" x2="32" y2="59"/><br />
<br />
<line x1="8" y1="32" x2="56" y2="32"/><br />
<br />
<line x1="14" y1="14" x2="50" y2="50"/><br />
<br />
<line x1="14" y1="50" x2="50" y2="14"/><br />
<br />
<line x1="32" y1="15" x2="27" y2="21"/><br />
<line x1="32" y1="15" x2="37" y2="21"/><br />
<br />
<line x1="32" y1="49" x2="27" y2="43"/><br />
<line x1="32" y1="49" x2="37" y2="43"/><br />
<br />
<line x1="15" y1="32" x2="21" y2="27"/><br />
<line x1="15" y1="32" x2="21" y2="37"/><br />
<br />
<line x1="49" y1="32" x2="43" y2="27"/><br />
<line x1="49" y1="32" x2="43" y2="37"/><br />
<br />
<circle cx="32"<br />
cy="32"<br />
r="2.8"<br />
fill="#ffffff"/><br />
<br />
</g><br />
<br />
</symbol><br />
<br />
<br />
<br />
<!-- =========================<br />
Snowflake 3<br />
========================== --><br />
<br />
<symbol id="flake3" viewBox="0 0 64 64"><br />
<br />
<g fill="none"<br />
stroke="#ffffff"<br />
stroke-width="2.3"<br />
stroke-linecap="round"<br />
stroke-linejoin="round"><br />
<br />
<path d="M32 6 L32 58"/><br />
<br />
<path d="M14 16 L50 48"/><br />
<br />
<path d="M14 48 L50 16"/><br />
<br />
<path d="M20 10 L24 18"/><br />
<br />
<path d="M44 10 L40 18"/><br />
<br />
<path d="M20 54 L24 46"/><br />
<br />
<path d="M44 54 L40 46"/><br />
<br />
<path d="M8 32 L18 32"/><br />
<br />
<path d="M46 32 L56 32"/><br />
<br />
<circle cx="32"<br />
cy="32"<br />
r="4"<br />
fill="#ffffff"/><br />
<br />
</g><br />
<br />
</symbol><br />
<br />
</defs><br />
<br />
</svg><br />
<br />
</body><br />
<style><br />
```css<br />
/* =====================================================<br />
WINTER SNOW BACKGROUND<br />
بخش سوم — Base CSS<br />
Responsive / Lightweight / No JavaScript<br />
===================================================== */<br />
<br />
<br />
/* =====================================================<br />
1. تنظیمات پایه<br />
===================================================== */<br />
<br />
html,<br />
body {<br />
width: 100%;<br />
min-height: 100%;<br />
margin: 0;<br />
padding: 0;<br />
}<br />
<br />
html {<br />
scroll-behavior: smooth;<br />
}<br />
<br />
body {<br />
direction: rtl;<br />
font-family: "IRANSans", Tahoma, Arial, sans-serif;<br />
<br />
/* جلوگیری از ایجاد اسکرول افقی */<br />
overflow-x: hidden;<br />
<br />
/* رنگ پایه */<br />
background: #bfe6ff;<br />
<br />
color: #17324d;<br />
<br />
/* بهبود نمایش فونت */<br />
-webkit-font-smoothing: antialiased;<br />
-moz-osx-font-smoothing: grayscale;<br />
}<br />
<br />
<br />
/* =====================================================<br />
2. کانتینر اصلی پسزمینه زمستانی<br />
===================================================== */<br />
<br />
.winter-background {<br />
<br />
position: fixed;<br />
<br />
inset: 0;<br />
<br />
width: 100%;<br />
height: 100vh;<br />
<br />
min-height: 100dvh;<br />
<br />
overflow: hidden;<br />
<br />
z-index: -1;<br />
<br />
pointer-events: none;<br />
<br />
isolation: isolate;<br />
}<br />
<br />
<br />
/* =====================================================<br />
3. آسمان آبی روشن<br />
===================================================== */<br />
<br />
.sky {<br />
<br />
position: absolute;<br />
<br />
inset: 0;<br />
<br />
width: 100%;<br />
height: 100%;<br />
<br />
/*<br />
گرادیان آبی روشن زمستانی<br />
از بالا کمی تیرهتر<br />
و در پایین روشنتر<br />
*/<br />
<br />
background:<br />
<br />
radial-gradient(<br />
circle at 50% -10%,<br />
rgba(255, 255, 255, 0.65) 0%,<br />
rgba(255, 255, 255, 0.15) 28%,<br />
transparent 55%<br />
),<br />
<br />
linear-gradient(<br />
180deg,<br />
#8fc9f4 0%,<br />
#a9d9f8 35%,<br />
#c4e7fa 70%,<br />
#dceffb 100%<br />
);<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
4. لایه برف<br />
===================================================== */<br />
<br />
.snow-container {<br />
<br />
position: absolute;<br />
<br />
inset: 0;<br />
<br />
width: 100%;<br />
height: 100%;<br />
<br />
overflow: hidden;<br />
<br />
pointer-events: none;<br />
}<br />
<br />
<br />
/* =====================================================<br />
5. دانه برف<br />
===================================================== */<br />
<br />
.snowflake {<br />
<br />
position: absolute;<br />
<br />
top: -100px;<br />
left: 0;<br />
<br />
display: block;<br />
<br />
width: 30px;<br />
height: 30px;<br />
<br />
opacity: 0.85;<br />
<br />
/*<br />
جلوگیری از انتخاب شدن یا<br />
ایجاد رفتار ناخواسته<br />
*/<br />
<br />
user-select: none;<br />
-webkit-user-select: none;<br />
<br />
pointer-events: none;<br />
<br />
will-change: transform, opacity;<br />
<br />
/*<br />
SVG داخل دانه<br />
*/<br />
<br />
filter:<br />
drop-shadow(<br />
0 1px 2px rgba(255, 255, 255, 0.45)<br />
);<br />
}<br />
<br />
<br />
/* =====================================================<br />
6. SVG دانههای برف<br />
===================================================== */<br />
<br />
.snowflake svg {<br />
<br />
display: block;<br />
<br />
width: 100%;<br />
height: 100%;<br />
<br />
overflow: visible;<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
7. ظاهر سفید و نیمه شفاف برف<br />
===================================================== */<br />
<br />
.snowflake svg * {<br />
<br />
vector-effect: non-scaling-stroke;<br />
}<br />
<br />
<br />
/* =====================================================<br />
8. اندازههای مختلف دانههای برف<br />
===================================================== */<br />
<br />
.s1,<br />
.s5,<br />
.s9 {<br />
width: 18px;<br />
height: 18px;<br />
}<br />
<br />
.s2,<br />
.s6,<br />
.s10 {<br />
width: 26px;<br />
height: 26px;<br />
}<br />
<br />
.s3,<br />
.s7,<br />
.s11 {<br />
width: 36px;<br />
height: 36px;<br />
}<br />
<br />
.s4,<br />
.s8,<br />
.s12 {<br />
width: 22px;<br />
height: 22px;<br />
}<br />
<br />
<br />
/* =====================================================<br />
9. شفافیت متفاوت<br />
===================================================== */<br />
<br />
.s1,<br />
.s6,<br />
.s11 {<br />
opacity: 0.55;<br />
}<br />
<br />
.s2,<br />
.s7,<br />
.s12 {<br />
opacity: 0.70;<br />
}<br />
<br />
.s3,<br />
.s8 {<br />
opacity: 0.90;<br />
}<br />
<br />
.s4,<br />
.s5,<br />
.s9,<br />
.s10 {<br />
opacity: 0.78;<br />
}<br />
<br />
<br />
/* =====================================================<br />
10. سازگاری با موبایل<br />
===================================================== */<br />
<br />
@media (max-width: 768px) {<br />
<br />
.snowflake {<br />
filter:<br />
drop-shadow(<br />
0 1px 1px rgba(255, 255, 255, 0.35)<br />
);<br />
}<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
11. موبایلهای کوچک<br />
===================================================== */<br />
<br />
@media (max-width: 480px) {<br />
<br />
.s1,<br />
.s5,<br />
.s9 {<br />
width: 14px;<br />
height: 14px;<br />
}<br />
<br />
.s2,<br />
.s6,<br />
.s10 {<br />
width: 21px;<br />
height: 21px;<br />
}<br />
<br />
.s3,<br />
.s7,<br />
.s11 {<br />
width: 28px;<br />
height: 28px;<br />
}<br />
<br />
.s4,<br />
.s8,<br />
.s12 {<br />
width: 17px;<br />
height: 17px;<br />
}<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
12. کاربرانی که Motion را غیرفعال کردهاند<br />
===================================================== */<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
<br />
.snowflake {<br />
animation: none !important;<br />
transform: translateY(0) !important;<br />
}<br />
<br />
}<br />
```<br />
```css<br />
/* =====================================================<br />
WINTER SNOW BACKGROUND<br />
بخش چهارم — Snow Animation<br />
===================================================== */<br />
<br />
<br />
/* =====================================================<br />
1. انیمیشن اصلی سقوط برف<br />
===================================================== */<br />
<br />
@keyframes snow-fall {<br />
<br />
0% {<br />
transform:<br />
translate3d(0, -120px, 0)<br />
rotate(0deg);<br />
<br />
opacity: 0;<br />
}<br />
<br />
8% {<br />
opacity: 1;<br />
}<br />
<br />
50% {<br />
opacity: 0.95;<br />
}<br />
<br />
92% {<br />
opacity: 0.85;<br />
}<br />
<br />
100% {<br />
transform:<br />
translate3d(<br />
var(--snow-drift, 80px),<br />
calc(100vh + 150px),<br />
0<br />
)<br />
rotate(var(--snow-rotate, 360deg));<br />
<br />
opacity: 0;<br />
}<br />
}<br />
<br />
<br />
/* =====================================================<br />
2. انیمیشن حرکت جانبی بسیار آرام<br />
===================================================== */<br />
<br />
@keyframes snow-sway {<br />
<br />
0% {<br />
margin-left: 0;<br />
}<br />
<br />
25% {<br />
margin-left: 35px;<br />
}<br />
<br />
50% {<br />
margin-left: -25px;<br />
}<br />
<br />
75% {<br />
margin-left: 25px;<br />
}<br />
<br />
100% {<br />
margin-left: 0;<br />
}<br />
}<br />
<br />
<br />
/* =====================================================<br />
3. فعال کردن سقوط برای تمام دانهها<br />
===================================================== */<br />
<br />
.snowflake {<br />
<br />
animation-name: snow-fall;<br />
<br />
animation-timing-function: linear;<br />
<br />
animation-iteration-count: infinite;<br />
<br />
animation-fill-mode: both;<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
4. موقعیت افقی اولیه<br />
===================================================== */<br />
<br />
.s1 { left: 4%; }<br />
.s2 { left: 12%; }<br />
.s3 { left: 21%; }<br />
.s4 { left: 29%; }<br />
.s5 { left: 37%; }<br />
.s6 { left: 46%; }<br />
.s7 { left: 55%; }<br />
.s8 { left: 63%; }<br />
.s9 { left: 71%; }<br />
.s10 { left: 79%; }<br />
.s11 { left: 88%; }<br />
.s12 { left: 96%; }<br />
<br />
<br />
/* =====================================================<br />
5. سرعت سقوط متفاوت<br />
===================================================== */<br />
<br />
/*<br />
هر دانه سرعت مخصوص خودش را دارد.<br />
دانههای کوچکتر معمولاً کمی سریعتر هستند.<br />
*/<br />
<br />
.s1 {<br />
animation-duration: 12s;<br />
animation-delay: -2s;<br />
}<br />
<br />
.s2 {<br />
animation-duration: 17s;<br />
animation-delay: -8s;<br />
}<br />
<br />
.s3 {<br />
animation-duration: 21s;<br />
animation-delay: -14s;<br />
}<br />
<br />
.s4 {<br />
animation-duration: 14s;<br />
animation-delay: -6s;<br />
}<br />
<br />
.s5 {<br />
animation-duration: 19s;<br />
animation-delay: -11s;<br />
}<br />
<br />
.s6 {<br />
animation-duration: 24s;<br />
animation-delay: -17s;<br />
}<br />
<br />
.s7 {<br />
animation-duration: 15s;<br />
animation-delay: -5s;<br />
}<br />
<br />
.s8 {<br />
animation-duration: 22s;<br />
animation-delay: -13s;<br />
}<br />
<br />
.s9 {<br />
animation-duration: 13s;<br />
animation-delay: -9s;<br />
}<br />
<br />
.s10 {<br />
animation-duration: 20s;<br />
animation-delay: -16s;<br />
}<br />
<br />
.s11 {<br />
animation-duration: 25s;<br />
animation-delay: -19s;<br />
}<br />
<br />
.s12 {<br />
animation-duration: 16s;<br />
animation-delay: -7s;<br />
}<br />
<br />
<br />
/* =====================================================<br />
6. مقدار حرکت جانبی هر دانه<br />
===================================================== */<br />
<br />
.s1 {<br />
--snow-drift: 55px;<br />
--snow-rotate: 300deg;<br />
}<br />
<br />
.s2 {<br />
--snow-drift: -80px;<br />
--snow-rotate: -360deg;<br />
}<br />
<br />
.s3 {<br />
--snow-drift: 110px;<br />
--snow-rotate: 480deg;<br />
}<br />
<br />
.s4 {<br />
--snow-drift: -60px;<br />
--snow-rotate: -300deg;<br />
}<br />
<br />
.s5 {<br />
--snow-drift: 75px;<br />
--snow-rotate: 360deg;<br />
}<br />
<br />
.s6 {<br />
--snow-drift: -120px;<br />
--snow-rotate: -540deg;<br />
}<br />
<br />
.s7 {<br />
--snow-drift: 90px;<br />
--snow-rotate: 420deg;<br />
}<br />
<br />
.s8 {<br />
--snow-drift: -70px;<br />
--snow-rotate: -360deg;<br />
}<br />
<br />
.s9 {<br />
--snow-drift: 125px;<br />
--snow-rotate: 540deg;<br />
}<br />
<br />
.s10 {<br />
--snow-drift: -95px;<br />
--snow-rotate: -420deg;<br />
}<br />
<br />
.s11 {<br />
--snow-drift: 65px;<br />
--snow-rotate: 360deg;<br />
}<br />
<br />
.s12 {<br />
--snow-drift: -110px;<br />
--snow-rotate: -480deg;<br />
}<br />
<br />
<br />
/* =====================================================<br />
7. تنظیمات مخصوص موبایل<br />
===================================================== */<br />
<br />
@media (max-width: 768px) {<br />
<br />
.s1 {<br />
--snow-drift: 35px;<br />
}<br />
<br />
.s2 {<br />
--snow-drift: -45px;<br />
}<br />
<br />
.s3 {<br />
--snow-drift: 55px;<br />
}<br />
<br />
.s4 {<br />
--snow-drift: -40px;<br />
}<br />
<br />
.s5 {<br />
--snow-drift: 45px;<br />
}<br />
<br />
.s6 {<br />
--snow-drift: -60px;<br />
}<br />
<br />
.s7 {<br />
--snow-drift: 50px;<br />
}<br />
<br />
.s8 {<br />
--snow-drift: -45px;<br />
}<br />
<br />
.s9 {<br />
--snow-drift: 65px;<br />
}<br />
<br />
.s10 {<br />
--snow-drift: -55px;<br />
}<br />
<br />
.s11 {<br />
--snow-drift: 40px;<br />
}<br />
<br />
.s12 {<br />
--snow-drift: -60px;<br />
}<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
8. جلوگیری از حرکت بیش از حد در موبایل<br />
===================================================== */<br />
<br />
@media (max-width: 480px) {<br />
<br />
.snowflake {<br />
animation-duration: 14s;<br />
}<br />
<br />
.s3,<br />
.s6,<br />
.s9,<br />
.s11 {<br />
animation-duration: 18s;<br />
}<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
9. کاهش حرکت برای کاربران حساس به انیمیشن<br />
===================================================== */<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
<br />
.snowflake {<br />
animation: none !important;<br />
opacity: 0.75;<br />
}<br />
<br />
}<br />
```<br />
<br />
```css<br />
/* =====================================================<br />
WINTER SNOW BACKGROUND<br />
بخش پنجم — Depth / Realistic Snow Layer<br />
===================================================== */<br />
<br />
<br />
/* =====================================================<br />
1. لایه عمق برف<br />
===================================================== */<br />
<br />
.snow-container::before,<br />
.snow-container::after {<br />
<br />
content: "";<br />
<br />
position: absolute;<br />
<br />
inset: 0;<br />
<br />
width: 100%;<br />
height: 100%;<br />
<br />
pointer-events: none;<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
2. دانههای دورتر<br />
===================================================== */<br />
<br />
/*<br />
این تنظیمات باعث میشوند بعضی از دانهها<br />
کوچکتر و محوتر دیده شوند.<br />
*/<br />
<br />
.s1,<br />
.s5,<br />
.s9 {<br />
<br />
filter:<br />
blur(0.35px)<br />
drop-shadow(<br />
0 0 2px rgba(255, 255, 255, 0.55)<br />
);<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
3. دانههای متوسط<br />
===================================================== */<br />
<br />
.s2,<br />
.s4,<br />
.s6,<br />
.s8,<br />
.s10,<br />
.s12 {<br />
<br />
filter:<br />
blur(0.15px)<br />
drop-shadow(<br />
0 0 3px rgba(255, 255, 255, 0.65)<br />
);<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
4. دانههای نزدیکتر<br />
===================================================== */<br />
<br />
.s3,<br />
.s7,<br />
.s11 {<br />
<br />
filter:<br />
drop-shadow(<br />
0 0 4px rgba(255, 255, 255, 0.85)<br />
);<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
5. ایجاد درخشش بسیار ملایم<br />
===================================================== */<br />
<br />
.snowflake svg {<br />
<br />
filter:<br />
drop-shadow(<br />
0 0 1px rgba(255, 255, 255, 0.95)<br />
);<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
6. جلوگیری از بیش از حد سفید شدن برف<br />
===================================================== */<br />
<br />
.snowflake {<br />
<br />
mix-blend-mode: normal;<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
7. تنظیم عمق برای دانههای کوچک<br />
===================================================== */<br />
<br />
.s1,<br />
.s5,<br />
.s9 {<br />
<br />
transform-origin: center center;<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
8. تنظیم عمق برای دانههای متوسط<br />
===================================================== */<br />
<br />
.s2,<br />
.s4,<br />
.s6,<br />
.s8,<br />
.s10,<br />
.s12 {<br />
<br />
transform-origin: center center;<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
9. تنظیم عمق برای دانههای بزرگ<br />
===================================================== */<br />
<br />
.s3,<br />
.s7,<br />
.s11 {<br />
<br />
transform-origin: center center;<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
10. موبایل<br />
===================================================== */<br />
<br />
@media (max-width: 768px) {<br />
<br />
.s1,<br />
.s5,<br />
.s9 {<br />
<br />
filter:<br />
blur(0.25px)<br />
drop-shadow(<br />
0 0 1px rgba(255, 255, 255, 0.45)<br />
);<br />
<br />
}<br />
<br />
.s3,<br />
.s7,<br />
.s11 {<br />
<br />
filter:<br />
drop-shadow(<br />
0 0 3px rgba(255, 255, 255, 0.75)<br />
);<br />
<br />
}<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
11. موبایل کوچک<br />
===================================================== */<br />
<br />
@media (max-width: 480px) {<br />
<br />
.snowflake {<br />
<br />
filter:<br />
none;<br />
<br />
}<br />
<br />
.snowflake svg {<br />
<br />
filter:<br />
drop-shadow(<br />
0 0 1px rgba(255, 255, 255, 0.65)<br />
);<br />
<br />
}<br />
<br />
}<br />
<br />
<br />
/* =====================================================<br />
12. حالت کاهش حرکت<br />
===================================================== */<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
<br />
.snowflake {<br />
<br />
filter: none !important;<br />
<br />
}<br />
<br />
}<br />
```<br />
<br />
</style><br />
</html></div>
Javid