מדיה ויקי:Vector.css: הבדלים בין גרסאות בדף
קפיצה לניווט
קפיצה לחיפוש
אין תקציר עריכה תגית: שוחזרה |
אין תקציר עריכה תגית: שוחזרה |
||
שורה 42: | שורה 42: | ||
transition: box-shadow 0.3s ease; /* מעבר חלק לשינויים */ | transition: box-shadow 0.3s ease; /* מעבר חלק לשינויים */ | ||
width: 90%; | width: 90%; | ||
max-width: | max-width: 1600px; | ||
margin: 50px auto; | margin: 50px auto; | ||
position: relative; | position: relative; |
גרסה מ־00:17, 13 בספטמבר 2024
/* All CSS here will be loaded for users of the Vector skin */ body { background-color: #f5e6cc; /* צבע רקע חום בהיר */ } <!DOCTYPE html> <html lang="he"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ויקי עם רקע של ספרי קודש</title> <style> /* סגנון הבסיס של העמוד */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; } /* הוספת רקע של ספרי קודש */ .background-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1; /* בהירות התמונה */ background-image: url('URL-של-התמונה-כאן'); /* הכנס את ה-URL של התמונה */ background-size: cover; background-repeat: no-repeat; background-position: center; filter: brightness(200%); /* הגברת הבהירות */ } /* גוף האתר */ #content { background-color: #ffffff; /* רקע לבן לגוף האתר */ padding: 20px; border-radius: 10px; /* פינות מעט מעוגלות */ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), /* צל עיקרי */ 0 4px 6px rgba(0, 0, 0, 0.1); /* צל נוסף לתחושת עובי */ transition: box-shadow 0.3s ease; /* מעבר חלק לשינויים */ width: 90%; max-width: 1600px; margin: 50px auto; position: relative; } /* אפקט ריחוף שמוסיף עוד עומק */ #content:hover { box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25), /* הגברת הצל */ 0 6px 8px rgba(0, 0, 0, 0.15); /* צל נוסף בריחוף */ } /* הוספת צל קל לכותרות */ h1, h2, h3 { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* צל קטן שמוסיף עומק לכותרות */ } </style> </head> <body> <!-- תמונה כרקע בהיר --> <div class="background-image"></div> <!-- תוכן האתר --> <div id="content"> <h1>תוכן האתר</h1> <p>הטקסט הזה מופיע על רקע של ספרי קודש עתיקים.</p> </div> </body> </html>