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

מתוך אוצר מהרי''ט
קפיצה לניווט קפיצה לחיפוש
אין תקציר עריכה
אין תקציר עריכה
שורה 1: שורה 1:
<!DOCTYPE html>
/* All CSS here will be loaded for users of the Vector skin */
<html lang="he">
 
<head>
/* רקע הדף */
    <meta charset="UTF-8">
body {
    <title>בדיקת אפקט התכהות סביב טקסט</title>
    background-color: #f5e6cc; /* חום בהיר */
    <style>
}
        body {
 
            background-color: #f5e6cc;
/* גוף האתר */
            margin: 0;
#content {
        }
    background-color: #d39c7c; /* צבע גוף האתר */
        #content {
    color: white; /* צבע הטקסט */
            background-color: #d39c7c;
    position: relative;
            color: white;
    overflow: hidden;
            padding: 20px;
}
            position: relative;
 
        }
/* קישורים */
        #content::after {
#content a {
            content: "";
    color: gray;
            position: absolute;
}
            top: 0;
 
            right: 0;
/* אפקט התכהות סביב הטקסט */
            bottom: 0;
#content::before {
            left: 0;
    content: '';
            background: radial-gradient(circle, transparent 0%, #6d3327 100%);
    position: absolute;
            pointer-events: none;
    top: 0;
        }
    left: 50%;
     </style>
    transform: translateX(-50%);
</head>
    width: 100%;
<body>
    height: 100%;
     <div id="content">
    background: radial-gradient(circle, transparent 5%, #6d3327 95%);
        <h1>כותרת</h1>
    pointer-events: none;
        <p>זהו טקסט לדוגמה כדי לבדוק את האפקט של התכהות סביב הטקסט.</p>
     mix-blend-mode: multiply;
        <p>עוד פסקה עם <a href="#">קישור לדוגמה</a>.</p>
     opacity: 0.6;
    </div>
}
</body>
</html>

גרסה מ־16:08, 16 בספטמבר 2024

/* All CSS here will be loaded for users of the Vector skin */

/* רקע הדף */
body {
    background-color: #f5e6cc; /* חום בהיר */
}

/* גוף האתר */
#content {
    background-color: #d39c7c; /* צבע גוף האתר */
    color: white; /* צבע הטקסט */
    position: relative;
    overflow: hidden;
}

/* קישורים */
#content a {
    color: gray;
}

/* אפקט התכהות סביב הטקסט */
#content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 5%, #6d3327 95%);
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.6;
}