הבנת האופן שבו IFrames עובד בעיצוב האתר
כאשר אתה מטביע אלמנט ב- HTML שלך, יש לך שתי הזדמנויות להוסיף סגנונות CSS אליו:
- ניתן לסדר את ה- IFRAME עצמו.
- ניתן לסדר את הדף בתוך IFRAME (בתנאים מסוימים).
שימוש ב- CSS כדי לסמן את רכיב IFRAME
הדבר הראשון שאתה צריך לשקול בעת עיצוב iframes שלך הוא IFRAME עצמו. בעוד רוב הדפדפנים כוללים iframes ללא הרבה סגנונות נוספים, זה עדיין רעיון טוב להוסיף כמה סגנונות כדי לשמור אותם עקביים.
הנה כמה סגנונות CSS שאני תמיד לכלול ב- iframes שלי:
- שוליים: 0;
- ריפוד: 0;
- גבול: none;
- רוחב you Value ;
- גובה you Value ;
כשהרוחב והגובה מוגדרים לגודל שמתאים למסמך שלי. הנה דוגמאות של מסגרת ללא סגנונות ואחד עם רק את היסודות מנוסח. כפי שאתה יכול לראות, סגנונות אלה בעיקר להסיר רק את הגבול סביב iframe, אבל הם גם להבטיח כי כל הדפדפנים להציג iframe עם אותם שולי, ריפוד, ואת הממדים.
HTML5 ממליץ להשתמש במאפיין overflow כדי להסיר את פסי הגלילה, אך זה אינו מהימן. אז אם אתה רוצה להסיר או לשנות את פסי הגלילה, עליך להשתמש במאפיין הגלילה ב- iframe שלך גם כן. כדי להשתמש במאפיין הגלילה, הוסף אותו כמו כל תכונה אחרת ולאחר מכן בחר אחד משלושה ערכים: כן, לא או אוטומטי. כן אומר לדפדפן לכלול תמיד פסי גלילה גם אם הם לא נחוצים. לא אומר להסיר את כל פסי גלילה אם יש צורך או לא.
אוטומטי הוא ברירת המחדל וכולל את פסי הגלילה כאשר הם נדרשים ומסיר אותם כאשר הם לא.
הנה כיצד לבטל את הגלילה עם המאפיין גלילה:
גלילה = "לא" >
זהו iframe.
כדי לכבות את הגלילה ב- HTML5 אתה אמור להשתמש במאפיין overflow. אבל כפי שאתה יכול לראות בדוגמאות אלה זה לא עובד באופן אמין בכל הדפדפנים עדיין.
כך תפעיל את הגלילה כל הזמן עם המאפיין overflow:
style = "overflow: scroll;" >
זהו iframe.
אין שום דרך לכבות את הגלילה לחלוטין עם המאפיין overflow.
מעצבים רבים רוצים iframes שלהם כדי להשתלב עם הרקע של הדף הם על כך הקוראים לא יודעים כי iframes הם אפילו שם. אבל אתה יכול גם להוסיף סגנונות כדי לגרום להם להתבלט. התאמת הגבולות כך iframe מופיע בקלות רבה יותר. פשוט השתמש במאפיין סגנון הגבול (או בתכונות הקשורות לגבולות גבול, גבול ימני, גבול שמאל ותחתון) כדי לסמן את הגבולות:
iframe {
border-top: # c00 1 פיקסלים מנוקדים;
border-right: # c00 2px dotted;
border-left: # c00 2px dotted;
הגבול התחתון: # c00 4px מנוקד;
}
אבל אתה לא צריך להפסיק עם גלילה גבולות עבור סגנונות שלך. ניתן להחיל הרבה סגנונות CSS נוספים על ה- iframe שלך. דוגמה זו משתמשת בסגנונות CSS3 כדי לתת ל- iframe צל, פינות מעוגלות וסובב אותו 20 מעלות.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-Moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-Moz-transform: לסובב (20deg);
-webkit-transform: לסובב (20deg);
-O-transform: לסובב (20deg);
-ms-transform: לסובב (20deg);
מסנן: progid: DXImageTransform.Microsoft.BasicImage (סיבוב = 0.2);
}
עיצוב תוכן ה- iframe
עיצוב התוכן של iframe הוא בדיוק כמו סגנון כל דף אינטרנט אחר. אבל, אתה חייב להיות בעל גישה כדי לערוך את הדף . אם אינך יכול לערוך את הדף (לדוגמה, הוא נמצא באתר אחר).
אם אתה יכול לערוך את הדף, אז אתה יכול להוסיף גיליון סגנונות חיצוני או סגנונות ממש במסמך בדיוק כמו שאתה היה סגנון כל דף אינטרנט אחר באתר שלך.