[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"lesson:t2-s08-decoration":3,"course:taropood":63},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,8,"t2-s08-decoration","book",2,"فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},7,"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},9,"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",[20,24,27,32,35,38,41,44,47,50,53,56,60],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجای ترم ۲ رنگ دادی، اندازه دادی، جعبه را فهمیدی و متن را مرتب کردی. ولی صفحه‌هایت هنوز کمی «لخت»‌اند: مستطیل‌های ساده، بدون عمق. در این فصل به همان جعبه‌ها \u003Cstrong>تزئین\u003C\u002Fstrong> می‌دهی — حاشیه، گوشهٔ گرد، سایه، پس‌زمینهٔ تصویری و gradient — و آخرش یک \u003Cstrong>کارت\u003C\u002Fstrong> واقعی می‌سازی که انگار کمی از صفحه بلند شده و روی آن نشسته است. همان جعبهٔ بی‌روحِ فصل قبل، این‌بار مثل یک کارت در یک سایت واقعی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-styled-card.8f5e35b685.160.webp 160w, \u002F_img\u002F01-image-styled-card.8f5e35b685.320.webp 320w, \u002F_img\u002F01-image-styled-card.8f5e35b685.640.webp 640w, \u002F_img\u002F01-image-styled-card.8f5e35b685.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-styled-card.8f5e35b685.1280.jpg\" srcset=\"\u002F_img\u002F01-image-styled-card.8f5e35b685.160.jpg 160w, \u002F_img\u002F01-image-styled-card.8f5e35b685.320.jpg 320w, \u002F_img\u002F01-image-styled-card.8f5e35b685.640.jpg 640w, \u002F_img\u002F01-image-styled-card.8f5e35b685.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کارت مطلب تمیز با یک نوار تصویری بالای آن، گوشه‌های گرد، یک حاشیهٔ نازک و یک سایهٔ ملایم که کارت را کمی از پس‌زمینه جدا می‌کند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>به هر جعبه با \u003Ccode>border\u003C\u002Fcode> یک حاشیه و با \u003Ccode>border-radius\u003C\u002Fcode> گوشهٔ گرد بدهی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>box-shadow\u003C\u002Fcode> یک سایه بسازی که جعبه را از صفحه جدا کند\u003C\u002Fli>\n\u003Cli>با \u003Ccode>background-image\u003C\u002Fcode> و \u003Ccode>background-size\u003C\u002Fcode> یک تصویر را درست داخل یک ناحیه جا بدهی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>linear-gradient()\u003C\u002Fcode> یک پس‌زمینهٔ رنگ‌به‌رنگ بسازی، بدون هیچ تصویری\u003C\u002Fli>\n\u003Cli>بگویی چرا \u003Ccode>border-radius\u003C\u002Fcode> گاهی «انگار هیچ کاری نمی‌کند» و چطور درستش کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۴:\u003C\u002Fstrong> box model و \u003Ccode>padding\u003C\u002Fcode> — تزئین روی همان جعبه‌ای می‌نشیند که آنجا شناختی.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۵:\u003C\u002Fstrong> رنگ با \u003Ccode>rgb()\u003C\u002Fcode> و \u003Ccode>opacity\u003C\u002Fcode> — سایه یک رنگِ نیمه‌شفاف است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> \u003Ccode>class\u003C\u002Fcode> — کارت را با یک \u003Ccode>class\u003C\u002Fcode> هدف می‌گیریم.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک کارتِ ساده و بی‌تزئین می‌بینی: فقط متن با کمی فاصله دورش. کارِ این فصل این است که خط‌به‌خط به آن حاشیه، گوشهٔ گرد، سایه و پس‌زمینه بدهی و هر بار نتیجه را ببینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-2-css-basics\u002Fsession-08-decoration",{"kind":21,"heading":33,"html":34},"۱. یک کارت لخت برای شروع","\u003Ch2 id=\"۱-یک-کارت-لخت-برای-شروع\">۱. یک کارت لخت برای شروع\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DB%8C%DA%A9-%DA%A9%D8%A7%D8%B1%D8%AA-%D9%84%D8%AE%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر کارت اول یک تکهٔ HTML معمولی است. این را در آزمایشگاه داشته باش:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><article class="card">\n  <div class="card-cover"><\u002Fdiv>\n  <p class="tag">آموزش<\u002Fp>\n  <h2>اولین روزم با CSS<\u002Fh2>\n  <p>امروز یاد گرفتم چطور یک جعبهٔ ساده را به یک کارت تمیز و خوش‌ظاهر تبدیل کنم.<\u002Fp>\n  <a class="more" href="#">ادامهٔ مطلب ←<\u002Fa>\n<\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>یک \u003Ccode><article>\u003C\u002Fcode> (چون یک مطلبِ مستقل است، از فصل semantic یادت هست)، و تویش یک \u003Ccode><div class="card-cover">\u003C\u002Fcode> که فعلاً خالی است — این همان جایی است که بعداً تصویرِ کارت را می‌گذاریم. بقیه هم یک برچسب، یک تیتر، یک پاراگراف و یک لینک.\u003C\u002Fp>\n\u003Cp>برای CSS هم فعلاً فقط جعبه را کمی جا می‌دهیم، عرضش را محدود می‌کنیم و وسطش می‌آوریم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  background-color: #eef1f7;\n  padding: 40px;\n}\n\n.card {\n  max-width: 320px;\n  margin: 0 auto;\n  padding: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>اینجا دو property تازه داریم. \u003Ccode>max-width: 320px\u003C\u002Fcode> می‌گوید عرضِ کارت حداکثر ۳۲۰ پیکسل شود — جعبه از این پهن‌تر نمی‌شود ولی می‌تواند باریک‌تر بماند. و \u003Ccode>margin: 0 auto\u003C\u002Fcode> کارت را افقی وسط می‌آورد: وقتی یک جعبهٔ عرض‌محدود، margin چپ و راستش \u003Ccode>auto\u003C\u002Fcode> باشد، مرورگر فضای اضافه را دو طرفش مساوی پخش می‌کند و جعبه وسط می‌ایستد (آن \u003Ccode>0\u003C\u002Fcode> یعنی بالا و پایین بدونِ فاصله). \u003Ccode>padding\u003C\u002Fcode> را هم که از فصل ۴ بلدی.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک ناحیهٔ خاکستریِ کم‌رنگ (پس‌زمینهٔ صفحه) می‌بینی و روی آن، متنِ کارت با کمی فاصله دورش، جمع‌شده در یک ستونِ وسطِ صفحه. ولی هنوز خبری از «کارت» نیست — مرزِ کارت با صفحه معلوم نیست، چون کارت هیچ پس‌زمینه یا حاشیه‌ای ندارد. بیا کم‌کم بسازیمش.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. اول گوشه‌ها را گرد کن — و اولین غافلگیری","\u003Ch2 id=\"۲-اول-گوشه‌ها-را-گرد-کن-—-و-اولین-غافلگیری\">۲. اول گوشه‌ها را گرد کن — و اولین غافلگیری\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%A7%D9%88%D9%84-%DA%AF%D9%88%D8%B4%D9%87%E2%80%8C%D9%87%D8%A7-%D8%B1%D8%A7-%DA%AF%D8%B1%D8%AF-%DA%A9%D9%86-%E2%80%94-%D9%88-%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D8%BA%D8%A7%D9%81%D9%84%DA%AF%DB%8C%D8%B1%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اولین چیزی که یک کارت را «نرم» می‌کند، گوشه‌های گرد است. property اش \u003Ccode>border-radius\u003C\u002Fcode> است: هرچه عددش بزرگ‌تر، گوشه گردتر. به \u003Ccode>.card\u003C\u002Fcode> اضافه‌اش کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  max-width: 320px;\n  margin: 0 auto;\n  padding: 16px;\n  border-radius: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا نگاه کن. و… هیچ اتفاقی نیفتاد. کارت دقیقاً همان‌شکلِ قبل است، انگار \u003Ccode>border-radius\u003C\u002Fcode> را اصلاً ننوشته‌ای. این یک خطای خیلی رایج است و ارزش دارد بفهمی چرا.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> \u003Ccode>border-radius\u003C\u002Fcode> گوشهٔ \u003Cstrong>لبهٔ دیدنیِ\u003C\u002Fstrong> جعبه را گرد می‌کند — یعنی جایی که یک رنگِ پس‌زمینه یا یک حاشیه تمام می‌شود. کارتِ ما هنوز نه پس‌زمینه دارد نه حاشیه؛ پس هیچ لبهٔ دیدنی‌ای نیست که گرد شود. گوشه‌ها \u003Cstrong>واقعاً\u003C\u002Fstrong> گرد شده‌اند، ولی چون چیزی آنجا کشیده نشده، دیدنی نیست. راهِ حل ساده است: در قدم بعد به کارت یک پس‌زمینه و یک حاشیه می‌دهیم و همان لحظه گوشه‌های گرد ظاهر می‌شوند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. حاشیه و پس‌زمینه: حالا لبه دیده می‌شود","\u003Ch2 id=\"۳-حاشیه-و-پس‌زمینه-حالا-لبه-دیده-می‌شود\">۳. حاشیه و پس‌زمینه: حالا لبه دیده می‌شود\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%AD%D8%A7%D8%B4%DB%8C%D9%87-%D9%88-%D9%BE%D8%B3%E2%80%8C%D8%B2%D9%85%DB%8C%D9%86%D9%87-%D8%AD%D8%A7%D9%84%D8%A7-%D9%84%D8%A8%D9%87-%D8%AF%DB%8C%D8%AF%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B4%D9%88%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>دو چیز به \u003Ccode>.card\u003C\u002Fcode> اضافه می‌کنیم. اول یک \u003Ccode>background-color\u003C\u002Fcode> که کارت را از صفحه جدا کند، و بعد یک \u003Ccode>border\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Ccode>border\u003C\u002Fcode> یک property جمع‌وجور است که سه چیز را با هم می‌گیرد: \u003Cstrong>کلفتی\u003C\u002Fstrong>، \u003Cstrong>نوع خط\u003C\u002Fstrong> و \u003Cstrong>رنگ\u003C\u002Fstrong> — به همین ترتیب. مثلاً \u003Ccode>1px solid #e4e8f0\u003C\u002Fcode> یعنی «یک خطِ توپُرِ یک‌پیکسلیِ خاکستری روشن».\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  max-width: 320px;\n  margin: 0 auto;\n  padding: 16px;\n  background-color: #ffffff;\n  border: 1px solid #e4e8f0;\n  border-radius: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا یک کارتِ سفید با یک حاشیهٔ نازکِ خاکستری روی پس‌زمینهٔ کم‌رنگ می‌بینی — و \u003Cstrong>گوشه‌هایش گرد است\u003C\u002Fstrong>. همان \u003Ccode>border-radius\u003C\u002Fcode> قدمِ قبل، حالا که یک لبهٔ دیدنی (رنگِ سفید + حاشیه) دارد، خودش را نشان می‌دهد. حالا خرابش کن تا حس کنی: \u003Ccode>border-radius\u003C\u002Fcode> را به \u003Ccode>0\u003C\u002Fcode> عوض کن و ببین گوشه‌ها تیز می‌شوند، بعد \u003Ccode>40px\u003C\u002Fcode> بگذار و ببین چقدر گرد می‌شود. عدد را حس کن، بعد برگردان روی \u003Ccode>16px\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>solid\u003C\u002Fcode> تنها نوع خط نیست. \u003Ccode>dashed\u003C\u002Fcode> (خط‌چین) و \u003Ccode>dotted\u003C\u002Fcode> (نقطه‌چین) هم هستند. برای کارت \u003Ccode>solid\u003C\u002Fcode> بهترین است، ولی خوب است بدانی گزینه‌ها هستند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>قبل از ادامه، جواب بده: اگر \u003Ccode>border\u003C\u002Fcode> را کلاً پاک کنی ولی \u003Ccode>background-color\u003C\u002Fcode> سفید بماند، باز هم گوشه‌ها گرد دیده می‌شوند؟\u003C\u002Fp>\n\u003Cp>بله. چون حالا یک لبهٔ دیدنی داری: جایی که سفیدِ کارت تمام می‌شود و خاکستریِ صفحه شروع. \u003Ccode>border-radius\u003C\u002Fcode> همان مرزِ رنگ را گرد می‌کند، چه حاشیه باشد چه نباشد. لبهٔ دیدنی است که مهم است، نه لزوماً حاشیه.\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. سایه: کارت را از صفحه بلند کن","\u003Ch2 id=\"۴-سایه-کارت-را-از-صفحه-بلند-کن\">۴. سایه: کارت را از صفحه بلند کن\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%B3%D8%A7%DB%8C%D9%87-%DA%A9%D8%A7%D8%B1%D8%AA-%D8%B1%D8%A7-%D8%A7%D8%B2-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D9%84%D9%86%D8%AF-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>چیزی که کارت را واقعاً «کارت» می‌کند، یک سایهٔ ملایم است که انگار کارت را کمی از صفحه بلند کرده. property اش \u003Ccode>box-shadow\u003C\u002Fcode> است و چهار مقدار پشت‌سرِ هم می‌گیرد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>box-shadow: 0 12px 30px rgb(23 36 64 \u002F 0.14);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این چهار تکه به‌ترتیب یعنی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>0\u003C\u002Fcode> — جابه‌جایی افقی سایه (اینجا صفر: سایه به چپ و راست نمی‌رود).\u003C\u002Fli>\n\u003Cli>\u003Ccode>12px\u003C\u002Fcode> — جابه‌جایی عمودی: سایه ۱۲ پیکسل پایین‌تر می‌افتد، انگار نور از بالا می‌تابد.\u003C\u002Fli>\n\u003Cli>\u003Ccode>30px\u003C\u002Fcode> — میزان \u003Cstrong>محو‌شدگیِ\u003C\u002Fstrong> سایه: هرچه بزرگ‌تر، سایه نرم‌تر و پخش‌تر.\u003C\u002Fli>\n\u003Cli>\u003Ccode>rgb(23 36 64 \u002F 0.14)\u003C\u002Fcode> — رنگِ سایه. این یک شکلِ تازهٔ نوشتنِ رنگ است: بعد از سه عددِ rgb یک \u003Ccode>\u002F\u003C\u002Fcode> می‌گذاری و بعدش یک عددِ شفافیت — یعنی \u003Ccode>rgb(r g b \u002F alpha)\u003C\u002Fcode>. همان ایدهٔ شفافیتی که در فصل ۵ با \u003Ccode>opacity\u003C\u002Fcode> دیدی، این‌بار مستقیم داخلِ خودِ رنگ نوشته می‌شود، پس فقط همین رنگ نیمه‌شفاف می‌شود نه کلِ عنصر. سایهٔ خوب هیچ‌وقت مشکیِ توپُر نیست؛ یک آبیِ خیلی کم‌رنگ و کم‌شفاف طبیعی‌تر است.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>به \u003Ccode>.card\u003C\u002Fcode> اضافه‌اش کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  max-width: 320px;\n  margin: 0 auto;\n  padding: 16px;\n  background-color: #ffffff;\n  border: 1px solid #e4e8f0;\n  border-radius: 16px;\n  box-shadow: 0 12px 30px rgb(23 36 64 \u002F 0.14);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا کارت انگار کمی از صفحه بلند شده و یک سایهٔ نرم زیرش افتاده. حالا خرابش کن: مقدار محو‌شدگی را از \u003Ccode>30px\u003C\u002Fcode> به \u003Ccode>2px\u003C\u002Fcode> عوض کن و ببین سایه چقدر تیز و بدقواره می‌شود؛ بعد جابه‌جاییِ عمودی را \u003Ccode>40px\u003C\u002Fcode> بگذار و ببین کارت انگار خیلی بالا شناور شده. با همین دو عدد بازی کن تا حسِ سایه در دستت بیاید، بعد برگردان روی \u003Ccode>0 12px 30px\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> رازِ سایهٔ حرفه‌ای این است: جابه‌جایی کم، محو‌شدگیِ زیاد، رنگِ کم‌شفاف. سایهٔ تیره و تیز، کارت را ارزان نشان می‌دهد؛ سایهٔ نرم و کم‌رنگ، گران.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"۵. gradient: پس‌زمینهٔ رنگ‌به‌رنگ بدون تصویر","\u003Ch2 id=\"۵-gradient-پس‌زمینهٔ-رنگ‌به‌رنگ-بدون-تصویر\">۵. gradient: پس‌زمینهٔ رنگ‌به‌رنگ بدون تصویر\u003Ca class=\"head-anchor\" href=\"#%DB%B5-gradient-%D9%BE%D8%B3%E2%80%8C%D8%B2%D9%85%DB%8C%D9%86%D9%87%D9%94-%D8%B1%D9%86%DA%AF%E2%80%8C%D8%A8%D9%87%E2%80%8C%D8%B1%D9%86%DA%AF-%D8%A8%D8%AF%D9%88%D9%86-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا پس‌زمینه‌ها یک‌رنگ بودند. \u003Ccode>linear-gradient()\u003C\u002Fcode> می‌گذارد رنگ \u003Cstrong>به‌آرامی از یکی به دیگری\u003C\u002Fstrong> برود — بدون هیچ فایلِ تصویری، فقط با CSS. یک نکتهٔ مهم: gradient در CSS یک \u003Cstrong>تصویر\u003C\u002Fstrong> حساب می‌شود، نه یک رنگ. برای همین توی \u003Ccode>background-image\u003C\u002Fcode> می‌نشیند، نه \u003Ccode>background-color\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>بیا پس‌زمینهٔ کلِ صفحه را از خاکستریِ تخت به یک gradient نرم عوض کنیم. در \u003Ccode>body\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  background-image: linear-gradient(160deg, #eef1f7, #d9e0ee);\n  padding: 40px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>داخل پرانتز، اول \u003Cstrong>جهت\u003C\u002Fstrong> را می‌گویی (\u003Ccode>160deg\u003C\u002Fcode> یعنی یک زاویهٔ مورب) و بعد رنگ‌ها را به‌ترتیب. مرورگر خودش بینشان را نرم پُر می‌کند.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> پس‌زمینهٔ صفحه دیگر تخت نیست؛ از یک گوشه به گوشهٔ دیگر کمی رنگش عوض می‌شود. حالا خرابش کن: \u003Ccode>160deg\u003C\u002Fcode> را \u003Ccode>90deg\u003C\u002Fcode> کن و ببین جهتِ گذارِ رنگ عوض می‌شود؛ یک رنگِ سوم هم اضافه کن — \u003Ccode>linear-gradient(160deg, #eef1f7, #d9e0ee, #c7d0e6)\u003C\u002Fcode> — و ببین سه‌تایی می‌شود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> یک اشتباهِ خیلی رایج این است که gradient را داخلِ \u003Ccode>background-color\u003C\u002Fcode> بنویسی. کار نمی‌کند و هیچ خطایی هم نمی‌بینی — چون gradient یک تصویر است، نه یک رنگ. همیشه توی \u003Ccode>background-image\u003C\u002Fcode> بگذارش.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"۶. تصویرِ واقعی در پس‌زمینه، و background-size","\u003Ch2 id=\"۶-تصویرِ-واقعی-در-پس‌زمینه-و-background-size\">۶. تصویرِ واقعی در پس‌زمینه، و \u003Ccode>background-size\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%D9%90-%D9%88%D8%A7%D9%82%D8%B9%DB%8C-%D8%AF%D8%B1-%D9%BE%D8%B3%E2%80%8C%D8%B2%D9%85%DB%8C%D9%86%D9%87-%D9%88-background-size\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا سراغِ آن \u003Ccode><div class="card-cover">\u003C\u002Fcode> می‌رویم که از قدمِ اول خالی گذاشتیمش. می‌خواهیم یک تصویر تویش بنشیند. با \u003Ccode>background-image: url(...)\u003C\u002Fcode> یک تصویر را پس‌زمینهٔ یک ناحیه می‌کنی. ولی یک مشکل هست: تصویر معمولاً هم‌اندازهٔ آن ناحیه نیست. اینجا \u003Ccode>background-size\u003C\u002Fcode> وارد می‌شود:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>cover\u003C\u002Fcode> — تصویر را آن‌قدر بزرگ می‌کند که \u003Cstrong>کلِ ناحیه را بپوشاند\u003C\u002Fstrong>، حتی اگر لبه‌هایش کمی بیرون بزند. برای عکسِ کاور همین را می‌خواهی.\u003C\u002Fli>\n\u003Cli>\u003Ccode>contain\u003C\u002Fcode> — تصویر را آن‌قدر کوچک می‌کند که \u003Cstrong>کامل داخل ناحیه جا شود\u003C\u002Fstrong>، حتی اگر گوشه‌ها خالی بماند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>به \u003Ccode>.card-cover\u003C\u002Fcode> این‌ها را بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card-cover {\n  height: 150px;\n  border-radius: 12px;\n  background-image: url("https:\u002F\u002Fpicsum.photos\u002Fseed\u002Ftaropood\u002F400\u002F220");\n  background-size: cover;\n  background-position: center;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>height\u003C\u002Fcode> به ناحیه یک بلندی می‌دهد (وگرنه چون خالی است، ارتفاعش صفر می‌شود و تصویر دیده نمی‌شود). \u003Ccode>background-position: center\u003C\u002Fcode> هم می‌گوید وسطِ تصویر را نشانم بده. و \u003Ccode>border-radius: 12px\u003C\u002Fcode> گوشه‌های همین نوارِ تصویری را هم گرد می‌کند تا با کارت هماهنگ باشد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> بالای کارت یک نوارِ تصویریِ گوشه‌گرد ظاهر شد که کلِ عرض را پُر کرده. حالا خرابش کن: \u003Ccode>background-size\u003C\u002Fcode> را از \u003Ccode>cover\u003C\u002Fcode> به \u003Ccode>contain\u003C\u002Fcode> عوض کن و ببین تصویر کوچک می‌شود و دوطرفش خالی می‌ماند؛ بعد کلاً پاکش کن و ببین تصویر با اندازهٔ اصلیِ خودش می‌افتد و بدقواره می‌شود. حالا فهمیدی \u003Ccode>background-size\u003C\u002Fcode> دقیقاً چه کاری می‌کند. برگردان روی \u003Ccode>cover\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک \u003Ccode>box-shadow\u003C\u002Fcode> سه‌مقداری به دستیار AI ات بده — مثلاً \u003Ccode>box-shadow: 0 12px 30px rgb(23 36 64 \u002F 0.14)\u003C\u002Fcode> — و بپرس «هر عدد اینجا چه‌کار می‌کند؟». بعد همان اعداد را در آزمایشگاه یکی‌یکی عوض کن و \u003Cstrong>جوابش را با چیزی که می‌بینی چک کن\u003C\u002Fstrong>. اگر AI گفت عددِ دوم «محوشدگی» است، خودت با تغییرش ثابت کن که نه — عددِ سوم محوشدگی است. این‌طوری هم یاد می‌گیری، هم عادت می‌کنی حرفِ AI را با چشمِ خودت بسنجی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":51,"html":52},"۷. کارتِ کامل","\u003Ch2 id=\"۷-کارتِ-کامل\">۷. کارتِ کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B7-%DA%A9%D8%A7%D8%B1%D8%AA%D9%90-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همه‌چیز را کنار هم می‌گذاریم. این HTML و CSSِ نهاییِ کارت است. اول HTML:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>کارت مطلب<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <article class="card">\n      <div class="card-cover"><\u002Fdiv>\n      <p class="tag">آموزش<\u002Fp>\n      <h2>اولین روزم با CSS<\u002Fh2>\n      <p>امروز یاد گرفتم چطور یک جعبهٔ ساده را به یک کارت تمیز و خوش‌ظاهر تبدیل کنم.<\u002Fp>\n      <a class="more" href="#">ادامهٔ مطلب ←<\u002Fa>\n    <\u002Farticle>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و CSSِ کامل — همان تکه‌ها که ساختیم، به‌علاوهٔ چند خطِ ساده برای رنگ و فاصلهٔ متن‌ها (چیزهایی که از فصل‌های رنگ و تایپوگرافی بلدی):\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\nbody {\n  font-family: Tahoma, sans-serif;\n  background-image: linear-gradient(160deg, #eef1f7, #d9e0ee);\n  padding: 40px;\n}\n\n.card {\n  max-width: 320px;\n  margin: 0 auto;\n  padding: 16px;\n  background-color: #ffffff;\n  border: 1px solid #e4e8f0;\n  border-radius: 16px;\n  box-shadow: 0 12px 30px rgb(23 36 64 \u002F 0.14);\n}\n\n.card-cover {\n  height: 150px;\n  border-radius: 12px;\n  background-image: url("https:\u002F\u002Fpicsum.photos\u002Fseed\u002Ftaropood\u002F400\u002F220");\n  background-size: cover;\n  background-position: center;\n}\n\n.tag {\n  margin-top: 14px;\n  margin-bottom: 4px;\n  color: #5a4bff;\n  font-weight: 700;\n}\n\n.card h2 {\n  margin: 0 0 8px;\n  color: #172440;\n}\n\n.card p {\n  margin: 0;\n  color: #55607a;\n  line-height: 1.9;\n}\n\n.more {\n  display: inline-block;\n  margin-top: 12px;\n  color: #5a4bff;\n  font-weight: 700;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک کارتِ کامل داری — نوارِ تصویریِ بالا، یک برچسبِ رنگی، تیتر، متن و لینکِ «ادامهٔ مطلب» — با حاشیهٔ نازک، گوشه‌های گرد و سایهٔ نرم، روی یک پس‌زمینهٔ gradient. همان جعبهٔ لختِ قدمِ اول، حالا یک کارتِ واقعی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-decoration-layers.74ccb8dce9.160.webp 160w, \u002F_img\u002F02-image-decoration-layers.74ccb8dce9.320.webp 320w, \u002F_img\u002F02-image-decoration-layers.74ccb8dce9.640.webp 640w, \u002F_img\u002F02-image-decoration-layers.74ccb8dce9.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-decoration-layers.74ccb8dce9.1280.jpg\" srcset=\"\u002F_img\u002F02-image-decoration-layers.74ccb8dce9.160.jpg 160w, \u002F_img\u002F02-image-decoration-layers.74ccb8dce9.320.jpg 320w, \u002F_img\u002F02-image-decoration-layers.74ccb8dce9.640.jpg 640w, \u002F_img\u002F02-image-decoration-layers.74ccb8dce9.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"نمای بازشده از لایه‌های تزئینِ یک کارت: پایین پس‌زمینهٔ رنگی، رویش جعبهٔ سفید با حاشیه، رویش گوشه‌های گردشده، و بالای همه یک لایهٔ سایهٔ نرم\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":21,"heading":54,"html":55},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>border\u003C\u002Ftd>\n\u003Ctd>بوردِر\u003C\u002Ftd>\n\u003Ctd>حاشیهٔ دور جعبه؛ کلفتی + نوع خط + رنگ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>border-radius\u003C\u002Ftd>\n\u003Ctd>بوردِر رِیدیوس\u003C\u002Ftd>\n\u003Ctd>گرد کردن گوشه‌های لبهٔ دیدنیِ جعبه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>box-shadow\u003C\u002Ftd>\n\u003Ctd>باکس شَدو\u003C\u002Ftd>\n\u003Ctd>سایهٔ جعبه؛ جابه‌جایی افقی، عمودی، محوشدگی، رنگ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>background-image\u003C\u002Ftd>\n\u003Ctd>بک‌گراند ایمیج\u003C\u002Ftd>\n\u003Ctd>تصویر (یا gradient) به‌عنوان پس‌زمینهٔ یک ناحیه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>background-size\u003C\u002Ftd>\n\u003Ctd>بک‌گراند سایز\u003C\u002Ftd>\n\u003Ctd>چطور تصویرِ پس‌زمینه در ناحیه جا شود (\u003Ccode>cover\u003C\u002Fcode> \u002F \u003Ccode>contain\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>gradient\u003C\u002Ftd>\n\u003Ctd>گِرِیدینت\u003C\u002Ftd>\n\u003Ctd>گذارِ نرمِ رنگ؛ در CSS یک تصویر است، نه یک رنگ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":57,"heading":58,"html":59},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا \u003Ccode>linear-gradient()\u003C\u002Fcode> را نمی‌شود در \u003Ccode>background-color\u003C\u002Fcode> نوشت؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک کارتِ دوم بساز — مثلاً کارتِ یک محصول: یک نوارِ تصویریِ کاور، یک اسم، یک قیمت و یک دکمهٔ «خرید». همه‌چیز باید \u003Ccode>border\u003C\u002Fcode>، \u003Ccode>border-radius\u003C\u002Fcode>، \u003Ccode>box-shadow\u003C\u002Fcode> و یک پس‌زمینه (رنگ یا gradient) داشته باشد. سعی کن سایه و گوشه‌ها با کارتِ این فصل فرق داشته باشند تا حسِ عددها در دستت بیاید.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک دکمه بساز که پس‌زمینه‌اش یک \u003Ccode>linear-gradient()\u003C\u002Fcode> باشد، گوشه‌هایش گرد و یک سایهٔ ملایم داشته باشد. حالا امتحان کن: جهتِ gradient را با \u003Ccode>deg\u003C\u002Fcode> عوض کن تا رنگ‌ها از یک گوشهٔ دیگر شروع شوند. کدام جهت برای یک دکمهٔ فارسی (راست‌به‌چپ) طبیعی‌تر به‌نظر می‌رسد؟\u003C\u002Fp>\n",{"kind":21,"heading":61,"html":62},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی به جعبه‌ها ظاهرِ حرفه‌ای بدهی — ولی احتمالاً همین حالا یک رنگ را در چند جای CSS ات تکرار کرده‌ای (مثلاً همان \u003Ccode>#5a4bff\u003C\u002Fcode> که هم برای برچسب هم برای لینک نوشتیم). اگر بخواهی این رنگِ اصلیِ سایت را عوض کنی، باید دنبال تک‌تکشان بگردی. فصل بعد یاد می‌گیری رنگ‌ها و اندازه‌های تکراری را \u003Cstrong>یک‌بار\u003C\u002Fstrong> با یک اسمِ خودت تعریف کنی و همه‌جا صدایشان بزنی — به این می‌گویند custom property، و پایهٔ ساختنِ theme (و بعدها dark mode) همین است.\u003C\u002Fp>\n",{"course":64,"entitled":72,"lessons":73,"payments_enabled":72,"terms":258,"live":5},{"active_window":65,"effective_price_toman":66,"free":5,"lesson_count":67,"price_toman":68,"slug":69,"summary_fa":70,"title_fa":71},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[74,78,81,85,89,93,97,100,103,106,110,113,116,119,122,125,128,129,130,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255],{"free_preview":5,"order":75,"slug":76,"source":8,"term":75,"title_fa":77},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":9,"slug":79,"source":8,"term":75,"title_fa":80},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":82,"slug":83,"source":8,"term":75,"title_fa":84},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":86,"slug":87,"source":8,"term":75,"title_fa":88},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":90,"slug":91,"source":8,"term":75,"title_fa":92},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":94,"slug":95,"source":8,"term":75,"title_fa":96},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":12,"slug":98,"source":8,"term":75,"title_fa":99},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":6,"slug":101,"source":8,"term":75,"title_fa":102},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":16,"slug":104,"source":8,"term":75,"title_fa":105},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":107,"slug":108,"source":8,"term":75,"title_fa":109},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":75,"slug":111,"source":8,"term":9,"title_fa":112},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":9,"slug":114,"source":8,"term":9,"title_fa":115},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":82,"slug":117,"source":8,"term":9,"title_fa":118},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":86,"slug":120,"source":8,"term":9,"title_fa":121},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":90,"slug":123,"source":8,"term":9,"title_fa":124},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":94,"slug":126,"source":8,"term":9,"title_fa":127},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":107,"slug":132,"source":8,"term":9,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":9,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":75,"slug":139,"source":8,"term":82,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":9,"slug":142,"source":8,"term":82,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":82,"slug":145,"source":8,"term":82,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":86,"slug":148,"source":8,"term":82,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":90,"slug":151,"source":8,"term":82,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":94,"slug":154,"source":8,"term":82,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":12,"slug":157,"source":8,"term":82,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":6,"slug":160,"source":8,"term":82,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":16,"slug":163,"source":8,"term":82,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":107,"slug":166,"source":8,"term":82,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":82,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":75,"slug":172,"source":8,"term":86,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":9,"slug":175,"source":8,"term":86,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":82,"slug":178,"source":8,"term":86,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":86,"slug":181,"source":8,"term":86,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":90,"slug":184,"source":8,"term":86,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":94,"slug":187,"source":8,"term":86,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":12,"slug":190,"source":8,"term":86,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":6,"slug":193,"source":8,"term":86,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":75,"slug":196,"source":8,"term":90,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":9,"slug":199,"source":8,"term":90,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":82,"slug":202,"source":8,"term":90,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":86,"slug":205,"source":8,"term":90,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":90,"slug":208,"source":8,"term":90,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":94,"slug":211,"source":8,"term":90,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":12,"slug":214,"source":8,"term":90,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":6,"slug":217,"source":8,"term":90,"title_fa":218},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":16,"slug":220,"source":8,"term":90,"title_fa":221},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":107,"slug":223,"source":8,"term":90,"title_fa":224},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":75,"slug":226,"source":8,"term":94,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":9,"slug":229,"source":8,"term":94,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":82,"slug":232,"source":8,"term":94,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":86,"slug":235,"source":8,"term":94,"title_fa":236},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":90,"slug":238,"source":8,"term":94,"title_fa":239},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":94,"slug":241,"source":8,"term":94,"title_fa":242},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":12,"slug":244,"source":8,"term":94,"title_fa":245},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":6,"slug":247,"source":8,"term":94,"title_fa":248},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":16,"slug":250,"source":8,"term":94,"title_fa":251},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":107,"slug":253,"source":8,"term":94,"title_fa":254},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":256,"source":8,"term":94,"title_fa":257},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105037]