‫שלום‬ ‫אני ליאורה זכאי‬ ‫מרצה במנטור צפון‬ ‫בעלת חברה לבניית אתרים מזה ‪ 12‬שנים‬ ‫ומלמדת את התחום ב ‪ 10‬שנים האחרונות‬ ‫בהרצאה הזו אביא לפניכם את עיקרי הדברים ב ‪ html5‬ו ‪ css3‬בחלק המעשי הפרקטי ואוסיף ה מ ו ן‬ ‫קישורים בהם תוכלו להיעזר בהמשך עבודתכם‪.‬‬ ‫גם המצגת וגם קובץ קישורים יהיה זמין עבורכם בתום ההרצאה באתר של מנטור‬ ‫על מה מדובר?‬ ‫‪ html 5‬היא הגרסה האחרונה של שפת ה ‪ Hypertext Markup Language‬בה נלמדו והופקו לקחים מהנעשה‬ ‫ברשת עד כה‪ .‬ו ‪ css3‬מתבלת אותו בכל היכולות המרהיבות עליהן טרחנו מידי עד כה‪.‬‬ ‫למשל‪....‬‬ ‫עד כה הקוד ממנו בנוי האתר היה מתובל בהוראות עיצוביות כמו בתגי השפה ובתוכן עצמו‪ .‬שלושה אלמנטים‬ ‫מעורבבים זה בזה שהקשו מאוד על הנגישות לעיקר‪.‬‬ ‫קוראי המסכים קראו גם פקודות עיצוביות חסרות משמעות לצופה‪,‬‬ ‫שימוש בתמונות להצגת אפקטים מיוחדים היה כבד ונטען לאט מידי‪.‬‬ ‫מנועי החיפוש התקשו למצוא את העיקר בתוכן על פי חשיבותו בכדי למקמו נכון בתוצאות‪.‬‬ ‫שינויים ועדכונים דרשו עבודה מרובה ומיותרת‪.‬‬ ‫המסקנה העיקרית לתקן החדש הייתה ‪ -‬הפרדת עיצוב מתוכן במטרה‪:‬‬ ‫לתת חלוקה סמנטית בעלת משמעות לכל חלק תוכני‪.‬‬ ‫לתת קובץ מורה אחד לעיצוב כולו )לכל האתר(‬ ‫הקלה על המשתמש המוגבל בהבנת התוכן‬ ‫ומכאן הקלה על המנועים להבין את נושא האתר על היררכית החשיבות בתוכן‪.‬‬ ‫‪HTML5 + CSS3‬‬ ‫‪ html‬נולד ב ‪1991‬‬ ‫הארגון הקובע את תקן הקוד הוא‬ ‫‪http://dev.w3.org/html5/html-author/‬‬ ‫‪ Html5‬התחיל ב ‪- 2009‬‬ ‫צפוי להסתיים ב ‪ 2014‬ולאחר יהיה זמן הרצה עד ‪2022‬‬ ‫אז על מה הבזז ???‬ ‫תגים חדשים‪...‬‬ ‫השוני הייחודי ל‪ html5‬הוא שהקוד ‪ -‬התגים החדשים ‪ -‬מתארים את התוכן‪.‬‬ ‫"סמנטיקה" קוראים לזה‪.‬‬ ‫לדוגמה ‪ -‬הנה חלק מרשימת התגים חדשים המתארים במדויק את מהות התוכן‪ :‬עפ"י איגוד האינטרנט הישראלי‬ ‫>‪<header‬‬ ‫○‬ ‫אלמנט ה‪ header -‬מכיל מידע מקדים אודות מדור או דף‪ .‬זה יכול להכיל כל דבר החל מכותרות המסמכים הרגילות שלנו )נתוני מיתוג( וכלה בתוכן עניינים שלם‬ ‫>‪<nav‬‬ ‫○‬ ‫אלמנט ה‪ nav -‬שמור עבור מדור במסמך אשר מכיל קישורים לדפים אחרים או קישורים למדורים אחרים באותו דף‪ .‬לא כל קבוצות הקישורים חייבות להיות מוכלות בתוך ה ‪nav‬‬ ‫אלא רק הניווט הראשי‬ ‫>‪<section‬‬ ‫○‬ ‫אלמנט זה מייצג מדור כללי במסמך או ביישום‪ .‬זה מתנהג בצורה דומה ל >‪ <div‬על ידי הפרדת קטע ממסמך‪.‬‬ ‫>‪<article‬‬ ‫○‬ ‫אלמנט ה‪ article -‬מייצג קטע מדף אשר יכול להיות עצמאי כגון‪ :‬כתבה בבלוג‪ ,‬רשומה בפורום‪ ,‬תגובות שנשלחו על ידי המשתמש או כל פריט תוכן עצמאי‪.‬‬ ‫>‪<aside‬‬ ‫○‬ ‫‪ aside‬מייצג תוכן הקשור לחלק הראשי של המסמך‪ .‬בדרך כלל זה מתבטא בפאנל צדדי אשר מכיל אלמנטים כגון כתבות קשורות‪ ,‬ענני תגיות וכולי‪ .‬ניתן גם להשתמש בהם עבור‬ ‫ציטוטי מפתח‬ ‫>‪<footer‬‬ ‫○‬ ‫אלמנט ה‪ footer -‬מיועד לסימון התחתית לא רק של הדף הנוכחי אלא גם של כל מדור המוכל בדף‪ .‬כך‪ ,‬סביר מאוד שתשתמשו באלמנט >‪ <footer‬מספר פעמים באותו הדף‪.‬‬ ‫●‬ ‫●‬ ‫היתרון בשימוש בתגים אילו הוא בהרכבת מבנה טקסטואלי סמנטי לדף‪ ,‬בו ברור לגמרי מה‬ ‫חשיבותו של כל חלק בדף‪ ,‬מבלי לערבב בתוכן פקודות עיצוב‪.‬‬ ‫במקביל יש רשימת תגים שירדה מהתקן ויש צורך להתרגל לעבוד בלעדיהם‪) .‬יש להתעדכן באתר ‪http:‬‬ ‫‪( ///dev.w3.org/html5/html-author‬‬ ‫עוד מקורות ללימוד תגים חדשים‬ : ‫ תגים חדשים שחשוב לדעת‬10 http://www.techrepublic.com/blog/10things/10-new-html5-tags-you-need-to-know-about/3219 1. <video> and <audio> 2. <input> type attributes 3. <canvas> 4. <header> and <footer> 5. <article> and <section> 6. <output> 7. <details> 8. <figure> and <figcaption> 9. <progress>and <meter> ‫תגים שיעלמו או שונו מהתקן‬ http://dev.w3.org/html5/html4-differences/#changed-attributes 10. <datalist> ‫בדיקה לקוד ‪ -‬חשוב שיהיה נכון‬ ‫לבדיקת איכות כתיבת הקוד ניתן תמיד לגשת ל"ולידטור"‬ ‫‪http://validator.w3.org/‬‬ ‫הבדיקה יכולה להיעשות לפי כתובת‪ ,‬קובץ ניטען או טקסט מוקלד‬ -‫ לדוגמה‬- ‫שינויים במסמך‬ ‫הכרזת המסמך‬ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <!DOCTYPE html> ‫הכרזת השפה‬ <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="he"> ‫וכיצד נישתמש בתגים החדשים? לעומת מה שהיה‪:‬‬ ‫‪ - 2‬תפריט מוגדר כתפריט‬ ‫מה שהיה‪:‬‬ ‫>"‪<div id="navigation‬‬ ‫>‪<ul‬‬ ‫>‪<li>Home</li‬‬ ‫>‪<li>About/li‬‬ ‫>‪<li>Work</li‬‬ ‫>‪<li>Shop</li‬‬ ‫>‪<li>Contact</li‬‬ ‫>‪</ul‬‬ ‫>‪</div‬‬ ‫‪ 1‬די לשימוש סתמי בדיבים‬‫עד כה היינו כותבים‪:‬‬ ‫>‪</h1></div‬אני כותרת חשובה מאוד>‪<div id="header"> <h1‬‬ ‫וכעת‪:‬‬ ‫>‪<header‬‬ ‫>‪!</h1‬אני כותרת חשובה מאוד>‪<h1‬‬ ‫>‪</header‬‬ ‫וכעת‪:‬‬ ‫>‪<nav‬‬ ‫>‪<ul‬‬ ‫>‪<li>Home</li‬‬ ‫>‪<li>About/li‬‬ ‫>‪<li>Work</li‬‬ ‫>‪<li>Shop</li‬‬ ‫>‪<li>Contact</li‬‬ ‫ומשמעות סמנטית‬ ‫לזיהוי התג‪:‬‬ ‫>‪</ul‬‬ ‫>‪</nav‬‬ ‫>"‪<section id="family‬‬ ‫>‪<header‬‬ ‫>‪</h1‬משפחת כותרות חשובה במיוחד>‪<h1‬‬ ‫>‪</header‬‬ ‫>‪</section‬‬ ‫החלוקה לקטעי תוכן ‪ - section -‬מאפשרת לתת לכל קטע תוכני כותרת‬ ‫חשובה משלו‪ ,‬תוכן וסיכום )‪. (footer‬‬ ‫מאמר כקטע תוכני העומד בפני עצמו‬ ‫* מאמר צריך להיות מסוגל לעמוד בפני עצמו‪ ,‬הוא יכול לכלול בתוכו כותרת‪ ,‬תוכן ופוטר משלו‪.‬‬ ‫>‪<section‬‬ ‫>‪<header‬‬ ‫>‪</h1‬כותרת חשובה ראשית>‪<h1‬‬ ‫>‪</header‬‬ ‫>‪<article‬‬ ‫>‪<header‬‬ ‫>‪</h1‬כותרת חשובה למאמר>‪<h1‬‬ ‫>‪</header‬‬ ‫>‪</p‬פיסקת תוכן למאמר>‪<p‬‬ ‫>‪</article‬‬ ‫>‪</section‬‬ ‫>‪<article‬‬ ‫>‪<header‬‬ ‫>‪</h1‬כותרת חשובה ראשית>‪<h1‬‬ ‫>‪</header‬‬ ‫>‪</p‬תוכן המאמר>‪<p‬‬ ‫>‪<aside‬‬ ‫>‪</p‬חלק תוכני ניפרג אך קשור למאמר>‪<p‬‬ ‫>‪</aside‬‬ ‫>‪</article‬‬ ‫מה שהיה‪:‬‬ ‫>"‪<div id="news‬‬ ‫>‪</h2‬חדשות כותרת ראשית>‪<h2‬‬ ‫>‪</h3‬חדשות כותרת משנית>‪<h3‬‬ ‫>‪.</p‬פיסקת סיפור החדשות>‪<p‬‬ ‫>‪</div‬‬ ‫וכעת‪:‬‬ ‫>‪<section‬‬ ‫>‪<header‬‬ ‫>‪</h1‬חדשות כותרת ראשית>‪<h1‬‬ ‫>‪</header‬‬ ‫>‪</h2‬חדשות כותרת משנית>‪<h2‬‬ ‫>‪</p‬פיסקת סיפור החדשות>‪<p‬‬ ‫>‪</section‬‬ ‫סיכום ‪ footer -‬לעמוד או למאמר‬ ‫>"‪<div id="footer‬‬ ‫>‪</h3‬כותרת שלישית בחשיבותה>‪<h3‬‬ ‫>‪</p‬פיסקת תוכן לפוטר>‪<p‬‬ ‫>‪</div‬‬ ‫‪ footer‬יהיה פוטר כתג ולא דיב שניקרא פוטר‬ ‫>‪<footer‬‬ ‫>‪</h3‬כותרת שלישית בחשיבותה>‪<h3‬‬ ‫>‪.</p‬פיסקת תוכן לפוטר>‪<p‬‬ ‫>‪</footer‬‬ ‫‪ section‬יכלול כותרת תוכן ופוטר משל עצמו‪.‬‬ ‫סמנטית יש פה שינוי עצום ממה שהיה‪.‬‬ ‫>‪<section‬‬ ‫>‪<header‬‬ ‫>‪</h1‬כותרת ראשית>‪<h1‬‬ ‫>‪</header‬‬ ‫>‪........</p‬פסקת תוכן>‪<p‬‬ ‫>‪<footer‬‬ ‫>‪</p‬סיכום לקטע התוכן הזה>‪<p‬‬ ‫>‪</footer‬‬ ‫>‪</section‬‬ ‫תגי טופס חדשים‬ <style> [required] { border-color: #88a; -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5); } :invalid { border-color: #e88; -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8); } </style> <input type="text" required /> <input type="email" value="[email protected]" /> <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/> <input type="range" min="0" max="50" value="10" /> <input type="search" results="10" placeholder="Search..." /> <input type="tel" placeholder="(555) 555-5555" pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$" /> <input type="color" placeholder="e.g. #bbbbbb" /> <input type="number" step="1" min="-5" max="10" value="0" /> ‫נראה ככה‬ ‫תצוגה כפי שניראת בדפדפן כרום‬ ‫‪Version 23.0.1271.64‬‬ ‫דוגמה לקוד סמנטי נכון בגוף הדף‬ <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subtitle</h2> </hgroup> </header> <nav> <ul> Navigation... </ul> </nav> <section> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> </section> <aside> Top links... </aside> <figure> <img src="..."/> <figcaption>Chart 1.1</figcaption> </figure> <footer> Copyright © <time datetime="2010-11-08">2010</time>. </footer> </body> - ‫לסיכום‬ ?‫איפה אפשר להתעדכן‬ http://dev.w3.org/html5/html-author/ http://www.isoc.org.il/magazine/magazine9_2.html http://html5doctor.com/ ‫ומה עוד השתנה או התווסף?‬ ‫●‬ ‫●‬ ‫עקרון הפרדת העיצוב מהתוכן מקבל כעת משקל כבד וחשוב‪ .‬ל‪ html5‬מצטרף ‪ css3‬המאפשר‬ ‫לשפה המשודרגת לעשות דברים שקודם היו דורשים התערבות שפות וטכניקות מורכבות‪.‬‬ ‫‪: http://www.isoc.org.il/magazine/magazine9_2.html‬על ממשקי הפיתוח המרשימים ביותר נמנים‬ ‫●‬ ‫●‬ ‫גרור ושחרר ) ‪(drag & drop‬‬ ‫ה‪ API -‬של "גרור ושחרר" מגדיר מערכת גרירה ושחרור המבוססת על אירועים‪ .‬אך חסרה ההגדרה מהו "גרור ושחרר"‪ .‬ה‪ API -‬דורש‬ ‫‪ JavaScript‬על מנת לאפשר פונקציונאליות מלאה של גרירה ושחרור‪.‬‬ ‫וידאו ואודיו‬ ‫ממשקי פיתוח היישומים של וידאו ואודיו מהווים שדרוג עצום בתחום הטמעת המדיה‪ .‬למרות שהתמיכה כרגע הינה מוגבלת‪ ,‬פעולת‬ ‫הטמעת וידאו מעולם לא הייתה פשוטה יותר‪:‬‬ ‫>"‪<video width="400" height="360" src="vid.mp4‬‬ ‫‪http://www.html5rocks.com/en/tutorials/video/basics/‬‬ ‫●‬ ‫מיקום גיאוגרפי )‪(Geolocation‬‬ ‫מיקום גיאוגרפי הינו ‪ API‬שימושי מאוד המצוי ב‪HTML5.b -‬ניתן לקבוע בעזרתו מהו המיקום המדויק של המשתמש‪..‬‬ ‫)רמז רמז‪ :‬מכשירים ניידים(‪.‬‬ ‫_‪/http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery‬‬ ‫‪/http://tutorialzine.com/2012/05/weather-forecast-geolocation-jquery‬‬ ‫■‬ ‫‪ http://www.storiesinflight.com/html5/index.html#audio‬קטעי קוד פשוטים להעתקה‬ Video in htnl5 ‫קוד פשוט‬ <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Tag ‫תיאור‬ <video> ‫הגדרת הוידיאו או הסרט ברוחב גובה ושליטה‬ <source> ‫< מקור הסרט‬video> ‫< או‬audio> <track> ‫מגדיר מסלולים בנגן‬ ‫דוגמה מרתקת למה אפשר היום לעשות עם וידיאו‬ (‫ ופיטלרים‬css3 svg ‫)בשילוב‬ http://people.mozilla.com/~prouget/demos/mashup/video.xhtml http://htmlfive.appspot.com/static/video.html http://dev.opera.com/articles/view/custom-html5-videoplayer-with-css3-and-jquery/ Audio in html5 <audio controls="controls"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audioelement/ Tag ‫תיאור‬ <audio> ‫מגדיר תוכן קול‬ <source> <video> and <audio> ‫ כמו‬, ‫מגדיר מקורות הקובץ‬ ‫תמיכת הדפדפנים‬ ‫עדיין אינה מושלמת אך משתפרת כל יום וכיום ניתן להשתמש בצירוף המוצלח‬ ‫של ‪ html5 + css3‬לקבלת אפקטים מרהיבים‪.‬‬ ‫יש כמה וכמה מקומות לבדוק עד כמה נוכל להשתמש באלמנטים חדשים ואיזה דפדפנים יראו‬ ‫את מה שנעשה‪ ..‬נוכל לבדוק מה יראו ואיזה דפדפנים מבחינת תגי ה ‪- html‬‬ ‫‪/http://caniuse.com‬‬ ‫●‬ ‫●‬ ‫ו ‪ - css -‬ויש שם עוד‪...‬‬ ‫ותמיד לזכור‪ ...‬כל יום יש התקדמות‪(:..‬‬ ‫○‬ ‫‪/http://modernizr.com‬‬ ‫כלי נוסף חשוב המאפשר להכריח את‬ ‫הדפדפנים הישנים לתמוך בקוד החדש‬ ‫בעזרת סקריפטים‪.‬‬ ‫ועוד על דפדפנים תומכים ‪css‬‬ ‫יש עוד כמה וכמה מקומות לבדוק עד כמה נוכל להשתמש באלמנטים חדשים ואיזה דפדפנים‬ ‫יראו את מה שנעשה‪ ..‬הנה כמה מהם‪-‬‬ ‫‪ - /http://html5readiness.com‬רק הניחו את העכבר על אחד מהאלמנטים ויופיע כיתוב לגבי מה ההתיחסות‪.‬‬ ‫●‬ ‫●‬ ‫‪- http://fmbip.com/litmus‬‬ Vendor - Prefix - ‫התאמה לקיים‬ ‫לפני שמתחילים‬ .‫התאמה לדפדפנים אינה מושלמת עדיין ולכן יש צורך להשתמש בפקודות התאמה‬ :‫כל דפדפן ייוצג כך‬ ● ● ● ● ● ● Chrome: -webkitFirefox: -mozInternet Explorer: -msiOS: -webkitOpera: -oSafari: -webkit- http://peter.sh/experiments/vendorprefixed-css-property-overview/ http://leaverou.github.com/prefixfree/ ‫וכך תיכתב פקודה לדוגמה‬: -webkit-transition: all 4s ease; - ‫פנייה לכרום‬ -moz-transition: all 4s ease; - ‫פנייה למוזילה פיירפוקס‬ -ms-transition: all 4s ease; - ‫פנייה לאקספלורר‬ -o-transition: all 4s ease; - ‫פנייה לאופרה‬ transition: all 4s ease; - ‫ולא לשכוח את המצג הרגיל בלעדיו לא תיתכן הפעולה‬ CSS3 ?‫אז מה חדש בשדה העיצוב‬ ● Border-Radius ● Transition ● Text-Shadow ● Gradients ● Box-Shadow ● Multiple Backgrounds ● RGBa / HSLa ● Real Fonts -‫פונטים אחרים‬ ● Transform ‫ נוכל היום להשיג רק‬- ‫להרבה ממה שהשתמשנו בעיצוב בתמונות‬ ..‫בקוד‬ (: ‫בואו נראה‬ ‫ רק בקוד‬- ‫פינות עגולות למיכל‬ http://www.cssportal. com/css3-rounded-corner/ CSS3 Rounded Corner enerator <style type="text/css"> .no-round { background-color: #9F0; height: 100px; width: 150px; } .round { background-color: #9C0; height: 100px; width: 150px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } </style> ‫‪tooltips‬‬ ‫זוכרים כמה טרחנו לעצב את אילו??‬ ‫היום הכל בקוד‪...‬‬ ‫איך? גשו לכתובות המצורפות‬ ‫‪http://nicolasgallagher.com/pure-css-speech‬‬‫‪bubbles/demo/‬‬ ‫וקישור להורדת הדוגמה‬ ...‫פינות מקופלות‬ ...‫ והיום‬..‫פעם רק תמונה‬ http://nicolasgallagher.com/pure-css-folded-corner-effect/ .note { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */ } .note.rounded { -webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 5px; } .note.rounded:before { border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; } http://nicolasgallagher.com/pure-css-foldedcorner-effect/demo/ ‫ רק בקוד‬- ‫צל לטקסט‬ p{ text-shadow: 1px -3px 2px #ccc; } X offset Y offset BLUR color http://www.sitepoint.com/mastering-css3-text-shadows/ ‫וכעת לכף עם טקסט‪...‬‬ ‫מה חדש באפשרויות תצוגת הטקסט?‬ ‫●‬ ‫אפשר בקלות יתר לעבוד עם פונטים שונים‪ ,‬קל יותר באנגלית מעברית‪..‬‬ ‫גוגל פונט עשה את הצעד הגדול ‪ http://www.google.com/webfonts -‬והדרך פשוטה‬ ‫במיוחד‪..‬‬ ‫●‬ ‫וצל לטקסט ‪ -‬מה שהיה נעשה עד לא מזמן כתמונה כעת מוצג בטקסט חי‪ -‬עם כל‬ ‫המשמעויות החיוביות של טקסט חי ברשת‪ - .‬זה הכל בקוד ‪ -‬אין תמונה !‬ ‫ רק בקוד‬- ‫צל לטקסט‬ http://www.wordpressthemeshock.com/css-text-shadow/ ‫הכל קוד !‬ ‫אפקטים שאפשר לקבל מקוד הצל ‪ -‬פשוט משחק במאפיינים‬ ‫‪- tp://www.zakai.com/mentor/zman/css-typographic-shadow.html‬‬ ‫דוגמה להורדה לאפקטים של צל‬ ‫קובץ דוגמה‬ ...‫ועוד‬ css ‫ והרבה‬- ‫ עם קצת עזרה מסקריפט‬- http://tympanus.net/Tutorials/TypographyEffects/index.html http://css-tricks.com/examples/3DTextTower/ 3 ‫טקסט‬d ‫ועוד על טקסט‬ ‫ אפילו הלב העוטף את האות‬,(rotate) ‫סיבוב‬,(first-letter) ‫תצוגת אות אחת אחרת מאחרות‬ rborder-radius:25px 0 0 30px) .‫ מוצג רק בקוד‬a /http://nicolasgallagher.com/css-typography-experiment/demo <style> body { padding:0; margin:0; font-family:Times New Roman, serif; background:#000; } p{ position:relative; width:1100px; padding:100px 0 0; margin:0 auto; font-size:175px; font-weight:bold; line-height:1.2; letter-spacing:-13px; color:#0caac7; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg); } /* "i" */ p:first-letter { float:left; margin:-137px -20px 0 0; font-size:880px; line-height:595px; text-transform:lowercase; } /* "love" */ p:first-line { font-size:200px; } /* "typography" */ p strong { display:block; margin:-80px 0 0; font-weight:normal; letter-spacing:-2px; text-transform:capitalize; } ‫ צל פשוט לקופסא‬- div ‫צל חיצוני פשוט‬ .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } ‫צל פנימי‬ .shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; } ‫ מתן ערך שלילי‬- ‫לצלע אחת‬ .one-edge-shadow { -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; } http://css-tricks.com/snippets/css/css-box-shadow/ http://css3generator.com/ - ‫גנרטור כללי לסטייל‬ :‫הערכים‬ ‫ אופקי‬.1 ‫ אנכי‬.2 ‫ טשטוש‬.3 ‫ פיזור‬.4 ‫ צבע‬.5 ‫תצוגה אלגנטית ללא תמונה כלל‬ http://www.ballyhooblog.com/realistic-css3-box-shadows/ http://css.flepstudio. org/en/css3/box-shadow.html rgba = r g b + Alfa http://www.wordpressthemeshock.com/css-dropshadow/ generator ‫ריבוי מסגרות‬ ‫‪http://www.sitepoint.com/css3-multiple-borders/‬‬ ‫השיטה בהוספת הגדרות מסגרת היא בשורות מופרדות בפסיק כשרק באחרונה יש סגירת‬ ‫פקודה בנקודה פסיק‪:‬‬ ‫‪1.‬‬ ‫‪box-shadow:‬‬ ‫‪2.‬‬ ‫‪0 0 0 2px #000,‬‬ ‫‪3.‬‬ ‫‪0 0 0 3px #999,‬‬ ‫‪4.‬‬ ‫‪0 0 0 9px #fa0,‬‬ ‫‪5.‬‬ ‫‪0 0 0 10px #666,‬‬ ‫‪6.‬‬ ‫‪0 0 0 16px #fd0,‬‬ ‫‪7.‬‬ ‫;‪0 0 0 18px #000‬‬ ‫שקיפות‬ color: rgba(255, 0, 0, 0.81); background: rgba(0, 0, 255, 0.51); ‫ הרבה רקעים‬- ‫דף אחד‬ <style type="text/css"> .div { height: 1000px; width: 1000px; background: url(images//intro-bg.png) 0px top repeat-x, url(images/bg.png) 0 center repeat ; margin-right: auto; margin-left: auto; } #logo { background-size: ; height: 200px; width: 200px; background-image: url(images/logo.jpg); background-repeat: no-repeat; background-position: center center; } </style> ‫קובץ דוגמה‬ ‫ הרבה רקעים‬- ‫דף אחד‬ <style type="text/css"> /*‫הסבר‬ background: url(images/decoration.png) 600px 10px no-repeat, /* On top, url(thingy.png) 10px 10px no-repeat, like z-index: 3; url(images/old_paper.jpg); */ like z-index: 4; #exampleA { width: 700px; height: 550px; background: url(images/decoration.png) left top no-repeat, url(images/ribben.png) right bottom no-repeat, url(images/old_paper.jpg) left top norepeat; } ‫הפרדה בפסיק‬ </style> </head> <body> <div id="exampleA"> <p>Example A</p> <p> </p> <p> </p> <p> </p> <p>‫<אפשר להמשיך ולכתוב כי הכל רקע‬/p> </div> </body> ‫קובץ דוגמה‬ ‫רקע מותאם לגודל‬ ‫תמונה יכולה להימתח על כל הדיב העוטף אותה בפקודה‬ ‫בלבד‪ ,‬כמובן רצוי שתהיה זו תמונה שראויה להימתח ‪(:.‬‬ ‫{ ‪#logo‬‬ ‫; ‪background-size: 100%‬‬ ‫‪background-image: url(images/logo.‬‬ ‫;)‪jpg‬‬ ‫;‪background-repeat: no-repeat‬‬ ‫;‪background-position: center center‬‬ ‫}‬ ‫בעבודה‬ ‫קובץ דוגמה‬ Gradiant - ‫ הבסיס‬- ‫גרדינאנט‬ ....‫גרדיאנט יכול להיות פשוט מעבר מצבע לצבע‬ background: -webkit-gradient( linear, 0 0, 100% 100%, from(white), to(black) ); background: -moz-linear-gradient( top left, white, black ); ‫ואפשר להוסיף כמה צבעים שנירצה‬ background: -webkit-gradient( linear, 0 50%, 0 100%, from(white), color-stop(0.5, yellow), to(red) ); background: -moz-linear-gradient( top, white 50%, yellow, red ); ‫ואפילו ליצור דוגמה‬ background: -webkit-repeating-linear-gradient(-45deg, white 0, lightblue 10%); background: -moz-repeating-linear-gradient(-45deg, white 0, lightblue 10%); background: -o-repeating-linear-gradient(-45deg, white 0, lightblue 10%); ‫מקורות לדוגמאות‬ ‫יוצר גרדיאנט ועוד‬... http://css3please.com/ http://www.the-art-of-web.com/css/linear-gradients/ http://www.the-art-of-web.com/css/radial-gradients/ Gradiant - ‫ הבסיס‬- ‫גרדינאנט‬ :‫ וכתיבה לסוגי הדפדפנים שונה ותראה תראה כך‬- ‫חשוב לדעת בגרדיאנט‬ background: -webkit-gradient( linear, <point1>, <point2>, from(<color>), to(<color>) ); background: -moz-linear-gradient( <point>, <color>, <color> ); background: -o-linear-gradient( <point>, <color>, <color> ); ..‫יש גנרטורים או דוגמאות שיתנו לכם את הקוד‬ /http://css3please.com http://gradients.glrzad.com/ - ‫יוצר גרדיאנט‬ http://www.css3.me/ - ‫גרדיאנט ושקיפות‬,‫יוצר רדיוס צל‬ http://www.netmagazine.com/tutorials/master-css-gradients http://www.css3maker.com/ - ‫גנרטור כללי לסטייל‬ ‫גרדיאנט מורכב כרקע‬ ‫ויכול היום להיות ממש דוגמה מצודדת לעין‬..:) http://lea.verou.me/css3patterns/ ‫ )כמובן לדפדפנים תואמים‬:‫)למשל‬ ‫הרבה שורות קוד לגרדיאנט‬ ‫המפריד ביניהן פסיק‬ background: ; ‫לשורה הסופית‬ linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px, linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px), linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px, #92baac 158px); background-color:#e1ebbd; background-size: 128px 128px; http://lea.verou.me/css3patterns/ ‫באתר כל לחיצה על דוגמה פותחת את הקוד‬ .‫להעתקה ושימוש חופשי‬ ...‫רשימות כבר לא משעממות‬ css3 ‫ רק בעזרת שימוש בקוד‬..‫כעת אפשר להציג רשימות בצורה מושכת יותר‬ http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/ ‫דוגמה חיה‬ h2.number { position: relative; top: 0px; left: 0px; font-size: 10em; color: #ccc; float: left; margin-right: 10px } #page-wrap { width: 760px; background: white; margin: 0 auto; padding: 10px 0px 50px 0px; background: white url(images/gradient2-bg.gif) bottom repeatx; } #description-area { padding: 20px; } .comment-box { margin: 0px 0px 50px 50px; padding: 20px; width: 240px; border: 1px solid black; float: left; } ‫תנועה במעברים‬ ‫שינוי לאורך זמן‬ Transition <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer.</p> <div></div> <p>Hover over the div element above, to see the transition effect.</p> </body> </html> ‫קובץ דוגמה‬ http://css3.bradshawenterprises.com/transitions/ Transform - ‫שינוי תכונה‬ <style type="text/css"> #tr-example { -webkit-transform: rotateZ(5deg); -webkit-transition: -webkit-transform 2s ease-in-out; -moz-transform: rotateZ(5deg); -webkit-transition: -webkit-transform 2s ease-in-out; background-color: #9CF; height: 150px; width: 800px; margin-right: auto; margin-left: auto; margin-top: 100px; } #tr-example:hover { -webkit-transform: rotateZ(-5deg); -moz-transform: rotateZ(-5deg); } </style> </head> <body> <div id="tr-example">Content for id "tr-example" Goes Here</div> </body> ‫קובץ דוגמה‬ ‫וקצת שעשוע‪ ...‬שמש זורחת‬ ‫יום בהיר והשמש זורחת‪ ...‬הכל בקוד‪ ..‬הפוטר דבוק לרצפה והשמש מסתובבת בחום‪..‬‬ ‫‪http://zakai.com/mentor/zman/sticky-footer.html‬‬ ‫קובץ דוגמה‬ ‫כפתורים‬ ‫מה קורה במעבר עכבר ובלחיצה‬ ‫ אז הנה כמה פתרונות חמודים קלים וחינמיים‬..‫כפתורים היו תמיד אתגר עיצובי‬ Demo-http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html Download - http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/ ‫במעבר עכבר‬ Demo+download - http://joshuasortino.com/projects/css-colored-buttons/# ‫בזמן לחיצה‬ ‫כפתורים‬ ‫מה קורה במעבר עכבר ובלחיצה‬ Demo - http://tympanus.net/Tutorials/AnimatedButtons/index.html Download - http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/ -‫וקישורים שווים להתרשמות‬ http://smashinghub.com/css3-animated-button-and-menu-tutorials.htm - 25 CSS3 Animated Button and Menu Tutorials http://css-tricks.com/examples/ButtonMaker/ ‫ בלחיצה על הכפתור שנוצר‬-‫יוצר כפתורים וקוד‬ http://css3button.net/ - ‫יוצר כפתורים וקוד‬ ‫ודוגמה הורסת‪(: ...‬‬ ‫‪http://lab.simurai.com/monster/‬‬ ‫ודוגמה פשוטה להמחשה‬ ‫עוד נוכל לסובב להגדיל ולעוות‬ ‫והנה כלי שווה לעבודה‬- http://css3generator.com/ ..‫ מעתיקים ודביקים קוד‬,‫מכוונים‬ moz-transform: scale(1.2) rotate(35deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1.2) rotate(35deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg); -o-transform: scale(1.2) rotate(35deg) translateX (1px) translateY(1px) skewX(0deg) skewY(0deg); -ms-transform: scale(1.2) rotate(35deg) translateX (1px) translateY(1px) skewX(0deg) skewY(0deg); transform: scale(1.2) rotate(35deg) translateX (1px) translateY(1px) skewX(0deg) skewY(0deg); ‫ לכוון את הצופה‬- targate ‫למיקום שנרצה‬ http://designshack.net/tutorialexamples/csstarget/target-ex1.html#one http://css-tricks.com/examples/Target/ ‫תצוגת תמונות‬ http://www.css3templates.co.uk/templates/CSS3_B&W/index.html http://www.css3templates.co.uk/templates/CSS3_photo_dark/examples.html ‫עוד דוגמאות למצבי מעבר עכבר‬ http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial. html - ‫קוד‬ ‫ודוגמה‬- http://freshdesignweb.com/demo/2012/09/css3-hover-effects-tutorial/ ‫עיצוב תצוגה לאתר‬ http://demo.html5xcss3.com/html5themes/egrappler/neoarts/ - ‫התאמה למדיות שונות‬ mediaqueri http://mediaqueri.es/ transform ‫שימוש יפה בהחלפה‬ http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html ‫עיצוב יפה ושימושי לטפסים‬ ‫ דוגמה‬- http://freshdesignweb.com/demo/2012/09/html5-registration-form/ ‫ הסבר וקוד‬- http://www.freshdesignweb.com/beautiful-registration-form-withhtml5-and-css3.html ‫תלת מימד‬ http://www.3dcsstext.com/ ‫הרשימה באתר מנטור‬ Html5 http://dev.w3.org/html5/html-author/ http://dev.w3.org/html5/html-author http://www.techrepublic.com/blog/10things/10-new-html5-tags-you-need-to-know-about/3219 http://validator.w3.org/ http://dev.w3.org/html5/html-autho http://www.isoc.org.il/magazine/magazine9_2.html http://html5doctor.com/ http://orderedlist.com/resources/html-css/structural-tags-in-html5/ http://www.html5rocks.com/en/tutorials/video/basics/ http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/ http://tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/ http://www.storiesinflight.com/html5/index.html#audio http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/ http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audio-element/ http://caniuse.com/ http://modernizr.com/ http://html5readiness.com http://fmbip.com/litmus http://peter.sh/experiments/vendor-prefixed-css-property-overview http://leaverou.github.com/prefixfree/ ‫קישורים‬ Gradient !!! - http://lea.verou.me/css3patterns/ list - http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/ Transition - http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/ Transform - http://css3.bradshawenterprises.com/transforms/ http://lab.simurai.com/monster animation+stiky footer - http://zakai.com/mentor/zman/sticky-footer.html Target - http://designshack.net/tutorialexamples/csstarget/target-ex1.html#one image-show - http://www.css3templates.co.uk/templates/CSS3_B&W/index.html http://demo.html5xcss3.com/demo.php?cat=html5themes&host=egrappler&temp=neoarts http://www.zurb.com/playground/css3-polaroids http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/ Hover - http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial.html http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ opacity - http://www.css3.info/preview/opacity/ Forms - http://www.freshdesignweb.com/beautiful-registration-form-with-html5-and-css3.html http://freshdesignweb.com/demo/2012/09/html5-registration-form/ multiple background - http://www.sitepoint.com/css3-multiple-borders/ ‫מהמם‬... - http://tympanus.net/Tutorials/CSS3RotatingWords/index5.html flip - http://css3playground.com/flip-card.php http://www.freshdesignweb.com/html5-css3-3d-examples-demo.html Css3 Generators ‫ פינות עגולות‬- http://www.cssportal.com/css3-rounded-corner/ tooltips - http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ http://www.wordpressthemeshock.com/css-text-shadow/ sample - http://www.htmldrive.net/items/show/364/Depth-And-Nice-3D-Ribbons-Only-Using-CSS3 http://gradients.glrzad.com/ corners - http://nicolasgallagher.com/pure-css-folded-corner-effect/ http://www.css3.me/ http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/ http://www.css3maker.com/ text shadow - http://www.sitepoint.com/mastering-css3-text-shadows/ http://www.netmagazine.com/tutorials/master-css-gradients google fonts - http://www.google.com/webfonts 3d text - http://www.3dcsstext.com/ text - http://tympanus.net/Tutorials/TypographyEffects/index.html Media queries - http://mediaqueri.es/ Typography - http://nicolasgallagher.com/css-typography-experiment/demo/ http://jquerymobile.com/ box shadow - http://css-tricks.com/snippets/css/css-box-shadow http://www.ballyhooblog.com/realistic-css3-box-shadow more http://www.wordpressthemeshock.com/css-drop-shadow/ http://css.flepstudio.org/en/css3/box-shadow.html http://lab.hakim.se/meny/ http://www.sitepoint.com/mastering-box-shadows/ http://css-tricks.com/downloads/ http://www.htmldrive.net/ http://lesscss.org/ http://webdesignledger.com/tips/html5-css3-take-your-design-to-another-level http://www.freshdesignweb.com/useful-example-css3-style.html http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/ http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/ http://www.onextrapixel.com/2011/08/24/23-creative-uses-of-css3-text-effects-to-enhance-your-web-presence/ ‫עוד דוגמאות למצבי מעבר עכבר‬ http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ http://tympanus.net/Tutorials/OriginalHoverEffects/ ‫עוד תצוגה לתמונות‬ http://www.zurb.com/playground/css3-polaroids ...‫תמונות‬ ‫להצגתן אין סוף אפשרויות‬ http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/ ‫סיבוב ואנימציה יפה‬ http://tympanus.net/Tutorials/CSS3RotatingWords/index5.html ‫>תודה על ההקשבה<‬ ‫>‪</‬‬