8 تأثيرات HTML رائعة يمكن لأي شخص إضافتها إلى مواقع الويب الخاصة به

تريد أن يبدو موقع الويب الخاص بك رائعًا – لكن مهاراتك في تطوير الويب مفقودة.

لا تيأس! ليس عليك معرفة CSS أو PHP لإنشاء موقع رائع بتأثيرات رائعة. بعض علامات HTML البسيطة ومعرفة كيفية النسخ واللصق سيفي بالغرض.

لتبدأ ببعض تأثيرات HTML الرائعة ، قمنا بتجميع قوالب أكواد تأثير HTML المجانية هذه. سيعززون وظائف وتجربة المستخدم لموقعك ، مع عدم كسر البنك. على الرغم من أنها في الغالب HTML ، فقد تحتوي هذه الأكواد الرائعة أيضًا على بعض CSS و PHP.

1. تأثير المنظر الرائع مع HTML

ربما تكون قد رأيت تأثير المنظر المستخدم على مواقع الويب التي تحتوي على إعلانات عبر الإنترنت. أثناء التمرير لأسفل لمقالة ، تظهر صورة الخلفية للتمرير بوتيرة مختلفة ، أو يظهر إعلان.

بدلاً من ذلك ، ربما تتغير صورة الخلفية أثناء زيارتك لأجزاء مختلفة من الموقع. إنه تأثير رائع يضيف عمقًا مرئيًا إلى المحتوى ومثاليًا حتى لو لم تفهم كود HTML الأساسي .

يمكنك اللعب بالتأثير ونسخ الكود لتأثير تمرير Parallax بسيط من W3Schools .

في أكثر إصداراته تعقيدًا ، يكون هذا التأثير مزيجًا من HTML و CSS و JS.

انطلق واحضر الرموز لتأثير Header / Footer Parallax أعلاه من CodePen .

2. رمز مربع التعليق HTML القابل للتمرير

هذا عنصر HTML بسيط ولكنه مفيد يتيح لك تجميع مقتطفات طويلة من النص في تنسيق مضغوط. بهذه الطريقة لا تشغل المساحة الكاملة على الصفحة.

يمكنك اللعب بالألوان وحجم مربع النص ليناسب احتياجاتك.

إدخال:

 <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;">
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)</div>

إذا كنت ترغب في الحصول على شيء مربي الحيوانات قليلاً ، فيمكنك أيضًا إحضار رمز لمربع تعليق قابل للتخصيص من Quackit .

إنها توفر العديد من القوالب ، ولكن يمكنك أيضًا استخدام محررها لتغيير التعليمات البرمجية المخصصة واختبارها (تشغيلها) يدويًا.

3. خدعة HTML رائعة: نص مميز

باستخدام علامة <span> HTML بسيطة ، يمكنك إضافة الكثير من التأثيرات الرائعة إلى نصك أو صورك. لاحظ أنه ليس كل منهم يعمل عبر المتصفحات. تعمل تلك المذكورة هنا في Google Chrome و Microsoft Edge و Mozilla Firefox.

يُبرز تأثير نص HTML هذا النص بين علامات <span>.

إدخال:

 <span style="background-color: #FFFF00>Your highlighted text here.</span>

عرض الإخراج:

4. إضافة صورة الخلفية إلى النص

وبالمثل ، يمكنك تغيير لون النص أو إضافة صورة خلفية. يبدو هذا رائعًا إذا كان حجم خط النص أكبر.

إدخال:

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

يتم تحقيق نفس التأثير من خلال إضافة عناصر النمط والخط إلى النص في علامة <strong>.

عرض الإخراج:

5. خدعة HTML مفيدة لإضافة تلميح أدوات العنوان

يظهر تلميح عنوان عند التمرير بالماوس فوق جزء من نص أو صورة "تمت معالجتها". سترى هذه المستخدمة على مواقع الويب على الصور أو النصوص المرتبطة أو حتى عناصر القائمة في تطبيقات سطح المكتب. استخدم كود HTML هذا لإضافة تلميح أداة إلى نص عادي على صفحة الويب الخاصة بك.

إدخال:

 <span title="See, this is the tooltip. :)">Move your mouse over me!</span>

عرض الإخراج:

6. أروع حيل HTML حتى الآن: التمرير أو هبوط النص

عندما تبحث عن "marquee html" على Google ، سوف تكتشف بيضة عيد الفصح الصغيرة. رؤية نتائج البحث التمرير العد في الأعلى؟ هذا تأثير تم إنشاؤه بواسطة علامة التحديد المتقادمة الآن. بينما تم إهمال تأثير نص HTML الرائع هذا ، لا تزال معظم المتصفحات تدعمه.

إدخال:

 <marquee>I wanna scroll with it, baby!</marquee>

عرض الإخراج:

يمكنك إضافة المزيد من السمات للتحكم في سلوك التمرير ولون الخلفية والاتجاه والارتفاع والمزيد. كن حذرا ، ومع ذلك ؛ يمكن أن تصبح هذه الآثار مزعجة للغاية إذا تم الإفراط في استخدامها.

للحصول على تأثير رائع للنص المتساقط ، توجه إلى Quackit مرة أخرى وانسخ كود التحديد المميز الخاص بهم.

7. إنشاء قائمة تبديل رائعة باستخدام HTML

أروع حيل HTML هي تأثيرات HTML الديناميكية. ومع ذلك ، فهي غالبًا ما تستند إلى النص. فيما يلي أحد تأثيرات القوائم التي توافق على أنها تبدو رائعة للغاية.

إنها أكثر تعقيدًا قليلاً من علامة HTML المتوسطة لأنها تعمل مع ورقة أنماط ونصوص. الميزة هي أنك لست مضطرًا إلى تحميل ملف CSS أو ملف نصي لجعله يعمل. بدلاً من ذلك ، قم ببساطة بلصق الكود التالي في قسم <head> في موقع الويب الخاص بك.

إدخال:

 <style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
</style><script type="text/javascript">/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">n')
document.write('.submenu{display: none;}n')
document.write('</style>n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate</script>
And this code goes wherever you want the dynamic menu to appear.
<!-- Keep all menus within masterdiv-->
<div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div>
<span id="sub1">
- <a href="https://www.makeuseof.com/service/browser">Browsers/Addons</a><br>
- <a href="https://www.makeuseof.com/service/web_based">Web Apps</a><br>
- <a href="https://www.makeuseof.com/service/how-to">How-To Tips</a><br>
- <a href="https://www.makeuseof.com/service/applications">Cool Software</a><br>
...and more!
</span><div onclick="SwitchMenu('sub2')">Staff Writers</div>
<span id="sub2">
- <a href="https://www.makeuseof.com/tag/author/karl-l-gechlik/">Karl Gechlik</a><br>
- <a href="https://www.makeuseof.com/tag/author/tinsie/">Tina</a><br>
- <a href="https://www.makeuseof.com/tag/author/varunkashyap/">Varun Kashyap</a><br>
...and more!
</span><div onclick="SwitchMenu('sub3')">Miscellaneous</div>
<span id="sub3">
- <a href="https://www.makeuseof.com/about/">About</a><br>
- <a href="https://www.makeuseof.com/contact">Contact</a><br>
- <a href="https://www.makeuseof.com/archives-2">Archives</a><br>
- <a href="https://www.makeuseof.com/disclaimer">Disclaimer</a><br>
</span></div>

عرض الإخراج:

لسوء الحظ ، لا يمكننا إثبات هذا التأثير هنا. لكن المصدر الأصلي ، Dynamic Drive ، يتميز بنسخة عمل من تأثير HTML الديناميكي.

8. احصل على جدول بيانات HTML باستخدام Tableizer

إذا كنت تريد عرض جدول بيانات على موقعك ، فدع Tableizer! تحويل البيانات الخاصة بك إلى جدول HTML. ما عليك سوى لصق البيانات الأولية من Excel أو Google Doc أو أي جدول بيانات آخر في أداة التحويل على tableizer.journalistopia.com . قم بتعديل خيارات الجدول ، ثم انقر فوق Tableize It لتلقي إخراج HTML.

ربما يكون هذا أحد أروع أكواد HTML لموقع الويب الخاص بك ، مثل Tableize It! يقوم بكل العمل الشاق.

انقر فوق Copy HTML to Clipboard لنسخ كود HTML وإضافته إلى موقع الويب الخاص بك. ضع في اعتبارك تعديل ألوان الخلفية لجعلها تبدو أكثر برودة.

على الرغم من أن هذا ليس تأثير HTML حقًا ، إلا أنه سهل الاستخدام.

المزيد من أكواد HTML الرائعة والتأثيرات لموقعك

توفر قوة HTML و CSS و JavaScript خيارات غير محدودة محتملة للتأثيرات المذهلة على موقع الويب الخاص بك. هل تريد المزيد؟

لقد أظهرنا لك ثمانية رموز HTML رائعة يمكنك نسخها لتحسين موقع الويب الخاص بك. على الرغم من اختلافها ، إلا أنها سهلة التنفيذ طالما أنك تعرف تقنيات ترميز HTML الأساسية.