» ארכיון הבלוג » עיצוב הקורס של CSS מתקדם Niquelao עיצוב הקורס של CSS מתקדם 8 בנובמבר 2009, מאת Rumoroso לפני כמה ימים הייתי בסרגוסה והעברתי קורס על CSS מתקדם (כלול בקטלוג הקורסים של CTIC ). כמובן, ובמיוחד מכיוון שמדובר בקורס על גיליונות סגנון וטכניקות מתקדמות, הכנתי את המצגת ב-rumoslide (כמו ש-95% מהמשתמשים קוראים לזה, בסוף זה יישאר עם השם הזה). העניין הוא שהאורך של תוכנית הלימודים (או הזמן המצומצם) גרם לי להישאר עם רצון לפרט על כמה פרטים לגבי הסגנונות שהשתמשתי בהם במצגת . בדיוק לשם כך התיישבתי לכתוב את המאמר הזה (ובכן, וגם כדי לחזור להרגל לכתוב באופן תקופתי בבלוג). כמובן, ההתחלה היא ההתחלה, כך שהיום תורו של עמוד השער : מעמוד השער מה שאני רוצה לפרט עליו הוא מה שעשיתי עם הכותרת של המצגת . הרעיון שלי היה להדגיש את שתי המילים ( CSS ו-מתקדם ), לנסות לעשות זאת עם מספיק הדגשה אינדיבידואלית לכל אחת, אבל לדאוג שהן לא יאבדו את החיבור ביניהן. לשם כך, בין היתר, שיחקתי עם הגודל והצבע של הגופנים (גדול ובהיר לעומת קטן וכהה) ועם המיקום שלהן (חפיפה חלקית). קודם כל, קוד ה-HTML שהשתמשתי בו:

CSS מתקדם

ולהלן ה-CSS וההסבר שלו: h1 { font-size: 7em; color: #ffc8a3; line-height: .8; font-style: italic; margin: .5em 0 .2em 20%; border-bottom: 3px solid; position: relative; overflow: hidden; } הרעיון היה לעצב תחילה את האותיות CSS של הכותרת. מכיוון ששאר הטקסט כלול ב- span , ניתן להחיל סגנון גנרי על ה- h1 ואז לאזן את ההשפעה על זה. לכן, הצהרתי על גודל גופן מרשים מספיק (7em), צבע שמתאים כראוי לשאר הסגנונות שבשימוש ושאינו עז מדי, גובה השורה וסגנון האיטלקי. בנוסף החלתי עליו שוליים, תוך התחשבות שרציתי להפריד אותו מהשמאל ב-20% מהרוחב הכולל. לבסוף הוספתי לו קו תחתון של 3px (הצבע עובר בירושה מהטיפוגרפיה). יחד עם הסגנונות האלה, מכיוון שהחפיפה של המילים הושגה באמצעות מיקום מוחלט (אפרט על כך בהמשך), השתמשתי באתחול הקואורדינטות של הצאצאים של הכותרת על ידי מיקומה כיחסית. השליטה על מה שגולש (overflow: hidden) הוספתי בדיעבד (מכיוון שראיתי שהתוצאה יצאה אלגנטית) לאחר עיצוב שאר הכותרת. עם זה מושג שהחלק התחתון של המילה מתקדם מסתיר כשהוא בולט מעבר לגבולות ה- h1 . לאחר מכן עיצבתי את המילה מתקדם : h1 :first-child { font-size: .5em; font-style: normal; color: #222; position: absolute; top: 60%; left: 15%; opacity: 0.75; -moz-opacity: 0.75; -ms-filter: alpha(opacity=75); } כדי להימנע מסימון נוסף שיחקתי עם הסלקטורים. המונח מתקדם נמצא באלמנט הצאצא הראשון של ה- h1 , כך שהבחירה מתבצעת באמצעות הפסאודו-קלאס :first-child . קודם כל, לשנות את מאפייני הגופן (להקטין גודל, לשנות צבע ולהסיר את האיטלקי). את החפיפה עשיתי באמצעות מיקום מוחלט (הקואורדינטות נלקחות ביחס למיקום של ה- h1 לאחר שהצהרתי על מיקום יחסי עבורו). לבסוף נתתי לו נגיעה נוספת על ידי משחק עם האטימות שלו (השתמשתי במאפיינים עם קידומות ספציפיות שמאפשרות שיוצג כראוי בגרסאות העדכניות ביותר של הדפדפנים). ועכשיו השאלה איך השגתי את האפקט של הגרדיאנט הלבן?. התשובה פשוטה ומבוססת על הקוד הבא: h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } ה- span הריק שהוספתי (ושבטח למישהו כבר נשמע מוזר) הוא זה שאחראי על האפקט הזה. למעשה הרעיון פשוט. ניתן להשיג את האפקט על ידי הצבת תמונת png עם גרדיאנט צבע שעובר מלבן לשקוף על הטקסט (הלבן הוא בגלל הרקע של העמוד). לשם כך בחרתי את ה- span באמצעות סלקטור הקשרי (זה ה- span שנמצא אחרי span אחר, כך span + span ), מיקמתי אותו במוחלט ועשיתי שהוא יתפוס 100% מהרוחב והגובה של הכותרת (כשממקמים את ה- span , הוא מתחיל לקבל ממדים). לאחר מכן הוספתי את תמונת הגרדיאנט כרקע מיושר בחלק התחתון (מכיוון שזו תמונה צרה, עשיתי שהיא תחזור על עצמה על ציר ה-x). וזהו… שאר הסגנונות שהוחלו על עמוד השער (כותרת תחתונה ולוגו) נשארים קבועים לאורך השקפים של המצגת. באופן כללי הם די פשוטים, כך שאפרט עליהם במהירות (אולי אפרט כשאזכיר את הסגנונות של מקטעים אחרים במאמרים מאוחרים יותר). אומר שהכותרת התחתונה היא מכולה גנרית שכוללת רשימה (שהסרתי ממנה את התבליטים). הוספתי לה צבע רקע עז הקרוב לכתום CTIC ותמונה (גם היא כרקע) ממוקמת מימין. בנוסף מיקמתי אותה fixed בחלק התחתון של המסך מכיוון שלא רציתי שהיא תזוז עם הגלילה האנכית (זה שימש לי כדוגמה במהלך הקורס). לגבי הלוגו, זהו svg הכלול באלמנט object . מה שעשיתי זה למקם אותו במוחלט שם למעלה ולהשאיר אותו כך לאורך כל המצגת. בקרוב אפרט על כמה דוגמאות נוספות של סגנון שהחלתי לאורך המצגת, כמו למשל, הדרך שבה השגתי את הרקע הדו-צבעי עם האותיות CSS, וכו’. עיצוב הקורס של CSS מתקדם קטגוריה: CSS —> 3 תגובות עיצוב הקורס של CSS מתקדם 8 בנובמבר 2009 […] טקסט מלא ב-Niquelao : עיצוב הקורס של CSS מתקדם […] Niquelao » ארכיון הבלוג » עוד נגיעה של סגנון בקורס של CSS 11 בנובמבר 2009 […] כמו שכבר עשיתי ברשומה הקודמת (עיצוב הקורס של CSS מתקדם), אמשיך לפרט על כמה מהסגנונות שהשתמשתי בהם במצגת של קורס ה-CSS לסרגוסה[…] עוד נגיעה של סגנון בקורס של CSS 12 בנובמבר 2009 […] כמו שכבר עשיתי ברשומה הקודמת (עיצוב הקורס של CSS מתקדם), אמשיך לפרט על כמה מהסגנונות שהשתמשתי בהם במצגת של קורס ה-CSS […] ניתן לעקוב אחר התגובות grâce ל- feed RSS 2.0 . ניתן גם לשלוח trackback מהאתר שלך. מאמר קודם: The best… made with CSS מאמר הבא: עוד נגיעה של סגנון בקורס של CSS —> —> —> יצירה זו נמצאת תחת רישיון Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.