הפרומפט ליצירת קוד CSS להחלפת תמונת רקע במעבר על וידג’ט הנעה לפעולה
בשלב הראשון לחצי על כפתור הAI של אלמנטור, וכתבי את הפרומפט בא:
במעבר עכבר על הוידג'ט התמונה תתחלף
התוצאה:
selector:hover .elementor-cta__bg {
background-image: url('your-hover-image-url');
}
והקוד לא עושה שומדבר…
אז הוספנו את הURL של התמונה הרצויה, והוספנו important כדי לדרוס את ההגדרות של אלמנטור, והנה הקוד שעובד:
selector:hover .elementor-cta__bg {
background-image: url('https://chagit.alufot.co.il/wp-content/uploads/ai2.jpg') !important;
}
הפרומפט להוספת אנימציה מחליפה צבעים לכפתור וידג’ט הנעה לפעולה
אנימציה של צבעים מתחלפים לכפתור בוידג'ט. הצבעים הם אדום כחול ירוק צהוב
ו… יוצא קוד קצת מחורבש, ולא מדויק.
והנה הקוד להוספת אנימציה לכפתור וידג’ט הנעה לפעולה, אחרי תיקונים ודיוקים:
selector .elementor-cta__button {
animation: color-change 4s linear infinite;
}
@keyframes color-change {
0% {
background-color: red;
}
25% {
background-color: blue;
}
50% {
background-color: green;
}
75% {
background-color: yellow;
}
100% {
background-color: red;
}
}
הבינה המלאכותית מדהימה, ומקצרת לך את הדרך, רק אם את יודעת היטב קוד CSS.
3 תגובות
הי חגית,
איזה כיף לשחק עם הבינה המלאכותית!!
באמת בהרבה מקרים זה לא ממש עובד לי, אבל עכשיו ניסיתי משהו חמוד. יש לי טוגל עם כותרות וביקשתי שיעשה לי החלפת צבעים עם מעבר עכבר.
בהתחלה זה לא הצליח לי ואז ראיתי שהשם של כותרת הטוגל לא נכונה. ברגע ששיניתי זה הצליח.
מוזמנת להיכנס לאתר שלי ולראות בעצמך.
(חוץ מזה עשיתי שם עוד כמה דברים, הגדלתי את הלוגו במעבר עכבר, הגדלתי תמונה במעבר עכבר, “פוצצתי” כמה כפתורים ועוד היד נטויה :-))
איזה יופי!
שמחה שנהנית :)
תצליחי בכל,
חגית
תודה חגית, ממש נהניתי.
ניסיתי גם בקודים מורכבים יותר כמו Javascript והיא מעולה.
צריך טיפונת לדעת מה לשאול אותה והיא עובדת!