۸ افکت HTML برای زیباتر شدن وبسایت

شاید شما هم از آن دسته افرادی باشید که دوست دارند وبسایت زیبا داشته باشند ولی به علت نداشتن مهارت فنی لازم، محدودیت‌هایی در این امر دارند. اصلا جای نگرانی نیست. برای طراحی یک سایت زیبا و چشم‌نواز اصلا نیازی به دانش «CSS» یا «PHP» ندارید، همین‌که مقدار کمی «HTML» مسلط باشید و عمل کپی پیست (Copy-Paste) را خوب بلد باشید، کفایت می‌کند.

در این مقاله برای شما 8 افکت اچ‌تی‌ام‌ال آورده‌ایم که می‌توانند بدون هیچ هزینه‌ای، عملکرد و «تجربه‌ی کاربری» (User Experience) وبسایت شما را بهبود ببخشند. البته ممکن است این کدها شامل کمی CSS و PHP نیز بشوند، ولی این مساله مشکلی برای استفاده‌ی شما از آن‌ها ایجاد نخواهد کرد. حال به بررسی این 8 افکت می‌پردازیم.

1. افکت پارالاکس

حتما در برخی از وبسایت‌ها دیده‌اید که به هنگام اسکرول به پایین (Scroll Down)، به نظر می‌رسد که تصویر پس‌زمینه نیز در جهت مخالف در حال حرکت است و هنگامی که بخش دیگری از آن مقاله می‌رسید، تصویر پس‌زمینه نیز تغییر می‌کند. این یک افکت بسیار زیبا است که عمق بصری بیشتری به محتوا می‌افزاید.

در تصویر زیر یک نسخه‌ی کاملا پایه از «افکت پارالاکس» (Parallax Effect) را مشاهده می‌کنید که در آن یک دسته از متون برروی تصویر پس‌زمینه حرکت می‌کنند.

2. جعبه متن با قابلیت اسکرول کردن

این عنصر در HTML به شما این اجازه را می‌دهد که مجموعه‌ی زیادی از متون را در یک فرمت فشرده نمایش دهید.

فیلم آموزش HTML و CSS پروژه‌محور در فرادرس

کلیک کنید

با این کار، متن شما تمام صفحه را پر نخواهد کرد. کد HTML این ویژگی به صورت زیر است:

خروجی آن نیز به شکل زیر است:

3. متن برجسته

با یک تگ ساده‌ی «<span>» در HTML می‌توان مجموعه‌ی بی‌نهایتی از جلوه‌ها را در متون و تصاویر ایجاد نمود. البته باید به این نکته توجه داشته باشید که تمام آن‌ها در همه‌ی مرورگرها کار نخواهند کرد. کدهایی که در این مطلب آمده‌اند به طور کامل در «Google Chrome»، «Microsoft Edge» و «Mozilla Firefox» کار می‌کنند.

فیلم آموزش کار با Tooltip ها در W3.CSS در فرادرس

کلیک کنید

کد HTML این افکت به شکل زیر است:

خروجی آن نیز به شکل زیر خواهد بود:

4. اضافه کردن تصویر پس‌زمینه به متن

همانطور که می‌توان رنگ پس‌زمینه‌ی متون را تغییر داد، میتوان رنگ خود متن را نیز عوض کرد و یا یک تصویر پس‌زمینه به آن چسباند. البته این کار تنها موقعی جذابیت دارد که متن شما نیز اندازه‌ی بزرگی داشته باشد.

کد HTML این ویژگی به شرح زیر است:

<span style=”background-image: url(//cdn.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt”>MakeUseOf presents…</span>

توجه داشته باشید که حتما مجبور نیستید از تگ «<Span>» استفاده کنید، می‌توانید با استفاده از تگ «<Strong>» نیز آن را پیاده‌سازی نمایید تا علاوه بر افکت‌های تعریف شده، متن مورد نظر نیز به صورت «بولد» (Bold) در بیاید. خروجی این کد به شکل زیر است:

توجه نمایید که در این مثال از یک تصویر پس‌زمینه‌ی نارنجی رنگ استفاده شده است (با افکت متن برجسته متفاوت است).

5. اضافه کردن Tooltip به متن

«Tooltip» همان نوار راهنمای کوچکی است که در هنگام نگه داشتن ماوس برروی یک متن یا تصویر، به نمایش در می‌آید. برای اضافه کردن این ویژگی از کد HTML زیر استفاده می‌کنیم:

خروجی آن به این شکل خواهد بود:

6. ساخت متون متحرک

هنگامی که عبارت «marquee html» را در گوگل جست‌وجو می‌کنید، یک ویژگی جالب نمایان می‌شود که در آن شمارنده‌ی نتایج جست‌وجو در حال حرکت است. این یک افکت منسوخ شده است که توسط تگ «<marquee>» ایجاد می‌شود. با اینکه این ویژگی HTML از رده خارج شده است، ولی همچنان اکثر مرورگرها از آن پشتیبانی می‌کنند.

برای ایجاد این ویژگی می‌توانید از کد زیر استفاده کنید:

7. ایجاد منوهای بازشو

جذاب‌ترین افکت‌های HTML آن‌هایی هستند که به صورت پویا عمل می‌کنند که البته در اکثر اوقات نیاز به نوشتن «اسکریپت‌های» (Script) خاص خودشان دارند. در این بخش یک منوی ساده و جذاب آمده که به دلیل استفاده از CSS و اسکریپت‌ها، کمی پیچیده‌تر از سایر کدها است. شاید قسمت خوب این کد این باشد که نیازی به آپلود فایل‌های جداگانه‌ی CSS یا اسکریپت ندارید و می‌توانید اطلاعات مورد نیاز را در بخش «<head>» صفحه قرار دهید.
برای استفاده از این ویژگی، ابتدا باید کدهای زیر را در بخش <head> صفحه‌ی مورد وارد کنید:

کد زیر را نیز در هرجایی که می‌خواهید منو قرار بگیرد، وارد نمایید:

<!– Keep all menus within masterdiv–>
<div id=”masterdiv”><div onclick=”SwitchMenu(‘sub1’)”>Topics</div>
<span id=”sub1″>
– <a href=”//www.makeuseof.com/service/browser”>Browsers/Addons</a><br>
– <a href=”//www.makeuseof.com/service/web_based”>Web Apps</a><br>
– <a href=”//www.makeuseof.com/service/how-to”>How-To Tips</a><br>
– <a href=”//www.makeuseof.com/service/applications”>Cool Software</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub2’)”>Staff Writers</div>
<span id=”sub2″>
– <a href=”//www.makeuseof.com/tag/author/karl-l-gechlik/”>Karl Gechlik</a><br>
– <a href=”//www.makeuseof.com/tag/author/tinsie/”>Tina</a><br>
– <a href=”//www.makeuseof.com/tag/author/varunkashyap/”>Varun Kashyap</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub3’)”>Miscellaneous</div>
<span id=”sub3″>
– <a href=”//www.makeuseof.com/about/”>About</a><br>
– <a href=”//www.makeuseof.com/contact”>Contact</a><br>
– <a href=”//www.makeuseof.com/archives-2″>Archives</a><br>
– <a href=”//www.makeuseof.com/disclaimer”>Disclaimer</a><br>
</span></div>

8. Tablezier!

فیلم آموزش HTML و CSS پروژه‌محور در فرادرس

کلیک کنید

تنها کافی است داده‌های خام را از اکسل، «گوگل داک» (Google Doc) یا هر صفحه گسترده‌ی دیگری در فیلد مربوطه وارد کنید و پس از ایجاد تغییرات لازم در بخش تنظیمات آن، برروی گزینه‌ی «Tableize It!» کلیک کنید تا خروجی HTML را دریافت کنید.

حالا می‌توانید کد HTML را در وبسایت خودتان قرار دهید یا با ایجاد تغییرات در رنگ پس‌زمینه‌ی آن، زیبایی آن را بیشتر کنید. با اینکه این بخش در اصل یک افکت اچ‌تی‌ام‌ال به حساب نمی‌آید، ولی بسیار کارآمد است.

اگر می‌خواهید یک طراح وبسایت خوب شوید و دانش خود را در این زمینه افزایش دهید، مطالب زیر برای شما بسیار مناسب خواهند بود:

• گنجینه آموزش های طراحی وب
• چگونه برنامه نویسی وب را شروع کنم؟
• آموزش پروژه محور طراحی قالب سایت با بوت استرپ (Bootstrap)

#