מדריכי CSS3 שכדאי להכיר

מבוא

אנחנו רגילים למעברי תמונות שמתבצעות בעזרת AJAX המכונה סליידר (Slider). הרבה מאוד מדריכים נכתבו עד היום ואני מניח שיוכתבו בהמשך.
היום אני רוצה להציג לכם מדריכים הכי מתקדמים שמאפשרים להשתמש ב CSS3 כתחליף לAJAX.
חלק מהמדריכים כתובים כך שכבר עכשיו ניתן לקחת אותם ולהטמיע בכל אתר ואתר, חלק אחר עדיין לא נתמך בכל הדפדפנים. לצערי הרב רובם לא עובדים בIE9 ועל גרסאות 7,8 בכלל לא מדובר.

אתר codrops נמצא ברשימת המומלצים ביותר.

1. פונקציות CSS3 חדשניות ביותר – מעבר בין התמונות.

פונקציות CSS3 חדשניות ביותר – מעבר בין התמונות
פונקציות CSS3 חדשניות ביותר – מעבר בין התמונות

למעשה עד היום רוב השימוש ב 3D התבצע בעזרת AJAX ותוספי JS נוספים שמשפרים את ומראה האתר. בדוגמא הזאת ניתן לראות שימוש ב CSS3 נטו.
אפקטים עובדים רק בדפדפני webkit (Google Chrome ו Safari). אצלי ב Safari על Windowds 7 זה לא עבד.
מי שרוצה לראות את זה ואין לו דפדפני webkit יכול לראות את הסרטון שמדגים את האפקטים:

 

2. אפקט LightBox ו ThickBox בנוי על בסיס CSS3.

אפקט LightBox ו ThickBox בנוי על בסיס CSS3.
אפקט LightBox ו ThickBox בנוי על בסיס CSS3.

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

3. פורטפוליו בעזרת CSS3.

פורטפוליו בעזרת CSS3
פורטפוליו בעזרת CSS3

תחליף ל jQuery קוד, שימוש בCSS נטו. קוד נקי וידידותי למתכנתים.

4. אפקט hover.

אפקט hover
אפקט hover

מצביעים על תמונה ומקבלים פירוט שלה.

5. אפקט אקורדיון.

אפקט אקורדיון
אפקט אקורדיון

לחיצה על התפריט פותחת את הטקסט או את התת-תפריט.

סיכום

ללא ספק CSS3 מאפשר שימוש בהרבה מאוד פונקציות חדשות ללא צורך בידע וניסיון עבודה על JS. יותר מזה, CSS3 לחלותין מבטלת את צורך ב Flash.

החיסרון היחידי שמצאתי בקודים האלה שהם למעשה משתמשים בAncors של HTML (#). זה גורם לבעיית שימושיות באתרים. כל פעם שאני לוחץ על “חזרה” בדפדפן (כדי לחזור לדף קודם) אני חוזר למעשה לאותם Ancors.

לדוגמא: בLightBox לחיצה על התמונה מעבירה ל #pic וכדי לסגור אותה #close וכך כל התמונות. נוצר מצב שגולש יכול לעבור לדך אחר רק ע”י לחיצה באחד התפריטים ולא ע”י חזרה אחורה.

 

*מקור התמונות codrops

8 תגובות

  1. למה כל התמונות בדף הזה לא עובדות – ואיך בדיוק נכנסים לכל המדריכים האלו….

  2. מעולה ותודה רבה, אך לא ממש מצאתי במדריך הראשון בכתובת הזו מדריך לתכנות המודולים – מצד שני הורדתי והתחלתי לבחון בפיירבאג את ה CSS וראיתי את חלק מהתכונות היפות שהם השתמשו בהם.
    ועלו לי רק שתי שאלות – האם אפשר להגדיר דרך ה CSS פונקציה כמו onclick כי נראה לי שלא ואז לפי מה שנראה לי את העברת התמונות הם בכלל עשו ב JS לא?

    1. לדעתי דרך CSS אתה לא יכול להגדיר פונקציה onclick. אולי pseudo-class הזה “:target” יכול להחליף את הפונקציה, אבל זה עדיין בעייתי בגלל התאמות הדפדפנים.
      תראה את הוידאו הזה: http://www.youtube.com/watch?v=vqE1MZ0UlaM
      לגבי המודולים ו JS, לדעתי היה שם איזשהו סקריפט שאחראי על לחיצה “next” כדי להעביר בצורה ידנית את התמונות.

הפוסט סגור לתגובות