26 בספט׳ 2012

הכל על פסאודו Pseudo Class\Element ב CSS

All types of pseudo class and elements

פסאודו class/elemets בcss


הקדמה


כולם מכירים פסאודו class/elemets בcss, גם אם אתם לא מכירים את המונח, סביר להניח שהשתמשתם בו גם בלי להבין.
פסאודו class המוכר ביותר הוא hover, כן התוספת שבאה אחרי class רגיל עם נקודתיים, ה hover מייצג את הstyles שיתרחשו במידה ונעבור מעל אלמנט מסוים במעבר עכבר.
דוגמא:
a{color:red;}
a:hover{color:green;}
מה שיקרה, תגיות ה a יהיו בצבע אדום, ובמעבר עכבר צבע הטקסט שלהם יהפוך לירוק.

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

22 בספט׳ 2012

snippet - איך מסירים את כל attributes של האיפוס בטבלה (table) בCSS

בטח נתקלתם בבעיה שכל פעם שאתם משתמשים בטבלאות ב HTML , אתם צריכים לאתחל/לאפס את שלושת ה attributes של הטבלה, מדובר ב  cellspacing,  cellpadding,  border.

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

20 בספט׳ 2012

העמסות ב CSS3, כל כך פשוט ואף אחד לא מכיר!

CSS3 Overloads

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

כיצד כותבים העמסות בCSS3 ? 

בוא נייצר div אלמנט עם class בשם  box, ניתן לו כמה style שיתנו לו נפח, ולאלמנט ניתן תמונת רקע.

חדשות: גוגל תפסיק לתמוך באקספלורר 8

זה בהחלט חדשות טובות למפתחי ה web. דבר שיאיץ במשתמשים לעבור לדפדפנים עדכניים.
ויאפשר להשתמש בטכנולוגיות חדשות ועדכניות יותר כגון HTML5 ו CSS3.

לכתבה ב Walla - גוגל תפסיק לתמוך באינטרנט אקספלורר 8







12 בספט׳ 2012

ספריית modernizr - יצירת סביבת עבודה עם CSS3 ו HTML5


Modernizr - javascript library to work with HTML5 & CSS3
Modernizr היא ספריייה javascript.
תפקיד הספרייה לזהות זמינות של פיצרים טכנולוגים מתקדמים, כלומר תכונות שנגזרות מן HTML5 ו CSS3. רבים ממאפיינים אלה כבר מיושמים בדפדפן עיקרי אחד לפחות (רובם בשתיים או יותר).

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

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

10 בספט׳ 2012

ולידציות בטפסים ב HTML5, בשילוב עם CSS3

HTML5 Validation - using CSS3 pseudo classes
עם הגעת HTML5,וCSS3, נוספו לנו פקדים חדשים, שעושים לנו את החיים קלים יותר כמפתחים.
בעזרת CSS3 מאפשרים לנו לייצר ולידציות ללא צורך ב JS, מה שעושה את הכתיבה הרבה יותר פשוטה ולא מסורבלת.

ה tutorial הזה יראה חלק קטן מהיכולות הגלומות  בפקדים החדשים של HTML5 עם השילוב של CSS3.

לא יצוינו כאן כל הפקדים החדשים שקיימים ב HTML5, וכל האפשריות הקיימות.

אז בואו נתחיל!

6 בספט׳ 2012

אנימציות ב CSS3

CSS3 Animations

אנימציות ב-100% CSS3

לפני שנתחיל חשוב לציין! - אנימציות ב CSS לא עובדות עד גרסה אקספלורר 9 כולל(רק מגרסה 10 העתידית לצאת בקרוב), ובכל שאר הדפדפנים יש להוסיף לפני קוד הstyle , את ה prefix של הדפדפן. לדוגמא:
דוגמא 1:

@keyframes mymove{}
@-moz-keyframes mymove /* Firefox */{}
@-webkit-keyframes mymove /* Safari and Chrome */{}
@-o-keyframes mymove /* Opera */{}
 דוגמא 2:
animation-name:mymove;
-moz-animation-name:mymove; /* Firefox */
-webkit-animation-name:mymove; /* Safari and Chrome */
-o-animation-name:mymove; /* Opera */

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

החוקים של יצירת אנימציה מאוד פשוטים.
  1. יש לנו אלמנט עליו נפעיל את האנימציה. 
  2. את האנימציה עצמה שנקרא לה מתוך האלמנט.