מדיה ויקי:Vector.css: הבדלים בין גרסאות בדף
קפיצה לניווט
קפיצה לחיפוש
אין תקציר עריכה תגית: שוחזרה |
אין תקציר עריכה תגית: שוחזרה |
||
| שורה 3: | שורה 3: | ||
background-color: #f5e6cc; /* צבע רקע חום בהיר */ | 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: | #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; | |||
} | |||
/* הוספת צל קל לכותרות */ | /* אפקט ריחוף שמוסיף עוד עומק */ | ||
h1, h2, h3 { | #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> | |||
גרסה מ־00:14, 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: 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>