מדיה ויקי:Vector.css: הבדלים בין גרסאות בדף
קפיצה לניווט
קפיצה לחיפוש
אין תקציר עריכה תגית: שוחזרה |
אין תקציר עריכה תגית: שוחזרה |
||
| שורה 41: | שורה 41: | ||
0 4px 6px rgba(0, 0, 0, 0.1); /* צל נוסף לתחושת עובי */ | 0 4px 6px rgba(0, 0, 0, 0.1); /* צל נוסף לתחושת עובי */ | ||
transition: box-shadow 0.3s ease; /* מעבר חלק לשינויים */ | transition: box-shadow 0.3s ease; /* מעבר חלק לשינויים */ | ||
width: | width: 90%; | ||
max-width: 1200px; | max-width: 1200px; | ||
margin: 50px auto; | margin: 50px auto; | ||
גרסה מ־00:16, 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: 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>