גיליונות סגנון מדורגים (CSS) מתוכננים באמצעות או פורמט XML (כולל XHTML, SVG). זוהי שפת גליונות סגנון המשמשת בעיקר לתיאור אלמנטים באמצעות סדרה מגוונת של שיטות עיצוב. אחת השיטות מרחפת ובמאמר זה נבין את רחף ב- CSS באופן הבא:

• מה זה רחף ב- CSS?
• איפה משתמשים ברחף?
• מה עושה רחף?
• תְאִימוּת
• איך זה עובד?
• העבר את העכבר על שינוי צבע הרקע ל'אדום '
• יצירת אטימות רחף על תמונות
• יצירת כיסוי טקסט בתמונות

מה זה רחף ב- CSS?

מרחף CSS הוא רכיב בורר שמשמש לעיצוב אלמנטים שונים כאשר מצביע העכבר מרחף מעליהם. ניתן להשתמש בהם כמעט בכל אלמנט HTML. לפיצ'ר הרחף ב- CSS חשיבות רבה בתכנון דפי אינטרנט.

java מתי להשתמש בזה

רכיב הרחף יכול להדגיש, לקודד ולהתאים אישית דפי אינטרנט בהתאם להעדפת המשתמש בתוכנית עיצוב אינטרנט קומפקטית ואפקטיבית.

איפה משתמשים ברחף?

ניתן להדגיש את הדוגמאות הנפוצות ביותר לכדאיות של תכונת הרחף באתרי קניות גדולים כמו Flipkart ו- Amazon. כאשר משתמשים מרחפים על מוצר כלשהו באתרי מסחר אלקטרוני אלה המוצר מתוכנת לבצע פונקציית ריחוף זום אוטומטית בכדי לספק ללקוח תצוגה טובה יותר של המוצרים שנבחרו. באמצעות תכנות זה, עמוד האינטרנט נועד להציג תצוגה קומפקטית של כל מגוון המוצרים בליווי תצוגה מפורטת של המוצר המעוניין בעיצוב דף אינטרנט יחיד.

מה עושה רחף?

הרחף הוא כלי תכנות רב-פונקציונלי באמצעותו המשתמש יכול להתאים אישית את אלמנט היעד במספר אינסופי של קריטריוני עיצוב. מקרים מסוימים של הידע התפעולי של תכונת הרחף כוללים:

• שינוי צבע רקע / גופן
• הטמעת טקסט נסתר המוצג ברחף
• צור אפקטים של גלגול תמונות
• זום אוטומטי על טקסט / תמונות
• שנה את אטימות התמונה
• הטמעת טקסט
• החלפת תמונות
• Div. לְרַחֵף
• פעולות עיצוב מרובות אחרות של CSS.

אפקט הרחף משנה בעצם את ערך המאפיין של אלמנט כדי לאפשר שינויים מונפשים בטקסט / תמונה מוגדרים או באלמנטים בהתאמה. הטמעת אלמנטים מרחפים של CSS בעיצוב דפי אינטרנט הופכת דף אינטרנט רגיל לדף אינטרנט אינטראקטיבי, חזק וחזק מאוד. עיצובים אלה של דפי אינטרנט הם ידידותיים למשתמש ומקיפים. עמודי רשת מעוצבים עם רחף מכילים ערעור צרכני גבוה יותר והם מפתים את ההודעה של לקוחות פוטנציאליים.

תאימות של רחף ב- CSS

תכונת הרחף תואמת את כל דפדפני האינטרנט העיקריים. עם זאת, יישום אלמנט זה במכשירי מגע הוא עדיין משימה מאתגרת. הרחף ב- CSS מאפשר נגישות לתוכן במכשירים שאינם תומכים בפונקציות רחף. נצפה כי פונקציית רחף מופעלת במכשיר שאינו תומך יכולה להיתקע במכשיר.

כתוצאה מכך, התצוגה החיונית של תוכן מכריע נחסמת באמצעות נושא העיצוב. מצד אחד כאשר אלמנט הרחף בתכנית CSS תורם רמה גבוהה של התאמה אישית יעילה לדפי אינטרנט באופן הפוך, יכולתו לפעול במכשירים ניידים רדומה ביותר. כניעה לנסיבות בהן עולם טכנולוגיית המידע צומח באופן ניכר, תכונת הרחף מסתכנת בהתיישנות עם ההתקדמות הטכנולוגית. לכן, הצורך לייצר תכונה משובצת ניידת שעובדת עם מגע ומכשירים ניידים הוא קריטי ביותר.

כיצד עובד רחף ב- CSS?

הסגנון הפסאודו-קלאסי הפעיל הוא הדומיננטי בעיצוב הרחף של CSS והוא עוקף את כל / כל הקישורים הבאים שאחריהם מחלק הפסבדו הזה. למשל בכיתה פסאודו ': קישור: ביקר, או: פעיל יש למקם את הכלל: רחף אחרי: קישור ו: ביקר אך לפני: פעיל למען מתאים: סטיילינג רחף. סדר ה- LVHA:: קישור,: רחף,: ביקר, ו: פעיל משמש כהפניה לסגנון עיצוב נכון: לרחף.

div {רקע-צבע: ריפוד ירוק: תצוגה של 18 פיקסלים: none} טווח: רחף + div {display: block}מבחן רחף!קוד מוסתר מופיע ברחף

בקוד שלעיל, אלמנט הטווח משתנה בכדי למזג את רכיב הריחוף וה- div על ידי שימוש בתכונה span: hover + div. אלמנט הטווח שיוצג בדף הנחיתה הראשי יציג את הטקסט 'מבחן רחף!' רחף נוסף על אלמנט הטווח מגלה את אלמנט div 'קוד מוסתר מראה על רחף'. פורמט הטבעה זה פועל על הטקסט וגם על התמונות.

כיצד להדפיס PHP php

העבר את העכבר על שינוי צבע הרקע ל'אדום '

p: רחף, h1: רחף, a: רחף {רקע-צבע: אדום}
רחף אדום
 
רחף אדום
 
קישורים:
 
מבחן רחף אדום:
  Com com  
  הערה: שלום
 

הקוד שלעיל מותאם אישית את

,

ו אלמנט ומשלב אותם בפונקציה משותפת של רחף. קוד זה נועד לשנות את צבע הטקסט לאדום כאשר מצביע העכבר מרחף מעליו. רכיב h1 ו- h2 מציג בהתאמה 'CSS: Hover Test Code' ו- 'Hover Red'. אלמנט הפיסקה: בדיקת רחף אדום ותג עוגן: google.com מודגש באדום כאשר מצביע העכבר מרחף מעליהם.

יצירת אטימות רחף על תמונות

.pic {רוחב: 1900px גובה: 1900px אטימות: מסנן אחד: אלפא (אטימות = 100) רקע: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: רחף {אטימות: 0.2 פילטר: אלפא (אטימות = 30)}

תוכנית CSS לעיל מציגה את שינוי אטימותה של תמונה המרחפת. האטימות המקורית של התמונה היא אחד עם זאת, השימוש במסנן הרחף של אטימות זהה שונה ל- 0.2. קוד זה מציג שעל ידי שימוש באלמנט הרחף ניתן לשנות את אטימות התמונה ו / או הטקסט.

יצירת כיסוי טקסט בתמונות

.pic {רוחב: 4000px גובה: 2170px רקע: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px גובה: 2170px רקע: #FFF אטימות: 0} .pic: רחף .text {opacity: 0.6 text-align: justify color: # 000000-font font: 20px-weight-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} כתום הוא סיב פרי עשיר. נוגדי החמצון הקיימים בתפוז יכולים לסייע בעיכול, להפוך את זוהר העור ולשמש כרכיב אנטי אייג'ינג.

שכבת טקסט בריחוף CSS היא כלי יעיל להטמעת הטקסט התיאורי של התמונה בתוך התמונה עצמה. כלי זה מסייע במתן סקירה קומפקטית של התמונה מבלי לתפוס מקום רדום בשטח מוגבל לעיצוב אתרים. בקוד זה, תמונת הרקע מוטמעת בטקסט תיאורי המוצג כאשר מצביע העכבר מרחף מעל הטקסט.

זה מסכם את כל ההיבטים החשובים של רחף ב- CSS ומדגיש את השימושיות שלו בפיתוח אתרים. יש הרבה אפקטים מיוחדים שהוא יכול להכניס לדפי האינטרנט שלנו. אנחנו תמיד יכולים לנסות שילובים שונים של בורר הרחף עם מאפייני CSS אחרים כמו אנימציה, תמונות רקע, היפר-קישורים וכו 'ולחקור את הפוטנציאל שלו כפי שראינו בכמה מהדוגמאות שלנו. לבסוף, CSS היא אחת הדרכים החזקות ביותר לעצב ולשנות דפי אינטרנט, ולכן מפתחים אתרים ממשמש ובא לרכוש מיומנות זו על מנת לבנות דפי אינטרנט דינמיים.

בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.

יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'רחף ב- CSS' ונחזור אליך.