css על אלמנטים

[chagold]

קיבלתי מהגרפיקה אלמנטים ואני רוצה לשבץ אותם באתר, בצורה שכשיהיה מעבר עכבר עליהם אז האלמנט ישנה צבע (כאילו הוא גופן).
ואסביר קצת יותר.
כשמכניסים טקסט לDIV כל שהוא, אז אפשר לשנות לו את הצבע (כגון בCSS). כשמכניסים תמונה לאתר, אז התמונה היא סטטית. אני רוצה להכניס אלמנטים גרפיים (לצורך הענין כל מיני אייקונים), וכשיהיה מעבר עכבר אז האייקונים ישנו צבע.
תודה למסייעים.

 

[אמא ומתכנתת]

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

 

[chagold]

מצאתי:
http://icode.co.il/פונט-אייקונים/

ואם כבר..
https://www.ketacode.com/post.asp?s=12

בכ"א תודה

 

[תמנתי ווב דיזיין]

יש אתרים שהופכים איקונים לפונטים ואז זה יעבוד לך, אבל למה ללכת לכזה מרחק? עם CSS אפשר להחליף תמונה אחת באחרת בקלות רבה

 

[chagold]

כיצד?
תודה

 

[מיכל.]

אולי ככה:

 

[Ayelet Maimon]

האופציה של שימוש בפונט-אייקון היא מעולה וסופר שימושית. מומלץ מאוד! מאפשר הגדלה והקטנה ללא נזק לרזולוציה. החלפת צבעים. וכמובן מקל על התהליך בהתאמה למסכים שונים.
צריך לייצר את האייקון המתאים בתוכנה לעריכת ווקטור. לייצא ל svg ולהעלות למשל פה: www.fontello.com

 

[5566brs]

עוד אופציות אם אתה רוצה להשקיע באלמנט עצמו ושיישאר אלמנט בודד ללא החלפה באחר, כולל בידוד ושינוי צבע רק של חלקו:
https://css-tricks.com/almanac/properties/f/fill/
https://codepen.io/helmemat/pen/ndJgz
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS
ואם זה ממש תמונה ולא וקטורי אז יש אופציה כזו:
https://www.w3schools.com/tags/tag_map.asp

 

[עילום]

עוד כיוון
לשנות צבעים של תמונה
https://www.w3schools.com/css/css3_images.asp

https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_images_filters

ועכשיו
תגידו
אם לא ניתן לשנות צבע בתמונה

 

[chagold]

האופציה של שימוש בפונט-אייקון היא מעולה וסופר שימושית. מומלץ מאוד! מאפשר הגדלה והקטנה ללא נזק לרזולוציה. החלפת צבעים. וכמובן מקל על התהליך בהתאמה למסכים שונים.
צריך לייצר את האייקון המתאים בתוכנה לעריכת ווקטור. לייצא ל svg ולהעלות למשל פה: www.fontello.com

זה ניסיתי והצלחתי בsvg סתם, אבל מה-svg שמיוצאים מ-ai זה מדי מסובך לחלץ את הוקטור שלהם ולהטמיע בhtml.