עיצוב CSS פחות עיצוב תפריט חלקלק סרגל הניווט

מאמר זה הוא חלק שלנו "HTML5 / CSS3 סדרת הדרכות" - ייעודי כדי לעזור לך לעשות מעצב טוב יותר ו / או מפתח. לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה.

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

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

הוא פותח יכולות חדשות בכתיבת תחביר CSS. לדוגמה, על ידי החלת Mixins ב- CSS כמו האופן שבו אנו עושים בתוכנית, אנו יכולים כעת לאחסן סגנונות וערכים ברירת מחדל שניתן להחיל בקובץ כולו בכל עת שניתן. עם זאת, אנחנו לא צריכים לכתוב את הסגנונות אותו שוב ושוב.

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

עיצוב עם LESS

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

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

• LESS הוא יותר: הפוך את CSS קידוד קל יותר עם פחות
• כתוב CSS טוב יותר עם פחות
• מבוא קצר, השוואה סאס

הכנה

קודם כל, יש כמה דברים חיוניים שאנחנו צריכים עבור פרויקט קטן זה, כלומר:

1. LESS עורך טקסט

נצטרך עורך טקסט כדי לקודד את תפריט הניווט. עם זאת, רוב עורכי הטקסט הזמינים בשוק כיום (כגון Dreamweaver, Notepad ++, InType, Sublime Text 2) עדיין לא תומכים .פחות סיומות קבצים כברירת מחדל, כך התחביר לא יכול להיות מסומן היטב.

אז, לצורך הדרכה זו, נשתמש עורך טקסט מיוחד עבור LESS בשם ChrunchApp. אנחנו יכולים לפתוח ולערוך .פחות קבצי הרחבה ו לקמפל אותו לתוך CSS סטטי באמצעות יישום זה. מאז זה יישום Adobe האוויר, זה יכול להיות מותקן בכל מערכת ההפעלה שולחן העבודה העיקריים (Win, OSX ו- Linux).

עבור עורך HTML אתה יכול להשתמש בכל עורך אתה כבר נוח להשתמש כעת. אני אישית כמו טקסט Sublime 2.

2. פחות

לאחר מכן, הורד את LESS JavaScript Library מהאתר הרשמי שלהם, הגרסה הנוכחית היא 1.2.1. מניחים אותו בתוך התיקיה בפועל שלך עבור זה.

לאחר מכן קשר את הקובץ למסמך HTML.

3. ללא קידומת

אנו גם לנצל כמה תכונות CSS3 כדי להשיג כמה אפקטים בתפריט הניווט אשר יכלול קידומות הספק (-moz-, -o-, -WebKit-) כדי שהיא תוצג כראוי בדפדפנים שונים. עם זאת, אני אישית לא מעדיף להשתמש קידומות כמו זה יהיה לנפח את קובץ ה- CSS.

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

הורד את הקובץ וקשר אותו לקובץ HTML.

בסדר, כולנו מוכנים; עכשיו נתחיל לבנות את סימון ה- HTML.

סימון HTML

הניווט הוא פשוט למדי. זה יהיה חמישה תפריטים עטופים בתוך תג רשימה לא מסודרים. פתח את עורך HTML האהוב עליך והוסף את הסימון הבא:

סגנון פחות

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

הבה נבחן את סגנון הניווט ממקור ההשראה שלנו.

כפי שאנו יכולים לראות את המסך לעיל, ניווט Apple.com יש את 6 הסגנונות הנפוצים הבאים:

• צל
• גבול
• מחיצה
• גרדיאנטים
• אפקט ריחוף
• טקסט

אנו נשמור סגנונות אלה ונשמור אותם בפנים config.less כסגנון ברירת המחדל תצורה; כמה מעצבים אולי גם שם זה lib.css זה מייצג ספריה. קשר קובץ זה למסמך שלנו.

הקפד למקם אותו לפני הספריה LESS JavaScript.

הגדרת בסיס צבע עם משתנים

בשלב זה נגדיר את בסיס צבע הניווט באמצעות משתנים. המשתנה ב- LESS הוכרז באמצעות @ סמל.

@theme: # 555;

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

הגדרת סגנון צל ברירת מחדל עם Mixins

אחת התכונות שאני אוהב מ LESS הוא Mixins. זהו רעיון התכנות המאחסן מספר סגנונות מוגדרים מראש, אשר ב- LESS יכולים להיות בירושה בכיתות או במזהים מאוחר יותר בגיליון הסגנונות.

.צל box-shadow: 0 1px 2px 0 @theme; 

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

הגדרת סגנון הגבול עם מיקסים פרמטרית

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

.border (@radius: 3px) border-radius: @radius; border: 1px solid @theme - # 050505; 

בקוד למעלה, הגדרנו את גבול ברירת המחדל @radius ל 3px וכפי שציינו קודם, ניתן לשנות את הערך הזה מאוחר יותר.

הגדר מעבר צבע, מחלף וסגנון מעבר עם פעולה

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

.מחלק border-style: solid; width-width: 0 1px 0 1px; border-color: transparent @theme - # 111 transparent @theme + # 333; 

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

רמת צבע צבע

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

הטון הכהה המרבי הוא # 000 (שחור), בעוד הטון האור המרבי הוא #fff (לבן) בסיס הצבע הנוכחי שלנו הוא # 555. אז, אם אנחנו רוצים את בסיס צבע להיות 3 רמות כהה מן הזרם, אנחנו יכולים פשוט להפחית את זה על ידי # 333. באותו אופן ניתן גם להחיל להבהיר את הצבע.

לאחר מכן, נפעיל את צבע צבע.

.שיפוע background: linear-gradient (top, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect background: linear-gradient (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

הגדרת סגנון טקסט עם

אנו מתכננים להיות 2 צבעים על סרגל הניווט, צבע כהה נ 'ואור אחד. אנו מיישמים שתי הצהרות מותנות על הטקסט באמצעות Mixins גארד.

ראשית, כאשר הטקסט מקבל צבע בעל קלילות שווה או גדול מ 50%, את צל טקסט צריך להחשיך, במקרה זה צבע # 000000.

.textcolor (@txtcolor) כאשר (קלילות (@txtcolor)> 50% =) color: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

לאחר מכן, כאשר הטקסט מקבל צבע כי קלילות פחות מ 50% צל טקסט יהפוך לבן.

.textcolor (@txtcolor) כאשר (קלילות (@txtcolor) 
ייבוא ​​LESS
 
עכשיו בואו ליצור עוד .פחות שם הקובץ style.less וייבוא config.less לתוך זה:
 
@import "config.less";
 
הוסף משפחת גופנים
 
כדי שסרגל הניווט ייראה מושך יותר, נשתמש במשפחת גופנים חדשה @סוג גופן הכלל. למרבה ההפתעה, @סוג גופן הכלל הוא למעשה נתמך כבר מאז IE6!
 
הפעם נשתמש בגופן Asap. הורד אותו מתוך אוסף גופן של גופן סנאי. לאחר מכן, הכנס את הסגנונות הבאים אל הפריטים שנוצרו לאחרונה style.less קובץ.
 
@ font-face font-family: 'AsapRegular'; src: url ('גופנים / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #efix') פורמט ('Embedded-opentype'), URL ('גופנים / Asap-Regular-webfont.woff') פורמט ('woff'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') פורמט ('svg'); משקל גופני: רגיל; font-style: Normal;  
 
עיצוב הגוף עם פונקציות צבע
 
עכשיו, אנחנו נותנים צבע רקע ל הגוף (זה צריך להיות קל יותר מאשר בסיס צבע), כמו גם ציון משפחת הגופנים וגודל הגופן. אנחנו יכולים להתקרב את האפקט באמצעות פונקציות צבע:
 
הקוד הבא יבהיר את הרקע ב -30%.
 
גוף רקע: lighten (@theme, 30%); font-family: AsapRegular, sans-serif; font-size: 11pt; 
 
 
 
עיצוב ניווט עם כלל מקונן
 
ב LESS אנחנו מסוגלים לקנן סגנונות ישירות תחת ההורה שלה. הבה נבחן את הקוד הבא.
 
ה nav תג המכיל את כל האלמנטים הדרושים לניווט יקבלו את הסגנונות הבאים.
 
nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; .גבול; .shadow; 
 
שימו לב לכך, במקום לתת חבורה של כללי CSS שוב, אני רק מוכנס .גבול לתת את סגנון הגבול .צל להוסיף צל. במקרים אמיתיים, סט של שיעורים אלה ניתן לעשות בהם שימוש חוזר גם באלמנט אחר, בכל מקום בו יש צורך.
 
 
 
הבא, אנחנו נותנים סגנונות עבור ul בתוך ה nav יש אפס ריפוד ושוליים. לא כל כך מזמן נגיע לסגנון על ידי כתיבת משהו כזה:
 
nav ... nav ul ...
 
אין שום דבר רע עם גישה זו, למעשה, נהגתי לעשות את זה בכל פעם ואני נוח למדי עם זה. עם זאת, שיטה זו, רבים מעצב CSS אמר, הוא verbosed ובמקרים מסוימים, לא בקלות לניהול.
 
עכשיו, אנחנו יכולים לעשות משהו כזה:
 
nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; .גבול; .shadow; ul ריפוד: 0; שוליים: 0; 
 
 
 
ואז התפריט יוצג בשורה באמצעות הצג: inline נכס.
 
nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; .גבול; .shadow; ul ריפוד: 0; שוליים: 0; li display: inline; 
 
 
 
בתחביר הבא אנו מציינים את סגנון תג העוגן של התפריט ומוסיפים את הסגנונות המוגדרים מראש שלנו, אלה הם: .צבע טקסט, .מחיצה, .שיפוע.
 
nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; .גבול; .shadow; ul ריפוד: 0; שוליים: 0; li display: inline; a text-decoration: none; הצג: inline-block; צף: משמאל; רוחב: 156px; גובה: 45px; text-align: center; גובה גובה: 300%; .textcolor (# f2f2f2); / / אתה יכול לשנות את השורה הזאת. .gradient; 
 
בקוד לעיל אנו מחילים צבע hex # f2f2f2 שבו קלילות נחשב מעל 50%, ולכן היינו מצפים לראות את הצל להיות כהה (באופן אוטומטי). שאר הקוד אני בטוח די מובן מאליו.
 
 
 
עם זאת, אם נבחן את התוצאה הנוכחית לעיל, כל תפריט יש מחיצות ובכך וכתוצאה מכך החלק האחרון גואה לתחתית. אז אנחנו צריכים להשמיט את סגנון הגבול עבור הילד הראשון והאחרון של סרגל הניווט.
 
nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; .גבול; .shadow; ul ריפוד: 0; שוליים: 0; li display: inline; a text-decoration: none; הצג: inline-block; צף: משמאל; רוחב: 156px; גובה: 45px; text-align: center; גובה גובה: 300%; .textcolor (# f2f2f2); / / אתה יכול לשנות את השורה הזאת. .gradient;  li: ילד ראשון a border-left: none;  li: last-child a border-right: none; 
 
 
 
העבר את המדינה
 
עבור השלב האחרון נוסיף את האפקט לרחף. ב LESS אנחנו יכולים להוסיף אלמנט פסאודו כמו : רחף באמצעות & סמל.
 
nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; .גבול; .shadow; ul ריפוד: 0; שוליים: 0; li display: inline; a text-decoration: none; הצג: inline-block; צף: משמאל; רוחב: 156px; גובה: 45px; text-align: center; גובה גובה: 300%; .textcolor (# f2f2f2); / / אתה יכול לשנות את השורה הזאת. .gradient; &: רחף .hovereffect;  li: ילד ראשון a border-left: none;  li: last-child a border-right: none; 
 
 
 
שנה את ערכת הצבע
 
הנה החלק הקריר של LESS. אם ברצוננו לשנות את נושא הצבעים הכולל, נוכל לעשות זאת בשינויים קלים יותר מהצורך ב- CSS טהור.
 
במקרה זה, אני ישנה את צבע הניווט להיות קצת יותר קל. פשוט לשנות את שתי השורות הבאות.
 
@theme: #ccc; //תשנה את זה
 
.textcolor (# 555); //וזה
 
והנה התוצאה.
 
 
 
לקמפל LESS לתוך CSS
 
כאשר אנו עדיין משתמשים ב- LESS JavaScript, הוא ייתפס .פחות קובץ לתרגם אותו CSS סטטי, כך הדפדפן הסטנדרטי יכול לפרש את זה. זוהי עבודה כפולה בצד הלקוח, שלא לדבר על מיותר מבזבז רוחב פס. הנקודה העיקרית של LESS היא זרימת העבודה כדי לפשט את התרגול שלנו על הידור CSS סטטי להיות דינמי יותר לתכנות.
 
אז, כאשר אנחנו עומדים לשים את סרגל הניווט לחיות באתר אינטרנט, חשוב לקמפל את קובץ LESS לתוך CSS סטטי.
 
לחץ על קראנץ זה! כפתור גדול.
 
 
 
שמור את. ללא קובץ התרגיל שלנו, לקשר אותו למסמך HTML ולבטל את הקישור .פחות & פחות.ג'ים קובץ מתוך המסמך.
 
 .צל box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; width-width: 0 1px 0 1px; border-color: שקוף # 444444 שקוף # 888888;  .gadient background: linear-gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: linear-gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('גופנים / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #efix') פורמט ('Embedded-opentype'), URL ('גופנים / Asap-Regular-webfont.woff') פורמט ('woff'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') פורמט ('svg'); משקל גופני: רגיל; font-style: Normal;  גוף רקע: # a2a2a2; font-family: AsapRegular, sans-serif; font-size: 11pt;  ניווט margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; border-radius: 3px; border: 1px solid # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul ריפוד: 0; שוליים: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; הצג: inline-block; צף: משמאל; רוחב: 156px; גובה: 45px; text-align: center; גובה גובה: 300%; צבע: # f2f2f2; text-shadow: 1px 1px 0px # 000000; border-style: Solid; width-width: 0 1px 0 1px; border-color: שקוף # 444444 שקוף # 888888; רקע: ליניארי- gradient (למעלה, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover background: linear-gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul li: last-child a border-right: none;  
 
בואו נסתכל על התוצאה שוב.
 
 
 
ואנחנו נעשה, אתה מוזמן להתנסות עם זה.
 
סיכום
 
למדנו הרבה דברים על שפת LESS היום, כגון:
 

• משתנים.
• מיקסים
• פרמטרית
• פעולות
• מיקסרים משומרים
• וכללים מקוננים

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

• הדגמה
• הורד מקור