דרך פשוטה מאוד לסובב את האלמנטים של דף אתר - פשוט יש ליישם כמה סגנונות css. היכרות עם שיעור זה תאפשר לכם למקם אוהד כרטיסים נפרש, עלים שנפלטו או תמונות מסוגננות באלבום על הדף. השיעור מכיל דוגמה ליישום אלבום תמונות ולוקח בחשבון את הפתרון לכל הדפדפנים המודרניים.
זה הכרחי
ארבע תמונות ברוחב של עד 450 פיקסלים
הוראות
שלב 1
דוגמה זו תתמקד ביצירת דף אלבום מסוגנן עם תמונות מסובבות.
הכנתי מראש תמונות (רוחב 400 פיקסלים) עם כתובות:
בעתיד נקצה תעודות זהות לתמונות לפי שמותיהן.
שלב 2
ראשית, נכין בלוק לאלבום התמונות שלנו באמצעות תג div, וגם נוסיף אליו תמונות באמצעות תג img (כל תמונה חייבת להיות סגורה בתג div משלה), כך:
שים לב שהקצנו מזהה לחסימה -. לפי המזהה, אנו יכולים להתייחס לחסימה באמצעות css.
שלב 3
לאחר מכן, עליך להגדיר את סגנונות ה- css לחסום. רשימת סגנונות: "position: relative;" - יגדיר את המקור מהפינה השמאלית העליונה של הבלוק שלנו; "שוליים: 50 פיקסלים אוטומטיים;" - יגדיר את הכניסה של הבלוק שלנו "50px" מעל ומתחת לשאר תוכן העמוד, וכן יגדיר את הכניסה האוטומטית ימינה ושמאלה, ובכך יישר את החסימה שלנו במרכז; "רוחב: 900 פיקסלים; גובה: 650 פיקסלים;" - יגדיר את הרוחב ל- 900 פיקסלים והגובה ל- 650 פיקסלים, בהתאמה.
יש למקם את רשימת הסגנונות שצוינה כך:
# תמונה_דף {
מיקום: קרוב משפחה;
שוליים: 0 אוטומטי;
רוחב: 900 פיקסלים;
גובה: 650 פיקסלים;
יישור טקסט: מרכז;
}
שימו לב לשימוש ב- "# photo_page" - כך אנו מתייחסים למזהה החסימה.
שלב 4
כעת נקצה סגנונות כלליים לכל תמונה בתוך גוש photo_page. אלה פינות מעוגלות, גבול אפור, רקע לבן, ריפוד וצל צל.
זה ייצור אפקט צילום:
# תמונה_דף img {
גבול-רדיוס: 7 פיקסלים;
גבול: 1px אפור מלא;
רקע: #ffffff;
ריפוד: 10 פיקסלים;
תיבת צל: 2 פיקסלים 2 פיקסלים 10 פיקסלים # 697898;
}
שימו לב לשימוש ב- "# photo_page img" - זה יתייחס לכל התמונות שנמצאות בתוך בלוק photo_page
שלב 5
חשוב להוסיף סגנון קצר כזה:
# photo_page div {
לצוף: שמאלה;
}
זה מכווץ את כל הבלוקים בתוך בלוק התמונה_צד שמאלה.
שלב 6
שלב הביניים של השיעור הסתיים כעת. אם העבודה שלך דומה לתמונה בצילום המסך, אז לא טעית ותוכל להמשיך לשלב הבא.
שלב 7
עכשיו נפנה לסובב את התמונות שפורסמו. לשם כך אנו זקוקים לסגנון הטרנספורמציה. כרגע, בצורתו הטהורה, לא משתמשים בו, אלא רק עם קידומת לכל דפדפן בהתחלה, כך:
-webkit-transform: סובב (ערך);
-moz-transform: סובב (ערך);
-o-transform: סובב (ערך);
זהו סגנון הסיבוב לדפדפנים: גוגל כרום, מזילה, אופרה (בהתאמה). במקום המילה "ערך", נכניס בסוף מספר עם deg, כך:
90 מעלות - סובב 90 מעלות בכיוון השעון.
-5deg - סובב -5 מעלות נגד כיוון השעון.
וכו.
שלב 8
סגנון לתמונה photo_1:
# photo_1 {
-webkit-transform: סובב (5deg);
-מוז-טרנספורמציה: סובב (5deg);
- טרנספורמציה: סובב (5deg);
}
התמונה הראשונה מסובבת 5 מעלות.
שלב 9
סגנון לתמונה photo_2:
# תמונה_2 {
-webkit-transform: סובב (-3deg);
טרנספורמציה-מוז: סובב (-3deg);
-o- טרנספורמציה: סובב (-3deg);
}
התמונה השנייה מסובבת -3 מעלות.
שלב 10
סגנון לתמונה photo_3:
# photo_3 {
-webkit-transform: סובב (-2deg);
-מוז-טרנספורמציה: סובב (-2deg);
-o-transform: סובב (-2deg);
}
התמונה השלישית מסובבת -2 מעלות.
שלב 11
סגנון לתמונה photo_4:
# photo_4 {
-webkit-transform: סובב (8deg);
-מוז-טרנספורמציה: סובב (8deg);
-O-Transform: סובב (8deg);
}
התמונה הרביעית מסובבת 8 מעלות.
שלב 12
בואו נראה איך תוכלו לתקן את מיקום התמונות. לדוגמה, אתה רוצה לקזז את התמונה הראשונה 20px מלמעלה ו- 10px משמאל. במקרה זה, עליך להשתמש בסגנון השוליים. הנה הדרך הנכונה להשתמש בו למקרה שלנו:
# photo_1 {
שוליים: 20px -10px -20px 10px;
-webkit-transform: סובב (5deg);
-מוס טרנספורמציה: סובב (5deg);
- טרנספורמציה: סובב (5deg);
}
שימו לב שהערך הראשון של הסגנון הוא השוליים העליונים; השני הוא הכניסה ימינה; השלישי הוא כניסה מלמטה; כניסה רביעית - שמאל.
חשוב: במקרה שלנו, השוליים התחתונים שווים לערך השלילי של השוליים העליונים.אם אתה רואה חלל לבן מתחת לתמונה בדף שלך, נסה להכניס את החלק התחתון של התמונה בצורה שלילית עוד יותר.
שלב 13
העבודה הושלמה, אני מספק צילום מסך (תוך התחשבות בשינוי הכניסה של התמונה הראשונה המתוארת בשלב 12).
הוסף סגנון כניסה לכל תמונות שאינן במצב המתאים לך.
