כיצד ליצור סרט CSS

אנחנו גם להגדיר את מידות בסיסיות וה צבע רקע עם CSS.

 .כרטיס background-color: beige; גובה: 300px; שוליים: 40px; width: 500px;  

החלק האמצעי של הסרט

נשתמש ב משתנה CSS (מאפשר לנו לאחסן ולעשות שימוש חוזר בערך CSS) נקרא --עמ ' ל אחסן את ערך הריפוד. הערך של ריפוד רכוש משתמש var (- p) תחביר עבור הריפוד השמאלי והימני של הסרט כך שהוא יכול להיות התרחבו בקלות. ה --עמ ' משתנה מאוחר יותר יהיה בשימוש חוזר מספר פעמים; זה הופך את הקוד שלנו גמיש.

 .סרט @p: 15px; צבע רקע: rgb (170,170,170); גובה: 60px; ריפוד: 0 var (- p); רוחב: 100%;  

בתמונה למטה תוכל לראות כיצד ההדגמה שלך אמורה להיראות בנקודה זו:

מרכז את הסרט

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

 .סרט @p: 15px; צבע רקע: rgb (170,170,170); גובה: 60px; ריפוד: 0 var (- p); מקומות קרובים מימין: var (- p); רוחב: 100%;  

ההדגמה המעודכנת:

צדי הסרט

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

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

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

 .סרט: לפני, .ribbon: after background-color: inherit; (:); גובה: 100%, מיקום: מוחל, רוחב: ואר (- p); .ribbon: לפני left: 0; .ribbon: after  ..01; 

עכשיו סרט עם הצדדים הוספנו רק נראה להלן:

להטות את הצדדים

כדי להפוך את הצדדים של הסרט נראה כפוף, אנחנו צריכים להטות את הצדדים על ידי 45 מעלות. ה המרה: skewy () כלל CSS גורר אלמנטים אנכית.

 .סרט: לפני left: 0; צורה: skewy (45deg);  .ribbon: אחרי right: 0; צורה: skewy (-45deg);  

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

יישר את הצדדים

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

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

אם אתה משתמש בכל preprocessor CSS לבדוק אם יש לו שזוף פונקציה, אחרת מתייחסים תרשים משיק או מחשבון ל לגלות את הערך הממשי של הזווית. יש לנו מזל שזוף 45 מעלות J 1, כלומר הערך של איקס שווה ל y במקרה שלנו.

 .סרט: לפני, .ribbon: after background-color: inherit; (); (;): () (); 

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

לבסוף אנחנו צריכים ליישר את הצדדים לאורך ציר z כמו כן, אז בואו להוסיף את z-index you -1 הכלל על הצדדים כדי מניחים אותם מאחורי החלק האמצעי של הסרט.

 .סרט: לפני, .ribbon: after background-color: inherit; ();): ():); (); index you נב 

עכשיו שאנחנו מיושר הצדדים, סרט CSS שלנו נעשה.

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