כדי להוסיף קווים אופקיים בסגנון מפריד לאתרים שלך, אפשרות אחת כוללת הוספת קבצי תמונה של שורות אלה את הדף שלך, אך זה ידרוש מהדפדפן שלך לאחזר ולהעלות את הקבצים האלה, דבר שעלול להשפיע לרעה עַל ביצועי האתר. אתה יכול גם להשתמש ב- CSS נכס גבול להוסיף גבולות המשמשים כשורות בחלק העליון או בתחתית האלמנט, ויוצרים למעשה את קו ההפרדה שלך.
או - יותר טוב - השתמש ב- HTML אלמנט לכלל האופקי.
אלמנט הכלל האופקי
מראה ברירת המחדל של קווי כלל אופקיים אינו אידיאלי. כדי לגרום להם להיראות נחמדים יותר, הוסף CSS כדי להתאים את המראה החזותי של אלמנטים אלה כך שיתאים לאופן בו אתה רוצה שהאתר שלך ייראה.
תג HR בסיסי מציג את הדרך בה הדפדפן רוצה להציג אותה. דפדפנים מודרניים בדרך כלל מציגים תגי HR לא מעוצבים עם רוחב של 100 אחוז, גובה של 2 פיקסלים וגבול תלת ממדי בשחור כדי ליצור את הקו.
רוחב וגובה הם עקביים בין דפדפנים
הסגנונות היחידים שעולים בקנה אחד בין דפדפני האינטרנט הם רוֹחַב וסגנונות. אלה מגדירים עד כמה הקו יהיה גדול. אם אינך מגדיר את הרוחב והגובה, רוחב ברירת המחדל הוא 100 אחוז וגובה ברירת המחדל הוא 2 פיקסלים.
בדוגמה זו הרוחב הוא 50 אחוז מאלמנט האב (שימו לב להלן דוגמאות אלה כוללות סגנונות מוטבעים. במסגרת ייצור, סגנונות אלה ייכתבו למעשה בגיליון סגנונות חיצוני כדי להקל על הניהול בכל הדפים שלך):
style = "width: 50%;">
ובדוגמה זו הגובה הוא 2em:
style = "height: 2em;">
שינוי הגבולות יכול להיות מאתגר
בדפדפנים מודרניים הדפדפן בונה את הקו על ידי התאמת הגבול. אז אם תסיר את הגבול עם מאפיין הסגנון, השורה תיעלם בדף. כפי שאתה יכול לראות (ובכן, לא תראה כלום, מכיוון שהקווים יהיו בלתי נראים) בדוגמה זו:
style = "border: none;">
התאמת גודל הגבול, הצבע והסגנון גורמים לקו להיראות שונה ובעל אותו אפקט בכל הדפדפנים המודרניים. לדוגמא, בהדגמה זו הגבול הוא אדום, מקווקו ורוחב 1 פיקסלים:
style = "border: 1px מקווקו # 000;">
הכינו קו דקורטיבי עם תמונת רקע
במקום צבע, הגדר תמונת רקע לכלל האופקי שלך כך שהיא תיראה בדיוק כמו שאתה רוצה, אך עדיין תוצג סמנטית בסימון שלך. בדוגמה זו השתמשנו בתמונה שהיא משלושה קווים גלי. על ידי הגדרת אותו כ- תמונת רקע ללא חזרה, זה יוצר הפסקה בתוכן שנראה כמעט כמו שאתה רואה בספרים:
סגנון = "גובה: 20 פיקסלים; רקע: #fff url (aa010307.gif) מרכז גלילה ללא חזרה; border: none; ">
שינוי אלמנטים של משאבי אנוש
בעזרת CSS3 תוכלו גם להפוך את הקווים שלכם למעניינים יותר. אלמנט משאבי אנוש באופן מסורתי הוא אופקי עם קו המאפיינים של CSS, תוכלו לשנות את מראה המראה שלהם. שינוי מועדף על אלמנט ה- HR הוא שינוי הסיבוב.
סובב את אלמנט ה- HR שלך כך שהוא פשוט אלכסוני:
שעה {
-מוז-טרנספורמציה: סובב (10deg);
-webkit-transform: סובב (10deg);
-o-transform: סובב (10deg);
-ms-transform: סובב (10deg);
להפוך: לסובב (10deg);
}
או שאתה יכול לסובב אותו כך שיהיה אנכי לחלוטין:
שעה {
טרנספורמציה-מוז: סובב (90 מעלות);
-Webkit-transform: סובב (90 מעלות);
טרנספורמציה: לסובב (90 מעלות);
-ms-transform: סובב (90 מעלות);
להפוך: לסובב (90 מעלות);
}
טכניקה זו מסובבת את ה- HR בהתבסס על מיקומו הנוכחי במסמך, כך שתצטרך להתאים את המיקום כדי להגיע למקום הרצוי לך. לא מומלץ להשתמש בזה כדי להוסיף קווים אנכיים לעיצוב, אבל זה אפקט מעניין.
דרך נוספת להשיג קווים בדפים שלך
דבר אחד שיש אנשים שעושים במקום להשתמש באלמנט HR הוא להסתמך על גבולות של אלמנטים אחרים. אבל לפעמים משאבי אנוש הם הרבה יותר נוחים וקלים יותר לשימוש מאשר לנסות להקים גבולות. הבעיות של דגם התיבה של חלק מהדפדפנים עשויות להפוך את הגדרת הגבול למסובכת עוד יותר.