26 באוק׳ 2012

SVG - שימוש בתמונות וקטוריות (vector images) במקום תמונות רגילות

 SVG - Vector Images - CSS3
עם כניסת  ה HTML5 ו CSS3, נוספה האופציה לעבודה עם תמונות וקטוריות. התקן המקובל לשימוש בתמונות וקטוריות בדפדפנים הוא מסוג SVG (פרוש "Scalable Vector Graphics").

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

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

Code demo - Sweet DJ's CSS3 animation

CSS3 Animation Demo
אנימציה חמודה, ששווה הצצה, שמראה יכולות באנימציה ב CSS3.


הדוגמא המלאה של אנימציית DJ's ב CSS3







אקספלורר 10 המבחן

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

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

האקספלורר החדש במבחן- כתבה ב YNET

16 באוק׳ 2012

חדשות: המספרים האמיתיים מאחורי תעשיית האינטרנט והסלולר 2012


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









15 באוק׳ 2012

Code Demo - Scissors Animation in CSS3


* הדוגמא לכרום וספארי, בשביל שהיא תעבוד בשאר הדפדפנים, יש להוסיף את שאר ה prefix
* הדוגמא תעבוד ללא הפסקה באתר אמיתי. פה היא מפסיקה כי היא מתנגשת משום מה עם ה iframe
לדף הדוגמא המלא והמפורט

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

14 באוק׳ 2012

Code Demo - CSS Image Gallery - no JS

* לחצו על התמונות הקטנות של HTML5 ו CSS3 על מנת לראות איך עובד הדפדוף הגלריה.
* יש לעבור בין הטאבים של HTML וה CSS על מנת לראות את הקוד.
לדף הדוגמא המלא והמפורט

לפוטס מפרט של איך להכין גלריית תמונות ב CSS בלבד!

דברים שנתמכים ב CSS מאקספלורר 8 - שלא הכרתם


IE7 new support
אקספלורר 7 איבד ומאבד אחוזי שימוש בשנה האחרונה. וברב האתרים התחיל לרדת מתחת ל 5 אחוזי שימוש מכלל הגולשים, מה שמאפשר לשקול לבטל את התמיכה בו.
(IE = INTERNET EXPLORER)

הנה ריכוז של חלק מהדברים החדשים שנתמכים מאקספלורר 8 ומעלה וכמובן בשאר הדפדפנים האחרים, שכדאי שתכירו.




10 באוק׳ 2012

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

CSS3 animation advanced frames overload keyframes
את הפוסט הזה אני כותב, אחרי שחשבתי שאני כבר מכיר אנימציות ב CSS3 בצורה טובה. רציתי לעשות אנימציה חיה, משהוא יותר בסגנון של פלאש ולא סתם איזה תמונה/ריבוע שזז ממקום למקום בתוך הדף. חשבתי על רעיון לעשות מספריים שעושות את האנימציה של הגזירה, ובנוסף זזות ממקום למקום. החלתטי שאני מתחיל בחלק הראשון של האנימציה, אלה שאז נתקלתי בבעיה הראשונה. וכאן הפוסט שלי נכנס לתמונה.






8 באוק׳ 2012

גלריית תמונות ב CSS בלבד! ע"י שימוש בפסאודו קלאס target

CSS Image Gallery - no JS - by using pseudo class target
כבר די הרבה זמן אני נתקל באפשריות שימוש בפסאודו קלאס מסוג target. הפסאודו הזה מסמן תגית שפונים אליה מתגית A אחרת. ניתן לפנות לכל תגית שיש לה ID. כביכול נראה דבר מאוד פשוט, אך לפסאודו קלאס הזה יש הרבה כח, הוא בעצם מאפשר לך לתת לתגית מסוימת ערך שונה מלאחרים בדף. בחשיבה תכנותית זה כמו משתנה שאני יכול לגשת אליו (מי מסומן), ולהשתמש בו כדי להציג תגית מסוימת אחרת. רק שה"משתנה" פה יהיה ב CSS!
לא מאמינים! אז הנה - דוגמא לגלריית CSS ללא JS

גיריתי אותכם מספיק, אז בואו נתחיל!

7 באוק׳ 2012

עבודה עם Image Sprites (תמונות מאוחדות) ב CSS

יותר ויותר נפוצה באינטרנט גישת ה sprites לשימוש בתמונות ואייקונים, הגישה שאומרת לאחד תמונות לתמונה אחת. היתרונות ברורים, עבודה עם קבצי sprites מקטינה את כמות הבקשות לשרת(http requests), ובמידה מסוימת גם את סה"כ גודל הנתונים, מה שגורם לאתר להיטען מהר יותר, ולהוריד עומסים בשרת. מאידך עבודה עם sprites, מייצרת עוד עבודה בהכנתו, עוד כתיבת קוד CSS מורכב, וברב המקרים גם שימוש בתגיות HTML נוספות, אשר ייצגו לנו את התמונות מה sprites.

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


6 באוק׳ 2012

פסאודו אלמנט before & after והעוצמה שחבויה בהם!

pseudo - before and after
פסאודו אלמנט before & after, קיימים כבר החל מאקספלורר 7, אך נכון להיום מועט בהם מאוד השימוש.
בפיצר הזה של CSS, טמון הרבה מאוד כוח. אני ידגים פה על קצה המזלג חלק מהיכולות המרהיבות שניתן ליישם בעזרת פיצר זה.

במידה ואינכם מכירים/יודעים מהו פסאודו קלאס/Pseudo-classes, אתם מוזמנים לקרוא את המאמר - הכל על פסאודו Pseudo Class\Element ב CSS.

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

2 באוק׳ 2012

תגיות סמנטיות ב HTML5 והדרך הנכונה להשתמש בהן

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

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




1 באוק׳ 2012

snippet - איך לעשות trim לשורה, ב CSS בלבד!

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

יש פתרון CSS נקי שתומך בבעיה!