קוד CSS מוכן לאתר האלמנטור: כך תצרו אפקט תמונה ראשית יוקרתית ב-5 דקות

בתחום בניית האתרים, הדיוק והירידה לפרטים הקטנים הם אלו שמפרידים בין אתר רגיל לאתר פרימיום בעל מראה מלוטש. כמעצבים ומפתחים המעדיפים איכות ודיוק מקצועי, אנו מחפשים דרכים להעניק ערך מוסף ויזואלי מבלי לפגוע בביצועי האתר. שימוש מושכל ב-CSS מאפשר להשיג בדיוק את זה.

במדריך זה נלמד כיצד להטמיע אפקט Luxury Glass Light Rays – טכניקה המשלבת אנימציית "נשימה" עם קרני אור דינמיות.

למה חשוב להשתמש בווידג'ט "תמונה ראשית" ולא בתמונה רגילה?

ישנה חשיבות טכנית מכרעת לשימוש בווידג'ט "תמונה ראשית" (Featured Image) של אלמנטור עבור קוד זה:

• תאימות סלקטורים: הקוד מבוסס על מבנה ה-HTML הספציפי של ווידג'ט התמונה הראשית. וידג'ט תמונה רגיל משתמש לעיתים במבנה Classes שונה, מה שעלול למנוע מהאנימציות להיקשר נכון לאלמנט.

• אוטומציה ודינמיות: שימוש בווידג'ט זה מבטיח שהאפקט יתעדכן אוטומטית בכל פעם שתחליפו תמונה בפוסט, מבלי שתצטרכו להטמיע את הקוד מחדש בכל דף.

• יציבות ויזואלית: המבנה של התמונה הראשית באלמנטור יציב יותר עבור ערכי CSS מתקדמים כמו isolation: isolate, המונעים "קפיצות" של התמונה בזמן האנימציה.

איך הקוד עובד?

הקוד מורכב משלושה אלמנטים מרכזיים:

1. אפקט ה"נשימה": התמונה גדלה וקטנה בעדינות רבה, מה שיוצר תחושת עומק חיה.

2. קרני אור: שימוש ב-linear-gradient בזוויות שונות המדמות השתקפות אור יוקרתית על זכוכית.

3. ניהול שכבות: שימוש ב-Z-index ובידוד שכבות כדי לשמור על סדר עיצובי מושלם.

הקוד להעתקה

העתיקו את הקוד הבא והדביקו אותו בהגדרות ה-CSS המותאם אישית (Custom CSS) של ווידג'ט התמונה הראשית:

/* ===============================================
   LUXURY GLASS LIGHT RAYS — גרסה סופית מלאה
   ============================================== */

selector .elementor-widget-container {
    מיקום: קרוב משפחה;
    רדיוס-הגבול: 30 פיקסלים !חשוב;
    גלישה: !חשוב מוסתר;
    בידוד: לבודד;
}

/* ── שכבה א׳: קרניים דקיקות מפינות ועם נטיות ── */
selector .elementor-widget-container::before {
    תוכן: "";
    מיקום: מוחלט;
    הכנס: 0;
    רֶקַע:
        /* קרן 1 — נטייה 30°, דקה, משמאל-עליונה */
        גרדיאנט ליניארי (
            30 מעלות,
            שקוף 35%,
            rgba(255,255,255,0.55) 49.5%,
            rgba(255,255,255,0.7) 50%,
            rgba(255,255,255,0.55) 50.5%,
            שקוף 65%
        ),
        /* קרן 2 — נטייה 150°, דקה, מימין-עליונה */
        גרדיאנט ליניארי (
            150 מעלות,
            שקוף 38%,
            rgba(255,248,220,0.45) 49.7%,
            rgba(255,255,255,0.6) 50%,
            rgba(255,248,220,0.45) 50.3%,
            שקוף 62%
        ),
        /* קרן 3 — נטייה 70° (כמעט אנכית), מרכז-ימין */
        גרדיאנט ליניארי (
            70 מעלות,
            שקוף 55%,
            rgba(255,255,255,0.35) 64.8%,
            rgba(255,255,255,0.5) 65%,
            rgba(255,255,255,0.35) 65.2%,
            שקוף 75%
        );
    אטימות: 0;
    מדד z: 4;
    אירועי-מצביע: אין;
    רדיוס-גבול: ירושה;
    אנימציה: rays1 7s כניסה-יציאה אינסופית;
}

/* ── שכבה ב׳: קרניים נוספות בכיוונים אחרים ── */
selector .elementor-widget-container::after {
    תוכן: "";
    מיקום: מוחלט;
    הכנס: 0;
    רֶקַע:
        /* קרן 4 — נטייה -25° (אלכסון שני) */
        גרדיאנט ליניארי (
            -25 מעלות,
            שקוף 30%,
            rgba(255,255,255,0.4) 44.8%,
            rgba(255,255,255,0.6) 45%,
            rgba(255,255,255,0.4) 45.2%,
            שקוף 60%
        ),
        /* קרן 5 — נטייה 10° (כמעט אופקית) */
        גרדיאנט ליניארי (
            10 מעלות,
            שקוף 42%,
            rgba(255,250,230,0.3) 57.8%,
            rgba(255,255,255,0.5) 58%,
            rgba(255,250,230,0.3) 58.2%,
            שקוף 72%
        ),
        /* קרן 6 — נטייה 120°, מלמטה */
        גרדיאנט ליניארי (
            120 מעלות,
            שקוף 60%,
            rgba(255,255,255,0.3) 74.8%,
            rgba(255,255,255,0.45) 75%,
            rgba(255,255,255,0.3) 75.2%,
            שקוף 88%
        );
    אטימות: 0;
    מדד z: 4;
    אירועי-מצביע: אין;
    רדיוס-גבול: ירושה;
    אנימציה: rays2 9s כניסה-יציאה 3s אינסופיים;
}

/* ── שכבה ג׳: שימר עקום-אלכסוני יחיד, דק ── */
selector .elementor-widget-container .elementor-image::before {
    תוכן: "";
    מיקום: מוחלט;
    הכנס: 0;
    רֶקַע:
        /* קרן 7 — נטייה 55°, חדה מאוד */
        גרדיאנט ליניארי (
            55 מעלות,
            שקוף 44%,
            rgba(255,255,255,0.2) 49.6%,
            rgba(255,255,255,0.65) 50%,
            rgba(255,255,255,0.2) 50.4%,
            שקוף 56%
        );
    אטימות: 0;
    מדד z: 5;
    אירועי-מצביע: אין;
    רדיוס-גבול: ירושה;
    אנימציה: rays3 5.5 שניות כניסה-יציאה אינסופית 1.5 שניות;
}

/* ── שכבה ד׳: ניצוץ מרכזי עדין (halo) ── */
selector .elementor-widget-container .elementor-image::after {
    תוכן: "";
    מיקום: מוחלט;
    הכנס: 0;
    רקע: גרדיאנט רדיאלי (
        אליפסה 55% 40% ב-50% 50%,
        rgba(255,255,255,0.07) 0%,
        rgba(255,255,255,0.02) 50%,
        שקוף 75%
    );
    אטימות: 0;
    מדד z: 3;
    אירועי-מצביע: אין;
    רדיוס-גבול: ירושה;
    אנימציה: halo 12s כניסה-יציאה אינסופית 0.8s;
}

/* ===============================================
   אנימציות — הופעה ודעיכה בלבד, ללא תנועה
   ============================================== */

@keyframes קרניים1 {
    0% { אטימות: 0; }
    18% { אטימות: 0; }
    32% {אטימות: 1; }
    58% {אטימות: 0.8; }
    72% { אטימות: 0; }
    100% { אטימות: 0; }
}

@keyframes rays2 {
    0% { אטימות: 0; }
    22% {אטימות: 0; }
    40% { אטימות: 0.9; }
    62% {אטימות: 0.65; }
    78% { אטימות: 0; }
    100% { אטימות: 0; }
}

@keyframes rays3 {
    0% { אטימות: 0; }
    12% { אטימות: 0; }
    28% {אטימות: 1; }
    50% { אטימות: 0.9; }
    68% { אטימות: 0; }
    100% { אטימות: 0; }
}

@keyframes הילה {
    0% { אטימות: 0; }
    25% { אטימות: 0; }
    45% {אטימות: 1; }
    70% {אטימות: 0.6; }
    85% { אטימות: 0; }
    100% { אטימות: 0; }
}

/* ===============================================
   אפקט נשימה — התמונה הולכת וחוזרת (scale)
   ============================================== */

בורר תמונה {
    רדיוס-גבול: ירושה !חשוב;
    אנימציה: לנשום 8 שניות רווח פנימה החוצה חלופה אינסופית !חשוב;
    transform-origin: מרכז מרכז;
    ישתנה: יהפכו;
}

@keyframes לנשום {
    0% { שינוי: קנה מידה (1); }
    40% { שינוי: קנה מידה (1.03); }
    70% { שינוי: קנה מידה (1.05); }
    100% { שינוי: קנה מידה (1.02); }
}

פתרון בעיות נפוצות (Troubleshooting)

לעיתים, בשל הגדרות קודמות בתבנית האתר, האפקט עלול שלא להופיע כראוי. הנה כמה דברים שכדאי לבדוק:

• בדיקת Z-index: אם קרני האור אינן נראות, ודאו שאין אלמנט אחר בפוסט עם ערך z-index גבוה יותר שמסתיר אותן. הקוד שלנו משתמש ב-z-index: 4 כדי להבטיח נראות מעל שכבת התמונה.

• ניקוי מטמון (Cache): לאחר הדבקת הקוד, מומלץ לנקות את המטמון של האתר ושל הדפדפן כדי לראות את השינויים בזמן אמת.

• תאימות דפדפנים: הקוד עושה שימוש ב-will-change: transform, תכונה המסייעת לדפדפן להתכונן לאנימציה ולמנוע ריצודים, מה שמבטיח פעולה חלקה גם בדפדפנים ישנים יותר.

התאמה אישית של האפקט (Customization)

כמעצבים, אתם מוזמנים לשנות ערכים בקוד כדי להתאים אותו למיתוג הספציפי שלכם:

• שינוי מהירות ה"נשימה": בשורה של animation: breathe 8s, תוכלו לשנות את הערך 8s לערך נמוך יותר (כמו 5s) לתנועה מהירה יותר, או לערך גבוה יותר לתנועה איטית וכמעט בלתי מורגשת.

• שליטה בעוצמת האור: ניתן לשנות את ערכי ה-rgba בתוך ה-linear-gradient. ככל שהערך האחרון (ה-Alpha) קרוב יותר ל-1, האור יהיה חזק ובולט יותר.

סיכום מקצועי

שילוב של טכניקות CSS מתקדמות בווידג'ט התמונה הראשית של אלמנטור מאפשר לכם ליצור בידול משמעותי בשוק רווי. הדיוק בפרטים הקטנים הוא זה שבסופו של דבר מושך לקוחות רציניים המחפשים איכות גבוהה וביצועים ללא פשרות.

מעוניינים בפתרונות עיצוב מתקדמים נוספים? עקבו אחרינו למדריכי פיתוח אתרים נוספים.

אינמציה יחודית לתפריט הראשי באלמנטור>>>