سی‌اس‌اس گرید یا همان CSS Grid Layout که بین طراحان وب با نام Grid نیز شناخته می‌شود، اولین ماژول زبان CSS است که برای طراحی دوبعدی (محور X و Y) طراحی شده است. در واقع CSS Grid تنها راه صحیح طراحی صفحات وب بدون استفاده از ترفندهای مختلف است!
مقاله‌ی آموزش CSS Grid برای تمام افرادی طراحی شده است که به دنبال استفاده از CSS هستند.
چه توسعه‌دهنده back-end باشید و فقط کمی با CSS کار می‌کنید و چه متخصص front-end باشید، به شما توصیه می‌کنیم این مقاله را مطالعه نمایید. گرچه که حجم آن زیاد است اما مطمئن باشید کارتان را بسیار راحت تر می کند.
برای مطالعه‌ی این مقاله نیازی به دانش تخصصی از CSS نیست اما آشنایی ساده با عناصر HTML و دستورات ساده CSS به درک شما از مفاهیم ارائه شده در آن کمک می‌کند. به غیر از آشنایی اولیه با HTML و CSS به هیچ دانش دیگری نیاز ندارید.
📃 کامل‌ترین و جامع‌ترین راهنمای گرید در CSS را در لینک زیر بخوانید:
👉 https://www.roxo.ir/a-complete-guide-to-css-grid
💻 #برنامه_نویسی #CSS
🆔 @roxo_ir
مقاله‌ی آموزش CSS Grid برای تمام افرادی طراحی شده است که به دنبال استفاده از CSS هستند.
چه توسعه‌دهنده back-end باشید و فقط کمی با CSS کار می‌کنید و چه متخصص front-end باشید، به شما توصیه می‌کنیم این مقاله را مطالعه نمایید. گرچه که حجم آن زیاد است اما مطمئن باشید کارتان را بسیار راحت تر می کند.
برای مطالعه‌ی این مقاله نیازی به دانش تخصصی از CSS نیست اما آشنایی ساده با عناصر HTML و دستورات ساده CSS به درک شما از مفاهیم ارائه شده در آن کمک می‌کند. به غیر از آشنایی اولیه با HTML و CSS به هیچ دانش دیگری نیاز ندارید.
📃 کامل‌ترین و جامع‌ترین راهنمای گرید در CSS را در لینک زیر بخوانید:
👉 https://www.roxo.ir/a-complete-guide-to-css-grid
💻 #برنامه_نویسی #CSS
🆔 @roxo_ir
فلکس‌باکس (Flexbox CSS)، یک مدل طراحی UI است که برای توسعه‌دهنده قابلیت طراحی ساده ستون‌ها و بلوک‌ها را فراهم می‌کند.
به‌عبارت‌دیگر با استفاده از فلکس‌باکس میتوانید به‌صورت عمودی (Vertically) یا افقی (Horizontally) ستون‌ها یا ردیف‌هایی را تولید کرده و در صفحه به نمایش بگذارید.
کلمه Flex مخفف Flexibility یا همان انعطاف‌پذیری است و با استفاده از فلکس‌باکس می‌توان صفحات رسپانسیو (واکنش گرا) بسیار حرفه‌ای تولید کرد.
امروزه تمام مرورگرهای مدرن (بیش از ۹۹ درصد) از قابلیت فلکس‌باکس پشتیبانی می‌کنند. از طرفی همه موبایل‌ها نیز از این امکانات برخوردار هستند.
💻 #برنامه_نویسی #css
🆔 @roxo_ir
به‌عبارت‌دیگر با استفاده از فلکس‌باکس میتوانید به‌صورت عمودی (Vertically) یا افقی (Horizontally) ستون‌ها یا ردیف‌هایی را تولید کرده و در صفحه به نمایش بگذارید.
کلمه Flex مخفف Flexibility یا همان انعطاف‌پذیری است و با استفاده از فلکس‌باکس می‌توان صفحات رسپانسیو (واکنش گرا) بسیار حرفه‌ای تولید کرد.
امروزه تمام مرورگرهای مدرن (بیش از ۹۹ درصد) از قابلیت فلکس‌باکس پشتیبانی می‌کنند. از طرفی همه موبایل‌ها نیز از این امکانات برخوردار هستند.
💻 #برنامه_نویسی #css
🆔 @roxo_ir
طراحی واکنش گرا صفحات وب شما را در تمام دستگاه‌ها (موبایل، لپ‌تاپ، تبلت) به زیبایی نشان می‌دهد. شاید ابتدا پیچیده به نظر بیاید اما برای طراحی واکنش گرا تنها به HTML وCSS نیاز داریم! در طراحی واکنش گرا نباید اطلاعات را برای جا شدن در صفحات کوچک حذف کرد، بلکه باید شکل آن‌ها را تغییر داد تا بتوانند در صفحه جا شوند.
در نخستین روزهای طراحی وب، صفحه‌های وب در اندازه‌های مشخصی ساخته می‌شدند. اگر کاربر صفحه‌نمایش بزرگ‌تر یا کوچک‌تری نسبت به‌اندازه‌ای که برنامه‌نویس طراحی کرده است، داشته باشد، آنگاه صفحه وب دارای scrollbar ها یا نوارهای پیمایشی مزاحم و هم‌چنین خطوط درهم و بسیار طولانی و استفاده ضعیف از فضا خواهد بود.
باگذشت زمان، صفحه‌نمایش‌های در اندازه‌های مختلف برای دستگاه‌های مختلف در دسترس قرار گرفتند. از آن زمان به بعد مفهوم طراحی وب واکنشگرا (RWD) به وجود آمد. RWD مجموعه‌ای از روش‌هایی است که به صفحه‌های وب اجازه می‌دهد تا طرح و ظاهر خود را مطابق با اندازه صفحه‌نمایش‌های مختلف تغییر دهند.
📃 آموزش کامل طراحی ریسپانسیو با CSS:
👉 https://www.roxo.ir/learn-responsive-web-design-with-css
💻 #CSS
🆔 @roxo_ir
در نخستین روزهای طراحی وب، صفحه‌های وب در اندازه‌های مشخصی ساخته می‌شدند. اگر کاربر صفحه‌نمایش بزرگ‌تر یا کوچک‌تری نسبت به‌اندازه‌ای که برنامه‌نویس طراحی کرده است، داشته باشد، آنگاه صفحه وب دارای scrollbar ها یا نوارهای پیمایشی مزاحم و هم‌چنین خطوط درهم و بسیار طولانی و استفاده ضعیف از فضا خواهد بود.
باگذشت زمان، صفحه‌نمایش‌های در اندازه‌های مختلف برای دستگاه‌های مختلف در دسترس قرار گرفتند. از آن زمان به بعد مفهوم طراحی وب واکنشگرا (RWD) به وجود آمد. RWD مجموعه‌ای از روش‌هایی است که به صفحه‌های وب اجازه می‌دهد تا طرح و ظاهر خود را مطابق با اندازه صفحه‌نمایش‌های مختلف تغییر دهند.
📃 آموزش کامل طراحی ریسپانسیو با CSS:
👉 https://www.roxo.ir/learn-responsive-web-design-with-css
💻 #CSS
🆔 @roxo_ir
ساخت لودینگ فقط با CSS
اگر وب‌سایتی دارید، داشتن یک لودر (بارگذار) به کاربران کمک می‌کند تا بتوانند به‌محض کلیک کردن روی یک پیوند (لینک) یا دکمه، بفهمند که اتفاقی در حال رخ دادن است. شما میتوانید از این لودر در مکان‌های مختلف استفاده کنید و باید تا حد امکان ساده باشد.
📃 در این مقاله نحوه ساخت لودینگ با CSS را فرا خواهیم گرفت و دو نوع لودر را تنها با یک div و چند خط کد CSS می‌سازیم. افزون بر این آن را قابل تنظیم می‌کنیم تا بتوانید به‌راحتی تغییرات مختلفی را در آن ایجاد کنید:
👉 https://www.roxo.ir/how-to-create-a-css-only-loader-using-one-element
💻 #برنامه_نویسی #css
🆔 @roxo_ir
اگر وب‌سایتی دارید، داشتن یک لودر (بارگذار) به کاربران کمک می‌کند تا بتوانند به‌محض کلیک کردن روی یک پیوند (لینک) یا دکمه، بفهمند که اتفاقی در حال رخ دادن است. شما میتوانید از این لودر در مکان‌های مختلف استفاده کنید و باید تا حد امکان ساده باشد.
📃 در این مقاله نحوه ساخت لودینگ با CSS را فرا خواهیم گرفت و دو نوع لودر را تنها با یک div و چند خط کد CSS می‌سازیم. افزون بر این آن را قابل تنظیم می‌کنیم تا بتوانید به‌راحتی تغییرات مختلفی را در آن ایجاد کنید:
👉 https://www.roxo.ir/how-to-create-a-css-only-loader-using-one-element
💻 #برنامه_نویسی #css
🆔 @roxo_ir
ویژگی z-index چیست و چگونه کار می کند؟
ویژگی z-index ممکن است ساده به نظر برسد، اما فقط استفاده از یک عدد صحیح مثبت یا منفی نیست. زیر پوسته چیزهای بیشتری در جریان است، و برخی از موارد عجیب‌وغریب می‌توانند هنگام کار با آن مشکل ایجاد کنند.
📃 در این مقاله، می‌خواهیم به ویژگی z-index به‌گونه‌ای ژرف بپردازیم و یاد بگیریم که واقعا چگونه کار می‌کند:
👉 https://www.roxo.ir/z-index-property
💻 #برنامه_نویسی #css
🆔 @roxo_ir
ویژگی z-index ممکن است ساده به نظر برسد، اما فقط استفاده از یک عدد صحیح مثبت یا منفی نیست. زیر پوسته چیزهای بیشتری در جریان است، و برخی از موارد عجیب‌وغریب می‌توانند هنگام کار با آن مشکل ایجاد کنند.
📃 در این مقاله، می‌خواهیم به ویژگی z-index به‌گونه‌ای ژرف بپردازیم و یاد بگیریم که واقعا چگونه کار می‌کند:
👉 https://www.roxo.ir/z-index-property
💻 #برنامه_نویسی #css
🆔 @roxo_ir