شما می‌خواهید وبسایتتان فوق‌العاده به‌نظر برسد—اما مهارت‌های توسعه وب‌تان کافی نیست.
شما می‌خواهید وبسایتتان فوق‌العاده به‌نظر برسد — اما مهارت‌های توسعه وب شما کمبود دارد.
نگران نباشید! لازم نیست CSS یا PHP را بدانید تا یک سایت شیک با افکت‌های جالب بسازید. تنها با برخی تگ‌های ساده HTML و دانستن روش کپی و چسباندن می‌توانید این کار را انجام دهید.
برای شروع با برخی افکت‌های جذاب HTML، این قالب‌های رایگان کد را برای کپی کردن جمع‌آوری کرده‌ایم. آنها کارایی و تجربه کاربری سایت شما را بدون هیچ هزینه‌ای افزایش می‌دهند. اگرچه بیشتر آنها HTML هستند، این کدهای جذاب ممکن است شامل CSS و PHP نیز باشند.
1. افکت پارالاکس جذاب HTML
احتمالاً افکت پارالاکس را در وب‌سایت‌هایی با تبلیغات آنلاین دیده‌اید. هنگامی که در یک مقاله به پایین اسکرول می‌کنید، تصویر پس‌زمینه به‌نظر می‌رسد با سرعت متفاوتی حرکت کند یا یک تبلیغ ظاهر شود.
به‌علاوه، ممکن است تصویر پس‌زمینه هنگام بازدید از بخش‌های مختلف سایت تغییر کند. این افکت جذاب عمق بصری به محتوا می‌افزاید و حتی اگر کدهای پایه HTML را ندانید نیز می‌توانید از آن استفاده کنید.
می‌توانید با این افکت بازی کنید و کد آن را برای یک افکت اسکرول پارالاکس ساده از W3Schools کپی کنید.
در پیشرفته‌ترین نسخهٔ خود، این افکت ترکیبی از HTML، CSS و JS است.
به‌سرعت کدهای افکت پارالاکس سرصفحه/پاصفحه را از CodePen دریافت کنید.
2. کد جعبهٔ نظرات قابل اسکرول HTML
این یک عنصر ساده اما مفید HTML است که به شما اجازه می‌دهد قطعات طولانی متن را در قالبی فشرده قرار دهید. به این ترتیب فضای صفحه را اشغال نمی‌کند.
می‌توانید با رنگ‌ها و اندازهٔ جعبهٔ متن بازی کنید تا به نیازهای خود سازگار شود.
Input:
<div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
اگر به دنبال چیزی کمی شیک‌تر هستید، می‌توانید کد یک جعبهٔ نظرات قابل تنظیم از Quackit را نیز دریافت کنید.
در آنجا می‌توانید چندین قالب پیدا کنید، اما می‌توانید از ویرایشگرشان برای تغییر دستی و آزمایش (اجرا) کد سفارشی خود نیز استفاده کنید.
3. یک ترفند جذاب HTML: متن برجسته
با یک تگ ساده <span> می‌توانید افکت‌های خنکی به متن یا تصویر خود اضافه کنید. توجه داشته باشید که همهٔ آنها در مرورگرها کار نمی‌کنند. موارد ذکر شده در اینجا در Google Chrome، Microsoft Edge و Mozilla Firefox کار می‌کنند.
این افکت متن HTML متن بین تگ‌های <span> را برجسته می‌کند.
Input:
<span style="background-color: #FFFF00">Your highlighted text here.</span>
نمایش خروجی:
مثال‌های زیادی از کدهای HTML جذاب وجود دارد که می‌توانید به سرعت یاد بگیرید.
4. کد HTML برای افزودن تصویر پس‌زمینه جذاب به متن
به‌طور مشابه، می‌توانید رنگ متن خود را تغییر دهید یا یک تصویر پس‌زمینه اضافه کنید. این روش وقتی اندازهٔ فونت متن بزرگ باشد، بسیار زیبا به‌نظر می‌رسد.
Input:
<span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 40pt">MakeUseOf presents...</span>
می‌توانید همان اثر را با افزودن استایل و عناصر فونت به متن در یک تگ <strong> به‌دست آورید.
نمایش خروجی:
5. ترفند مفید HTML برای افزودن تولتیپ عنوان
یک تولتیپ عنوان هنگام عبور ماوس بر روی یک قطعهٔ متن یا تصویر «دست‌کاری‌شده» ظاهر می‌شود. این ویژگی را می‌توانید در وب‌سایت‌ها بر روی تصاویر، متن‌های پیوندی یا حتی موارد منو در برنامه‌های دسکتاپ مشاهده کنید. از این کد HTML برای افزودن تولتیپ به متن ساده در صفحهٔ وب خود استفاده کنید.
از آنجا که این زبان توسعه در یک ساختار درختی خاص کار می‌کند، بهتر است کد HTML خود را به‌صورت سازمان‌یافته بنویسید تا تجربهٔ کدنویسی شما ارتقا یابد.
Input:
<span title="See, this is the tooltip. :)">Move your mouse over me!</span>
نمایش خروجی:
6. خنک‌ترین ترفندهای HTML تا به‌حال: متن اسکرول‌شونده یا سقوط‌کننده
وقتی در گوگل به‌دنبال «marquee html» بگردید، یک تخم‌مرغ کوچک Easter Egg پیدا می‌کنید. شمارش نتایج جستجو که در بالا اسکرول می‌شود را می‌بینید؟ این افکتی است که توسط برچسب قدیمی marquee ایجاد شده است. در حالی که این افکت متنی HTML که قبلاً محبوب بود اکنون منسوخ شده، اکثر مرورگرها هنوز از آن پشتیبانی می‌کنند.
Input:
<marquee>I wanna scroll with it, baby!</marquee>
نمایش خروجی:
می‌توانید با افزودن ویژگی‌های بیشتر به کنترل رفتار اسکرول، رنگ پس‌زمینه، جهت، ارتفاع و موارد دیگر بپردازید.
به‌عنوان مثال، می‌توانید با اسکرول به چپ این کار را انجام دهید:
<marquee
کلمه «left» را با «right» جایگزین کنید تا متن در جهت مخالف اسکرول شود.
همچنین می‌توانید به‌صورت عمودی، یعنی بالا یا پایین اسکرول کنید:
<marquee
علاوه بر این، marquee دارای رفتار «slide» است که محدودهٔ اسکرول متن را محدود می‌کند. اما مراقب باشید؛ این افکت‌ها در صورت استفاده بیش از حد می‌توانند آزاردهنده شوند. برای یک افکت متن سقوط‌کننده، به Quackit مراجعه کنید و کد marquee بسیار سفارشی‌شده‌ی آن را کپی کنید.
7. ساخت یک Switchmenu جذاب با HTML
خنک‌ترین ترفندهای HTML افکت‌های پویا هستند. با این حال، اغلب مبتنی بر اسکریپت هستند. در اینجا یک افکت برای منوها وجود دارد که مطمئناً خیلی شیک به‌نظر می‌رسد.
این کمی پیچیده‌تر از یک تگ HTML معمولی است چون با یک stylesheet و اسکریپت‌ها کار می‌کند. مزیت این است که نیازی به آپلود فایل CSS یا اسکریپت ندارید. در عوض، به سادگی کد را از Dynamic Drive در بخش <head> وب‌سایت خود الصق کنید.
8. دریافت یک صفحه‌گسترده HTML با Tableizer
اگر می‌خواهید یک صفحه‌گسترده را در سایت خود نمایش دهید، بگذارید Tableizer! داده‌های شما را به یک جدول HTML تبدیل کند. به سادگی داده‌های خام را از Excel، Google Docs یا هر صفحه‌گستردهٔ دیگری در ابزار تبدیل موجود در tableizer.journalistopia.com بچسبانید. گزینه‌های table را تنظیم کنید، سپس بر روی Tableize It کلیک کنید تا خروجی HTML را دریافت کنید.
این شاید یکی از خنک‌ترین کدهای HTML برای وب‌سایت شما باشد، زیرا Tableizer! تمام کار سخت را انجام می‌دهد.
برای کپی کردن کد HTML به حافظهٔ کلیپ‌بورد، بر روی Copy HTML to Clipboard کلیک کنید و آن را به وب‌سایت خود اضافه کنید. برای افکتی خنک‌تر، ویژگی background-colors را ویرایش کنید.
اگرچه این واقعاً یک افکت HTML نیست، اما بسیار کاربردی است.
کدها و افکت‌های جذاب بیشتر HTML برای سایت شما
قدرت HTML، CSS و JavaScript گزینه‌های نامحدودی برای افکت‌های خیره‌کننده در وب‌سایت شما فراهم می‌کند. می‌خواهید بیشتر؟
- HTML Goodies: ایده‌های عالی برای تگ را به شما می‌دهد.
- Dynamic Drive: اسکریپت‌های پویا و شگفت‌انگیز HTML فراوانی دارد.
- Quackit: کدهای جذاب HTML ارائه می‌دهد.
ما هشت کد جذاب HTML را به شما نشان دادیم که می‌توانید برای بهبود وب‌سایت خود کپی کنید. اگرچه متفاوت هستند، اما همه به‌راحتی قابل پیاده‌سازی هستند به‌شرطی که با تکنیک‌های پایهٔ کدنویسی HTML آشنا باشید.