خانه / بایگانی برچسب: CSS

بایگانی برچسب: CSS

۸ ترفند مفید CSS که هر توسعه دهنده وب باید بداند — راهنمای کاربردی

CSS یک زبان خاص است که در نگاه نخست ممکن است کاملاً ساده به نظر برسد؛ اما برخی جلوه‌های خاص که از نظر تئوری و به ظاهر ساده هستند در اغلب موارد در هنگام پیاده‌سازی عملی پیچیده می‌شوند. در این مقاله چند نکته و ترفند مفید CSS را ارائه کرده‌ایم که به شما کمک می‌کند تا بهبود قابل توجهی در مسیر توسعه CSS به دست بیاورید. در این مقاله قصد نداریم در مورد میزان پیچیده بودن CSS صحبت کنیم؛ بلکه قصد داریم برخی ترفندهای مفید را با شما به اشتراک بگذاریم که فکر می‌کنیم احتمال یافتن آن‌ها در راهنماهای دیگر کمتر است. فهرست این ترفندها شامل موارد زیر است: فوتر چسبنده بزرگنمایی تصاویر هنگام رفتن ماوس روی آن‌ها «حالت شب» به صورت آنی نقطه‌های گلوله‌ای سفارشی تصاویر Parallax انیمیشن با تصاویر برش یافته حالت‌های Blend صفحه تصاویر به سبک پینترست با ما تا انتهای این راهنما همراه باشید. فوتر چسبنده فوتر چسبنده یا Sticky Footer یکی از موارد بسیار رایج است که ممکن است پیاده‌سازی آن برای افراد مبتدی دشوار باشد. در اغلب پروژه‌ها به یک فوتر نیاز داریم که صرف نظر از محتوای صفحه در انتهای صفحه همواره بر جای خود با..

توضیحات بیشتر »

طراحی تقویم کاملاً ساده با استفاده از CSS، Moment و Vue — راهنمای مقدماتی

در برخی موارد به دلایلی مانند نوع طراحی یک وب‌سایت و یا دلایل دیگر، نیاز هست که یک کامپوننت با طراحی کاملاً ساده داشته باشیم. طراحی چنین کامپوننتی با استفاده از grid در CSS کاملاً سرراست است. ما در این مقاله به توضیح این فرایند می‌پردازیم و آن را به صورت دینامیک درمی‌آوریم تا بتوان تاریخ‌های مختلف را در آن انتخاب کرد. قبل از هر کار باید اطمینان یابیم عنصری داریم که می‌توانیم اپلیکیشن Vue را روی آن راه‌اندازی کنیم. به این منظور از یک عنصر با id به صورت «calendar» استفاده می‌کنیم. اسکریپت Vue.js (+) را به پروژه اضافه کرده و یک اپلیکیشن ساده راه‌اندازی می‌کنیم: const app = new Vue({ el: '#calendar', data() { return { days: [] } }, mounted() { // load days } }) اینک moment (+) را در پروژه خود می‌گنجانیم و کد ()mounted مورد نیاز برای پر کردن روزهای ماه را می‌نویسیم. به این منظور از چند تابع moment همراه با منطق ES6 استفاده می‌کنیم. تابع ()mounted چنین است: let monthDate = moment().startOf('month') this.days = [...Array(monthDate.daysInMonth())].map((_, i) => { ret..

توضیحات بیشتر »

آشنایی با مقدمات کار با متن در HTML — راهنمای عملی

یکی از وظایف اصلی HTML یجاد ساختار و معنا برای متن است به طوری که مرورگر بتواند آن را به طرز صحیحی نمایش دهد. این مقاله به توضیح روشی می‌پردازد که HTML برای سازماندهی متن در یک صفحه با افزودن عناوین و پاراگراف‌ها، تأکید روی کلمات، ایجاد فهرست‌ها و موارد دیگر می‌پردازد. پیش‌نیازها آشنایی اولیه با HTML که در این مطلب (+) ارائه شده است. هدف این مقاله یادگیری طرز نشانه‌گذاری اولیه یک صفحه متن برای سازماندهی و ایجاد مفهوم در آن است که شامل پاراگراف‌بندی، ایجاد عنوان، عناصر تأکید و نقل‌قول‌ها می‌شود. مبانی اولیه: عناوین و پاراگراف‌ها اغلب بخش‌های متن ساخت‌یافته، شامل عناوین و پاراگراف‌ها است و فرقی نمی‌کند که مشغول خواندن یک داستان، روزنامه، کتاب درسی، مجله و یا موارد دیگر باشید. محتوای ساخت‌یافته موجب می‌شود که تجربه خواندن آسان‌تر شده و لذت بیشتری داشته باشد. در HTML هر پاراگراف دو عنصر پوششی

به صورت زیر دارد:

I am a paragraph، oh yes I am.

هر عنوان باید در عنصر عنوان پوشش یابد:

I am the title of the story.

شش سطح از عنصر عنوان وجود دارد که شامل

،

،

، <..

توضیحات بیشتر »

تابع سفارشی در جاوا اسکریپت — راهنمای عملی

اگر پیگیر نوشته‌های ما در این سری مطالب راهنمای عملی جاوا اسکریپت بوده باشید، احتمالاً تاکنون متوجه شده‌اید که تا به اینجا اکثر مطالب طرح شده ما علی‌رغم نام این دوره بیشتر پیرامون مباحث نظری بوده است. اما در این مقاله قصد داریم با مبانی عملی نوشتن تابع‌های سفارشی نیز آشنا شویم. در این مسیر برخی جزییات مفید که هنگام کار با این تابع‌ها مورد نیاز خواهد بود را نیز بررسی می‌کنیم. پیش‌نیازها سواد ابتدایی رایانه درکی مقدماتی از HTML و CSS آشنایی با مبانی اولیه جاوا اسکریپت و مطلب قبلی ما در مورد «مفهوم و کاربرد تابع در جاوا اسکریپت» هدف این مقاله ارائه عملی مراحل نوشتن تابع‌های سفارشی و توضیح چند موضوع مفید مرتبط با این زمینه است. یادگیری عملی: نوشتن اولین تابع سفارشی ما قصد داریم در ادامه یک تابع سفارشی بنویسیم که آن را ()displayMessage می‌نامیم. این تابع یک کادر پیام سفارشی روی صفحه وب نمایش خواهد داد و به عنوان یک جایگزین سفارشی‌سازی شده برای تابع ()alert داخلی مرورگر عمل می‌کند. ما این تابع را قبلاً دیده‌ایم؛ اما یک بار دیگر آن را یادآوری می‌کنیم. کد زیر را در کنسول جاوا اسکریپت مرورگر ..

توضیحات بیشتر »

رندر کادرهای Modal در React — به زبان ساده

کادرهای Modal می‌توانند موضوعات پیچیده‌ای باشند، زیرا روش ری‌اکت برای سازماندهی DOM چنین است. اگر با مبانی ری‌اکت آشنا باشید، می‌دانید که کل اپلیکیشن یک کامپوننت است که معمولاً نامیده می‌شود و به عنوان یک فرزند به یک

به نام root# الحاق می‌شود. فایل index.html چیزی مانند زیر است: فایل public/index.html برای ایجاد ری‌اکت زمانی که کامپوننت در DOM رندر شد، عنصر واقعی
در HTML با id #root کل اپلیکیشن React را درون خود رندر می‌کند. در نتیجه، این وضعیت که کامپوننت‌های اپلیکیشن React کاملاً تو در تو باشند، امری رایج محسوب می‌شود. منظور ما از تو در تو، ده‌ها سطح و یا بیشتر است. بنابراین اگر یکی از این سطوح کاملاً عمیق در لایه‌های تو در تو بخواهد یک modal را نمایش دهد، با برخی مشکلات جدی CSS مواجه می‌شود. Modal-ها یک لایه روی صفحه قرار می‌دهند و از این رو اولویت نمایشی بالاتری نسبت به همه عناصر دیگر دارند. اگر بخواهید آن را برحسب z-index تعیین کنید، باز هم کاملاً تو در تو خواهد بود و عناصر والد در سطوح بالاتر CSS تقدم خواهند داشت. بنابراین به جای این که با CSS سر و..

توضیحات بیشتر »

راهنمای جامع React (بخش اول) — از صفر تا صد

مقاله‌ای که پیش رو دارید مروری جامع در مورد React است که گرچه ادعا ندارد همه موارد مربوط به این فریمورک را در خود گنجانده، اما مبانی مقدماتی مورد نیاز برای این که به یک توسعه‌دهنده خبره React تبدیل شوید را در اختیار شما قرار خواهد داد. این مجموعه مطلب در 8 فصل ارائه شده است که فصل نخست آن شامل مباحث زیر می‌شود: فصل اول: مفاهیم اساسی جاوا اسکریپت مدرن برای استفاده از React متغیرها تابع‌های Arrow Rest و spread تخریب شیء و آرایه الفاظ قالبی (template literals) کلاس‌ها Callback-ها promise-ها Async/Await ماژول‌های ES توجه داشته باشید که آنچه در ادامه آمده است تنها فصل اول این مجموعه مطلب را شامل می‌شود و برای مطالعه فصول بعدی باید به بخش‌های آتی این سری مقالات مراجعه کنید. مقدمه‌ای بر یک کتابخانه View به نام React در این بخش React و ماهیت آن را توضیح می‌دهیم. React چیست؟ React یک کتابخانه جاوا اسکریپت است که هدف آن ساده‌سازی مراحل توسعه رابط‌های بصری است. React از سوی فیسبوک توسعه یافته است و در سال 2013 انتشاریافته است. در واقع React زیرساخت تشکیل دهنده بسیاری اپلیکیشن‌های پر استفاده از..

توضیحات بیشتر »

آشنایی با HTML — راهنمای جامع

این مقاله نخستین بخش از یک سری مطالب با عنوان راهنمای جامع HTML است. در این مقاله به مبانی مقدماتی HTML پرداخته و عناصر، خصوصیت‌ها و همچنین دیگر اصطلاح‌های مهم که ممکن است شنیده باشید را توضیح می‌دهیم. همچنین شیوه سازماندهی عناصر HTML، چگونگی سازماندهی صفحه HTML و دیگر ویژگی‌های مهم زبان HTML را توضیح می‌دهیم. در این مسیر با برخی مفاهیم HTML نیز در عمل کار می‌کنیم تا انگیزه یادگیری شما را حفظ کنیم. پیش‌نیازها سواد مقدماتی رایانه نصب برخی نرم‌افزارهای مقدماتی و داشتن دانشی اولیه از کار با فایل‌ها هدف از این راهنما آشنایی ابتدایی با زبان HTML و تمرین کردن نوشتن عناصر مختلف HTML است. HTML چیست؟ HTML اختصاری برای عبارت «زبان نشانه‌گذاری اَبَرمتن» (Hypertext Markup Language) و نباید آن را با زبان برنامه‌نویسی اشتباه بگیرید. زبان‌های نشانه‌گذاری یا markup به این جهت استفاده می‌شوند که به مرورگر اعلام کنند چگونه باید صفحات وب را جهت نمایش برای بازدیدکنندگان سازماندهی کند. این سازماندهی می‌تواند بسته به تمایل توسعه‌دهنده، بسیار ساده یا پیچیده باشد. HTML شامل یک سری از عناصر است که از آن‌ها ب..

توضیحات بیشتر »

حلقه ها در جاوا اسکریپت — راهنمای عملی

زبان‌های برنامه‌نویسی برای اجرای وظایف تکراری با سرعت بالا بسیار مناسب هستند. این وظایف می‌تواند شامل محاسبات ساده تا هر نوع موقعیت دیگر باشد که تعداد زیادی از آیتم‌های مشابه باید کامل شوند. در این نوشته به بررسی ساختارهای حلقه موجود در جاوا اسکریپت می‌پردازیم که چنین نیازهایی را تأمین می‌کنند. پیش‌نیازها سواد مقدماتی رایانه درکی ابتدایی از HTML و CSS آشنایی ابتدایی با جاوا اسکریپت هدف این راهنما درک روش استفاده از حلقه‌ها در جاوا اسکریپت است. مقدمه حلقه‌ها در همه زبان‌های برنامه‌نویسی حضور دارند و یکی از اجزای بسیار مهم اغلب این زبان‌ها محسوب می‌شوند. حلقه‌های برنامه‌نویسی همگی برای اجرای چندباره کارهای یکسان استفاده می‌شوند. این وضعیت در برنامه‌نویسی به نام «تکرار» (iteration) نامیده می‌شود. موردی را تصور کنید که یک کشاورز می‌خواهد مطمئن شود غذای کافی برای تأمین خوراک خانواده خود برای یک هفته دارد یا نه. وی در چنین موقعیتی می‌تواند از حلقه‌ای مانند زیر استفاده کند: یک حلقه به طور معمول دارای ویژگی‌های زیر است: شمارنده: متغیری که با یک مقدار خاص مقداردهی اولیه می‌شود. این همان ن..

توضیحات بیشتر »

۷ روش برای این که وب سایت یا وبلاگ خود را سریع تر کنید — به زبان ساده

سرعت پایین بارگذاری صفحه یکی از دلایل اصلی عدم توجه لازم از سوی کاربران نسبت به یک وب‌سایت است. بنابراین در این نوشته به معرفی برخی روش‌ها برای افزایش سرعت بارگذاری وب‌سایت یا وبلاگ جهت افزایش ترافیک ورودی آن پرداخته‌ایم. کاهش اندازه واقعی وب‌سایت اگر وب‌سایت شما در زمانی کندتر از سه ثانیه بارگذاری می‌شود، به احتمال زیاد بازدیدکنندگان، آن را حتی قبل از آن که صفحه اصلی بارگذاری شود ترک می‌کنند. استفاده از فرمت نادرست برای تصاویر باعث سنگین شدن وب‌سایت شده و تجربه کاربری بازدیدکنندگان را از بین می‌برد. بیش از 70 درصد صفحه‌های وب موبایل بالاتر از 1 مگابایت حجم دارند و 12 درصد نیز بالاتر از 4 مگابایت هستند. به خاطر داشته باشید که دانلود یک صفحه 1.5 مگابایتی در سرعت مناسب شبکه 3G به 7 ثانیه زمان نیاز دارد. بهترین رویه این است که حجم صفحه‌های خود را زیر 0.5 مگابایت حفظ کنید. تفاوت بین فرمت‌های JPG، PNG و GIF را بشناسید و مطمئن شوید که از مورد مناسب برای تصاویر وب‌سایت خود استفاده می‌کنید. بر اساس گزارش وب‌سایت GlobalStats، در سال 2018 بیشترین دقت صفحه نمایش‌هایی که کاربران استفاده کرده‌..

توضیحات بیشتر »

بررسی خالی بودن یک فیلد ورودی با استفاده از CSS — راهنمای به زبان ساده

شاید تاکنون از خود پرسیده باشید آیا امکان بررسی خالی بودن یک فیلد Input با استفاده از CSS وجود دارد؟ برای نمونه ممکن است بخواهید یک کامپوننت با قابلیت autocomplete داشته باشید. در این مواد معمولاً دو چیز مورد نیاز است. یکی این که در صورت خالی بودن کادر ورودی بخش drop-down را مخفی کنیم. و دوم این که در حالت پر شدن فیلد ورودی، drop-down نمایش یابد. در تصویر زیر این کارکرد را مشاهده می‌کنید: در این نوشته قصد داریم روش انجام این کار را توضیح دهیم. هر چند ممکن است این روش چندان کامل نباشد و برخی مشکلات در آن وجود داشته باشد؛ اما به هر حال بهتر از عدم وجود هیچ راه‌حل است. فرم ابتدا یک فرم می‌سازیم که مثال خود را در همین صفحه ارائه خواهیم کرد. در این صفحه ما یک فرم ساده تنها با یک فیلد خواهیم داشت: زمانی که این فیلد ورودی پر می‌شود باید border-color آن به زنگ سبز دربیاید. در ادامه نمونه‌ای از آن چه ایجاد کردیم را ملاحظه می‌کنید: بررسی خالی بودن فیلد ورودی ما برای بررسی خالی بودن یا نبودن فرم از HTML استفاد..

توضیحات بیشتر »