Home-theater-designers
אתה רוצה שהאתר שלך ייראה מדהים --- אבל כישורי פיתוח האינטרנט שלך חסרים.
אל תתייאש! אתה לא צריך לדעת CSS או PHP כדי לבנות אתר מפואר עם אפקטים מגניבים. כמה תגי HTML פשוטים וידע כיצד להעתיק ולהדביק יעשה זאת.
כדי להתחיל עם כמה אפקטים HTML מגניבים, ריכזנו את תבניות קוד האפקט החינמיות של HTML. הם ישפרו את הפונקציונליות ואת חווית המשתמש של האתר שלך, מבלי לפרוץ את הבנק. למרות שהם בעיקר HTML, הקודים המגניבים האלה עשויים להכיל גם כמה CSS ו- PHP.
1. אפקט Parallax מגניב עם HTML
סביר להניח שראית את אפקט Parallax בשימוש באתרים עם מודעות מקוונות. כשאתה מגולל למטה מאמר, ה- תמונת רקע מופיעה כדי לגלול בקצב אחר, או שמופיעה מודעה.
לחלופין, אולי תמונת הרקע משתנה כשאתה מבקר בחלקים שונים של האתר. זה אפקט מגניב שמוסיף עומק ויזואלי לתוכן ואידיאלי גם אם לא להבין קוד HTML בסיסי .
אתה יכול לשחק עם האפקט ולהעתיק את הקוד עבור אפקט גלילת Parallax פשוט מ- W3Schools .
בגרסתו המתוחכמת ביותר, אפקט זה הוא שילוב של HTML, CSS ו- JS.
קדימה, תביא את הקודים לאמור לעיל אפקט פרלקס כותרת עליונה/תחתונה מ- CodePen .
2. קוד תיבת הערות מסוג HTML שניתן לגלול
זהו רכיב HTML פשוט אך מועיל המאפשר לך לארוז קטעי טקסט ארוכים לפורמט קומפקטי. בדרך זו הוא לא תופס את כל שטח הדף.
אתה יכול לשחק עם הצבעים והגודל של תיבת הטקסט כדי שיתאים לצרכים שלך.
קֶלֶט:
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! :) אם אתה רוצה משהו קצת יותר מפואר, אתה יכול גם להביא קוד עבורו תיבת הערות הניתנת להתאמה אישית מ- Quackit .
הם מציעים מספר תבניות, אך תוכל גם להשתמש בעורך שלהם כדי לשנות ולבדוק (להריץ) את הקוד המותאם אישית שלך באופן ידני.
3. טריק HTML מגניב: טקסט מודגש
עם פשוטתג HTML אתה יכול להוסיף המון אפקטים מגניבים לטקסט או לתמונות שלך. שים לב שלא כולם פועלים בכל הדפדפנים. אלה שהוזכרו כאן עובדים ב- Google Chrome, Microsoft Edge ו- Mozilla Firefox.
אפקט טקסט HTML זה מדגיש את הטקסט ביןתגים.
קֶלֶט:
Your highlighted text here.הדגמת פלט:
4. הוסף תמונת רקע לטקסט
באופן דומה, תוכל לשנות את צבע הטקסט שלך או להוסיף תמונת רקע. זה נראה נהדר אם גודל הגופן של הטקסט גדול יותר.
קֶלֶט:
MakeUseOf presents...אותו אפקט מושגת על ידי הוספת הסגנון ורכיבי הגופן לטקסט ב- תָג.
כיצד להגדיר קובצי GIF כטפט חלונות 10
הדגמת פלט:
5. טריק HTML שימושי להוספת הסבר כלים
המלצה על כותרת מופיעה כאשר אתה גולל עם העכבר מעל פיסת טקסט או תמונה 'שעוברות עליה'. תראה אלה משמשים באתרים בתמונות, טקסט מקושר או אפילו פריטי תפריט ביישומי שולחן עבודה. השתמש בקוד HTML זה כדי להוסיף הסבר כלים לטקסט רגיל בדף האינטרנט שלך.
קֶלֶט:
Move your mouse over me!הדגמת פלט:
6. טריקי ה- HTML המגניבים ביותר עד כה: גלילה או נפילת טקסט
כשאתה מחפש בגוגל 'מרקיז html', תגלה ביצת פסחא קטנה. רואה את מספר תוצאות החיפוש הגולש למעלה? זהו אפקט שנוצר על ידי תג המרקיזה המיושן כעת. אף על פי שאפקט הטקסט של HTML שהיה פעם מגניב הוצא משימוש, רוב הדפדפנים עדיין תומכים בו.
קֶלֶט:
I wanna scroll with it, baby!הדגמת פלט:
אתה יכול להוסיף תכונות נוספות לשלוט בהתנהגות הגלילה, צבע הרקע, הכיוון, הגובה ועוד. עם זאת, היזהר; תופעות אלו עלולות להפוך למרגיזות למדי אם משתמשים בהן יתר על המידה.
לקבלת אפקט טקסט נופל מגניב, לך שוב לקוואקיט והעתק את קוד המרקיז המותאם אישית ביותר שלהם.
7. בנה תפריט מגניב עם HTML
הטריקים הכי מגניבים של HTML הם אפקטים של HTML דינאמיים. עם זאת, לעתים קרובות הם מבוססים על סקריפט. להלן אפקט אחד לתפריטים שתסכים שנראה חלקלק מאוד.
זה קצת יותר מסובך מתג ה- HTML הממוצע שלך מכיוון שהוא עובד עם גיליון סגנון ותסריטים. היתרון הוא שאתה לא צריך להעלות קובץ 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;
}
/***********************************************
* 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('n')
document.write('.submenu{display: none;}n')
document.write('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 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
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
הדגמת פלט:
למרבה הצער, איננו יכולים להוכיח השפעה זו כאן. אבל המקור המקורי, Drive Dynamic , כולל עותק עובד של אפקט HTML דינאמי זה.
8. קבל גיליון אלקטרוני HTML עם Tableizer
אם אתה רוצה להציג גיליון אלקטרוני באתר שלך, תן ל- Tableizer! להפוך את הנתונים שלך לטבלת HTML. פשוט הדבק את הנתונים הגולמיים מ- Excel, Google Doc או כל גיליון אלקטרוני אחר בכלי הממיר ב tableizer.journalistopia.com . לצבוט את אפשרויות שולחן ולאחר מכן לחץ על שולחן זה לקבלת פלט ה- HTML.
זהו אולי אחד מקודי ה- HTML המגניבים ביותר לאתר שלך, כפי שציינו אותו! עושה את כל העבודה הקשה.
נְקִישָׁה העתק HTML ללוח כדי להעתיק את קוד ה- HTML ולהוסיף אותו לאתר שלך. שקול לערוך את צבעי הרקע כדי שייראה הרבה יותר קריר.
כיצד לפתוח קבצי .psd
למרות שזה לא ממש אפקט HTML, זה די שימושי.
עוד קודי HTML ואפקטים מגניבים לאתר שלך
העוצמה של HTML, CSS ו- JavaScript מציעה אפשרויות בלתי מוגבלות לאפקטים מהממים באתר שלך. רוצה יותר?
- מוצרי HTML נותן לך נהדרלתייג רעיונות.
- Drive Dynamic יש הרבה סקריפטים דינמיים של HTML.
- קוואקיט מציע קוד HTML מגניב.
הצגנו לך שמונה קודי HTML מגניבים שתוכל להעתיק כדי לשפר את האתר שלך. למרות שהם שונים, כולם קלים ליישם כל עוד אתה יודע טכניקות קידוד HTML בסיסיות.
לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 17 דוגמאות פשוטות לקוד HTML שתוכל ללמוד תוך 10 דקותרוצה ליצור דף אינטרנט בסיסי? למד דוגמאות HTML אלה ונסה אותן בעורך טקסט כדי לראות כיצד הן נראות בדפדפן שלך.
קרא הבא נושאים קשורים- תִכנוּת
- HTML
- בניית אתרים
- כלי מנהלי אתרים
סגן עורך אבטחה, לינוקס, עשה זאת בעצמך, תכנות וטכנולוגיה מוסברת ומפיק שימושי בפודקאסט, בעל ניסיון רב בתמיכת מחשבים שולחניים ותוכנות. תורם למגזין לינוקס פורמט, כריסטיאן הוא מתעסק בפטל פי, חובב לגו וחובב משחקי רטרו.
עוד מאת כריסטיאן קאוליהירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחצו כאן להרשמה