אפקטי תמונה בcss3

Shia · 29/10/12

החיים של מעצבי ווב מעולם לא היו יפים יותר - האפקטים של CSS3 לתמונות הם ממש מדהימים ומאפשרים להכניס לתבניות עיצוב אפקטים יפהיפיים שלא היה אפשר לעשות בעבר...
מצ"ב לינק לדף שמרכז את הפילטרים לתמונות של css3:
http://www.inserthtml.com/2012/06/css-filters/

sarit_f · 5/11/12

לא ראיתי בפוסט הזה משהו מיוחד.
בלור? גוון ספסיה? זה דברים שאפשר לעשות אותם גם בלי הCSS3. (דקה וחצי בפוטושופ)
הייתי רוצה לשמוע על החידושים היותר תועלתיים.

Shia · 5/11/12

נכתב ע"י sarit_f;887320:
לא ראיתי בפוסט הזה משהו מיוחד.
בלור? גוון ספסיה? זה דברים שאפשר לעשות אותם גם בלי הCSS3. (דקה וחצי בפוטושופ)
הייתי רוצה לשמוע על החידושים היותר תועלתיים.

התגובה שלך מגיעה מחוסר הבנה של התחום.

אנסה לתת דוגמה להמחיש את היתרון של זה.

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

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

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

דינקיס · 6/11/12

חשוב לציין שמשום מה מוזילה עדיין לא תומכת בתקנים הללו. חבל

Shia · 6/11/12

נכתב ע"י דינקיס;887568:
חשוב לציין שמשום מה מוזילה עדיין לא תומכת בתקנים הללו. חבל

דווקא השתמשתי בפילטר גרייסקייל לפרויקט שעבדתי עליו לאחרונה.
עובד יופי במוזילה.

קוד:

filter: gray; 
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

מוכר לך אולי?

KingYes · 6/11/12

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

sarit_f · 6/11/12

מה לגבי הצללות, פינות עגולות - יש לזה פתרונות בCSS3?

מיכל101 · 6/11/12

css3

עיגול פינות:
;border-radius:20px
ניתן גם לקבוע לכל פינה ערך אחר.

צל:
box-shadow
וכמובן גם פה ניתן לקבוע ערך לכל כיוון וצבע.

sarit_f · 6/11/12

נכתב ע"י מיכל101;887709:
עיגול פינות:
;border-radius:20px
ניתן גם לקבוע לכל פינה ערך אחר.

צל:
box-shadow
וכמובן גם פה ניתן לקבוע ערך לכל כיוון וצבע.

עכשיו אתם מתחילים לדבר

וזה תומך בכל הדפדפנים בצורה מלאה?

מיליארד · 6/11/12

נכתב ע"י sarit_f;887712:
עכשיו אתם מתחילים לדבר

וזה תומך בכל הדפדפנים בצורה מלאה?

אבל אפשר לעשות את זה באילוס' / פוטושופ / אינדיזיין / קורל / וורד בשניה וחצי....

sarit_f · 6/11/12

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

imb · 6/11/12

נכתב ע"י sarit_f;887686:
מה לגבי הצללות, פינות עגולות - יש לזה פתרונות בCSS3?

הנה שני אפקטים פשוטים ומוצלחים ב CSS3:

צל:

קוד:

box-shadow: 5px 22px 22px 5px

הערכים מסודרים ע"פ סדר השעון, כרגיל.

פינות מעוגלות:

קוד:

border-radius: 0 15px 15px 0

הערכים מסודרים ע"פ הסדר הבא: שמאל למעלה, ימין למעלה, ימין למטה, שמאל למטה.

ישנם עוד אפקטים, כמו צל פנימי (inset?) ועוד. אשמח גם אני לשמוע עליהם יותר... (בינתיים אני מעתיקה מקובץ הסטייל של וורדפרס

)

נכתב ע"י sarit_f;887712:
וזה תומך בכל הדפדפנים בצורה מלאה?

אקספלורר לא מכיר בהם.

מיליארד · 6/11/12

http://css3generator.com/

Shia · 6/11/12

נכתב ע"י KingYes;887680:
ה-Blur זה אחד הדברים הכי שימושיים לדעתי.. אני מאוד אוהב את האפקט הזה, במיוחד שהוא מגיע עם איזה אנימציה..

שים לב שהוא גם אחד היותר זללני משאבים.

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

נכתב ע"י sarit_f;887712:
עכשיו אתם מתחילים לדבר

וזה תומך בכל הדפדפנים בצורה מלאה?

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