מדיה ויקי:Vector.css: הבדלים בין גרסאות בדף

מתוך אוצר מהרי''ט
קפיצה לניווט קפיצה לחיפוש
אין תקציר עריכה
אין תקציר עריכה
שורה 6: שורה 6:
/* עיצוב גוף האתר */
/* עיצוב גוף האתר */
#content {
#content {
     background: radial-gradient(circle, #9b4433 50%, #6d3327 100%); /* צבע כהה סביב הטקסט */
     background-color: #9b4433; /* צבע רקע כללי */
     color: #d1bf5d; /* צבע הטקסט */
     color: #d1bf5d; /* צבע הטקסט */
     padding: 20px;
     padding: 20px;
     border-radius: 10px; /* פינות מעוגלות */
     border-radius: 10px; /* פינות מעוגלות */
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* צל קל מסביב */
     box-shadow: inset 0 0 10px #6d3327, 0 10px 15px rgba(0, 0, 0, 0.2); /* כהות סביב הטקסט */
     transition: box-shadow 0.3s ease, transform 0.3s ease; /* מעבר חלק */
     transition: box-shadow 0.3s ease, transform 0.3s ease; /* מעבר חלק */
     width: 100%; /* שמירה על רוחב מלא של התוכן */
     width: 100%; /* שמירה על רוחב מלא של התוכן */
     max-width: 1200px; /* רוחב מקסימלי */
     max-width: 1200px; /* רוחב מקסימלי */
     margin: 50px auto; /* מרכז את גוף האתר */
     margin: 50px auto; /* מרכז את גוף האתר */
}
/* עיצוב טקסט עם הצללה */
#content p, #content h1, #content h2, #content h3 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* הוספת הצללה מסביב לטקסט */
    color: #d1bf5d; /* צבע הטקסט כפי שסיפקת */
}
}


/* אפקט ריחוף על גוף האתר בלבד */
/* אפקט ריחוף על גוף האתר בלבד */
#content:hover {
#content:hover {
     box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25); /* צל חזק יותר */
     box-shadow: inset 0 0 15px #6d3327, 0 12px 22px rgba(0, 0, 0, 0.25); /* צל חזק יותר */
     transform: translateY(-5px); /* הרמת גוף האתר בריחוף */
     transform: translateY(-5px); /* הרמת גוף האתר בריחוף */
}
}
שורה 31: שורה 25:
/* עיצוב כותרות בגוף האתר */
/* עיצוב כותרות בגוף האתר */
#content h1, #content h2, #content h3 {
#content h1, #content h2, #content h3 {
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* צל מסביב לכותרות להבלטה */
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* צל קטן שמוסיף עומק לכותרות */
     color: #d1bf5d; /* צבע הכותרות */
     color: #d1bf5d; /* צבע הכותרות */
}
}

גרסה מ־21:22, 14 בספטמבר 2024

/* All CSS here will be loaded for users of the Vector skin */
body {
    background-color: #9b4433; /* צבע רקע כללי בהיר יותר */
}

/* עיצוב גוף האתר */
#content {
    background-color: #9b4433; /* צבע רקע כללי */
    color: #d1bf5d; /* צבע הטקסט */
    padding: 20px;
    border-radius: 10px; /* פינות מעוגלות */
    box-shadow: inset 0 0 10px #6d3327, 0 10px 15px rgba(0, 0, 0, 0.2); /* כהות סביב הטקסט */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* מעבר חלק */
    width: 100%; /* שמירה על רוחב מלא של התוכן */
    max-width: 1200px; /* רוחב מקסימלי */
    margin: 50px auto; /* מרכז את גוף האתר */
}

/* אפקט ריחוף על גוף האתר בלבד */
#content:hover {
    box-shadow: inset 0 0 15px #6d3327, 0 12px 22px rgba(0, 0, 0, 0.25); /* צל חזק יותר */
    transform: translateY(-5px); /* הרמת גוף האתר בריחוף */
}

/* עיצוב כותרות בגוף האתר */
#content h1, #content h2, #content h3 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* צל קטן שמוסיף עומק לכותרות */
    color: #d1bf5d; /* צבע הכותרות */
}

/* עיצוב קישורים */
a {
    color: white; /* שינוי צבע הקישורים ללבן */
}

a:visited {
    color: white; /* שינוי צבע הקישורים שביקרת בהם ללבן */
}

a:hover {
    color: #d1bf5d; /* שינוי צבע הקישור בעת ריחוף ל-#d1bf5d */
}

a:active {
    color: white; /* שינוי צבע הקישור כשהוא נלחץ ללבן */
}