מדיה ויקי:Vector.css
הערה: לאחר הפרסום, ייתכן שיהיה צורך לנקות את זיכרון המטמון (cache) של הדפדפן כדי להבחין בשינויים.
- פיירפוקס / ספארי: להחזיק את המקש Shift בעת לחיצה על טעינה מחדש (Reload) או ללחוץ על צירוף המקשים Ctrl-F5 או Ctrl-R (במחשב מק: ⌘-R).
- גוגל כרום: ללחוץ על צירוף המקשים Ctrl-Shift-R (במחשב מק: ⌘-Shift-R).
- אדג': להחזיק את המקש Ctrl בעת לחיצה על רענן (Refresh) או ללחוץ על צירוף המקשים Ctrl-F5.
/* 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: 80%;
max-width: 1200px;
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>