כיצד ליצור צורה לב עם CSS
CSS3 מעלה את ההיתכנות של מה שאנחנו יכולים לבנות באתרי אינטרנט באמצעות HTML ו- CSS בלבד. תוכל למצוא דוגמאות מדהימות שהצגנו בעבר. אבל בואו לא נהיה רחוק מדי לפני עצמנו, עיצוב מסובך יצטרכו קודים שעשויים לתת לך כאב ראש.
במקום זאת, אנחנו הולכים ליצור משהו פשוט כדי לעזור לך להבין צורות ומיקום עם CSS הראשון, לפני להעז עיצובים מתקדמים יותר. מאז היום של ולנטיין הוא ממש מעבר לפינה, בואו ליצור צורת לב באמצעות HTML ו- CSS.
הבסיס
ביסודו של דבר, אנחנו יכולים ליצור צורה חדשה על ידי הצטרפות אחת או יותר צורות בסיסיות, כמו מלבנים ומעגלים. אם נבחן צורת לב נוכל למצוא שהיא מורכבת שני מעגלים ומלבן משולב. רכיבי HTML הם למעשה ריבוע או מלבן. הודות לרדיוס הגבול CSS3 אנו יכולים להפוך מלבן למעגל בקלות.
התחל על ידי הוספת אז, אנחנו עושים את זה מרובע על ידי ציון רוחב וגובה שווה. בחר צבע רקע שאתה אוהב. הבא, אנחנו נעשה את המעגלים. במקום להוסיף אלמנטים חדשים, אנו נעשה שימוש באלמנטים פסאודו, יחד עם הכיכר תהיה לנו תוצאה כזאת: לאחר מכן, אנו יוצרים את המעגל השני עם אלמנט pseudo התוצאות הן כדלקמן: אנו יכולים לשלב את שני סגנונות אלה על ידי הקבצה של בוררי פסאודו-אלמנטים כדלקמן: טה-דה! יש לנו צורת לב, למרות שזה עדיין לא בכיוון הנכון. כדי ליישר את זה, נשתמש CSS3 Transformation. טרנספורמציה יכולה להינתן לרכיבים העיקריים של הצורה; הנה, זה אומר הכיכר. כאשר הופכים, האלמנט המדומה ישנה באופן אוטומטי את מיקומו לאחר האלמנט הראשי. כאן אנו לסובב את הלב כך הוא נראה “עומד”. וזה מה שהלב שלנו נראה עכשיו. הקוד המלא של צורת הלב לעיל הוא כדלקמן, ב- HTML: וב- CSS שלנו, זה יהיה כך: שימו לב שאנחנו עכשיו להגדיר את ערוץ אלפא של עכשיו שיש לנו צורת לב מושלמת, אנחנו יכולים החלף את הרקע לצבע אחר (למשל ורוד או אדום) בקלות. החיסרון היחיד כאן הוא שאנחנו לא ניתן להוסיף גבול אל הצורה בשל המרכיבים הנערמים. הוספת קו גבול תגרום ללב להיראות מוזר. עם CSS3 יצירת צורה כמו צורת לב עכשיו ניתן לביצוע בקלות. תכונה רדיוס הגבול מאפשר לנו להפוך אלמנטים או אפילו אלמנט פסאודו לתוך מעגל. עם שינוי CSS3, אנחנו יכולים לסובב או להזיז את הקואורדינטות של האובייקט בקלות. אתה מוגבל רק על ידי יצירתיות ודמיון שלך!
.12 ואף סרט ו Statements text רוחב: 200px; גובה: 200px; צבע רקע: rgba (250,184,66, 0.8);
:לפני ו :לאחר. אנחנו הראשונים להגדיר :לפני אלמנטים פסאודו כמו המעגל הראשון שלנו. אנחנו עושים את זה מרובע עם גודל שווה על רוחב וגובה בדיוק כמו שעשינו עם div. לאחר מכן אנו הופכים אותו למעגל על ידי נותן לו רדיוס הגבול של 50% והניח אותו בצד שמאל של הכיכר. .צורה you10ierני bottom: 0px; משמאל: -100 פיקסלים; רוחב: 200px; גובה: 200px; : 50%, רדיוס גבול: 50%, צבע רקע: rgba (250,184,66); , 0.8);
:לאחר עם אותם סגנונות כמו המעגל הראשון שיצרנו. לאחר מכן, אנחנו גם למקם אותו על החלק העליון של הכיכר. .לב-צורה: אחרי position: absolute; top: -100px; right: 0px; רוחב: 200px; גובה: 200px; : 50%, רדיוס גבול: 50%, צבע רקע: rgba (250,184,66); , 0.8);
.לב-צורה: לפני, .heart-צורה: אחרי position: absolute; רוחב: 200px; גובה: 200px; : 50%, רדיוס גבול: 50%, צבע רקע: rgba (250,184,66); , 0.8); .heart-shape: לפני bottom: 0px; left: -100px; .heart-shape: after top: -100px; right: 0px;
.לב-צורה -webkit-transform: לסובב (45deg); -Moz-transform: לסובב (45deg); -ms-transform: לסובב (45deg); -O-transform: לסובב (45deg); להפוך: לסובב (45deg);
התוצאה:
.12 ואף סרט ו Statements text רוחב: 200px; גובה: 200px; -webkit-transform: לסובב (45deg); -Moz-transform: לסובב (45deg); -ms-transform: לסובב (45deg); -O-transform: לסובב (45deg); להפוך: לסובב (45deg); צבע רקע: rgba (250,184,66, 1); .heart-shape: before, .heart-צורה: after position: מוחלט; רוחב: 200px; גובה: 200px; : 50%, רדיוס גבול: 50%, צבע רקע: rgba (250,184,66); , 1); צורה: heart: לפני bottom: 0px; Left: -100px; .heart-shape: after top: -100px; right: 0px;
rgba (250,184,66, 1) ברקע 1 כדי להסיר את השקיפות. עכשיו זה מה שהלב שלנו נראה.
סיכום
