האם אי פעם ראית אתר CSS טהור שבו כל אלמנט ואלמנט מבוצע באמצעות CSS? CSS עושה יותר מסתם עיצוב אלמנטים. צורות CSS מאפשרות למעצבי אתרים ליצור נתיבים מותאמים אישית כמו משולש, עיגולים, מצולעים ועוד. בדרך זו, אתה כבר לא נאלץ להכניס תמונה צפה עם רקע שקוף, רק כדי להתאכזב מקופסה מלבנית סביבה.
במאמר זה, נשתמש בצורות CSS ובכמה ערכים פונקציונליים כדי לקוד צורות שונות.
ציור צורות CSS בסיסיות
נתחיל בצורות הבסיסיות כמו ריבוע, מלבן, משולש, עיגול ואליפסה.
ריבוע ומלבן
ריבוע ומלבן הם הצורות הקלות ביותר ליצירה ב-CSS. כל מה שאתה צריך לעשות הוא ליצור א ולתת לו א גוֹבַה וכן א רוֹחַב.
HTML
CSS
.rec-sq {
תצוגה: flex;
פער: 2em;
שוליים: 2em;
}
.כיכר {
רוחב: 15 רם;
גובה: 15 רם;
רקע: rgb (255, 123, 0);
}
.rectangle {
רוחב: 24 רם;
גובה: 14 רמ;
רקע: rgb (0, 119, 128);
}
תְפוּקָה:
עיגול ואליפסה
אתה רק צריך להקצות א גבול-רדיוס של 50% לריבוע ותקבל עיגול. עשה את אותו הדבר עם המלבן כדי לקבל אליפסה.
HTML
CSS
.מעגל {
רוחב: 15 רם;
גובה: 15 רם;
רקע: rgb (255, 123, 0);
רדיוס הגבול: 50%;
}
.ellipse {
רוחב: 24 רם;
גובה: 14 רמ;
רקע: rgb (0, 119, 128);
רדיוס הגבול: 50%;
}
תְפוּקָה:
משולשים
נשתמש בגבולות כדי ליצור משולשים. תוהים איך זה עובד? כל מה שאתה צריך לעשות הוא להגדיר את רוֹחַב ו גוֹבַה של המשולש לאפס. זה אומר, להתקדם, ה רוחב בפועל של האלמנט יהיה רוחב הגבול. כמו כן, אולי אתה כבר יודע שקצוות הגבול הם באלכסון של 45 מעלות זה לזה. תן צבעים שונים לכל גבול והגדר כל שלושה מהם לשקוף. בסופו של דבר, יהיה לך המשולש שלך.
HTML
CSS
//משותף לכולם
גוף {
תצוגה: flex;
פער: 5em;
שוליים: 15em;
}.sample {
גובה: 8.5em;
רוחב: 8.5em;
border-top: 1em solid #9ee780;
גבול-ימין: 1em solid rgb (240, 241, 141);
border-bottom: 1em rgb מוצק (145, 236, 252);
גבול-שמאלי: 1em rgb מוצק (248, 115, 106);
}.משולש {
גובה: 0;
רוחב: 0;
border-top: 5em solid #9ee780;
גבול-ימין: 5em rgb מוצק (240, 241, 141);
border-bottom: 5em rgb מוצק (145, 236, 252);
גבול-שמאלי: 5em rgb מוצק (248, 115, 106);
}
תְפוּקָה:
אתה יכול לשחק עם גוֹבַה ו צבע גבול להשיג סוגים שונים של משולשים. לדוגמה, אתה יכול ליצור משולש המצביע לכיוון מעלה על ידי מתן ה- גבול-תחתון צבע אחיד כאשר כל שאר הגבולות מוגדרים לשקופים. כמו כן, ניתן ליצור משולש המצביע לכיוון הנכון או משולש ישר זווית על ידי משחק רוחב גבול ו צבע גבול.
HTML
CSS
.triangle-up {
גובה: 0;
רוחב: 0;
גבול-עליון: 5em מוצק שקוף;
גבול-ימין: 5em מוצק שקוף;
border-bottom: 5em rgb מוצק (145, 236, 252);
גבול-שמאלי: 5em מוצק שקוף;
}
.triangle-right {
רוחב: 0;
גובה: 0;
סגנון גבול: מוצק;
רוחב הגבול: 4em 0 4em 8em;
צבע גבול: rgb שקוף שקוף שקוף (245, 149, 221);
}
.triangle-bottom-right {
רוחב: 0;
גובה: 0;
סגנון גבול: מוצק;
רוחב הגבול: 8em 0 0 8em;
צבע גבול: rgb שקוף שקוף שקוף (151, 235, 158);
}
תְפוּקָה:
יצירת צורות מתקדמות באמצעות CSS
אתה יכול להשתמש ::לפני ו ::לאחרפסאודו-אלמנטים ליצירת צורות מתקדמות. בעזרת שימוש מושכל במאפייני מיקום והתמרה, אתה יכול בקלות לבנות צורות מורכבות באמצעות CSS טהור.
צורת כוכב (5 נקודות)
תצטרך לתפעל את הגבולות באמצעות ערך הסיבוב של ההמרה. הרעיון הוא ליצור שני צדדים באמצעות א class="כוכב", שני הצדדים האחרים משתמשים ב- ::לאחר אלמנט, והצד האחרון באמצעות ה- ::לפני אֵלֵמֶנט.
HTML
CSS
.star-five {
שוליים: 3.125em 0;
עמדה: קרוב משפחה;
בלוק תצוגה;
רוחב: 0em;
גובה: 0em;
גבול-ימין: 6.25em מוצק שקוף;
גבול-תחתון: 4.3em rgb מוצק (255, 174, 81);
גבול-שמאל: 6.25em מוצק שקוף;
טרנספורמציה: סובב (35 מעלות);
}
.star-five: לפני {
border-bottom: 5em rgb מוצק (255, 174, 81);
גבול-שמאלי: 2em מוצק שקוף;
גבול-ימין: 1.875em מוצק שקוף;
מיקום: מוחלט;
גובה: 0;
רוחב: 0;
למעלה: -45px;
שמאל: -65px;
בלוק תצוגה;
תוכן: '';
transform: rotate(-35deg);
}
.star-five: אחרי {
מיקום: מוחלט;
בלוק תצוגה;
למעלה: 3 פיקסלים;
שמאל: -105px;
רוחב: 0;
גובה: 0;
גבול-ימין: 6.25em מוצק שקוף;
גבול-תחתון: 4.3em rgb מוצק (255, 174, 81);
גבול-שמאל: 5.95em שקוף מוצק;
transform: rotate(-70deg);
תוכן: '';
}
תְפוּקָה:
מְחוּמָשׁ
ניתן ליצור מחומש על ידי שילוב של טרפז ומשולש. להשתמש גבול ו מאפייני מיקום לעצב ולקבץ אותם.
HTML
CSS
.pentagon {
עמדה: קרוב משפחה;
רוחב: 10em;
box-sizing: content-box;
רוחב הגבול: 10em 5em 0;
סגנון גבול: מוצק;
צבע גבול: rgb (7, 185, 255) שקוף;
שוליים-עליון: 20 רם;
שוליים-שמאליים: 10rem;
}
.pentagon: לפני {
תוכן: "";
מיקום: מוחלט;
גובה: 0;
רוחב: 0;
למעלה: -18em;
שמאל: -5em;
רוחב הגבול: 0 10em 8em;
סגנון גבול: מוצק;
צבע גבול: rgb שקוף שקוף (7, 185, 255);
}
תְפוּקָה:
יהלום
קבץ שני משולשים המצביעים כלפי מעלה ומטה באמצעות מיקום ליצירת צורת יהלום. כן, נשתמש ב- גבול תכונות ליצירת משולשים אלו.
HTML
CSS
.יהלום {
רוחב: 0;
גובה: 0;
עמדה: קרוב משפחה;
למעלה: -3em;
גבול: 3em מוצק שקוף;
צבע גבול-תחתון: rgb (129, 230, 255);
}
.diamond: אחרי {
תוכן: '';
רוחב: 0;
גובה: 0;
מיקום: מוחלט;
שמאל: -3em;
למעלה: 3em;
גבול: 3em מוצק שקוף;
צבע גבול-עליון: rgb (129, 230, 255);
}
תְפוּקָה:
אתה יכול ליצור צורת מגן יהלום על ידי שינוי גובה המשולש העליון כפי שמוצג להלן:
HTML
CSS
מגן יהלום
{
רוחב: 0;
גובה: 0;
גבול: 3em מוצק שקוף;
גבול-תחתון: 1.25em rgb מוצק (71, 194, 231);
עמדה: קרוב משפחה;
למעלה: -3em;
}
חיתוך .diamond: after {
תוכן: '';
מיקום: מוחלט;
שמאל: -3em;
העליון: 1.25em;
רוחב: 0;
גובה: 0;
גבול: 3em מוצק שקוף;
גבול-עליון: 4.4em rgb מוצק (71, 194, 231);
}
תְפוּקָה:
לֵב
צורת הלב קצת קשה אבל אתה יכול לעשות את זה על ידי שימוש ::לפני ו ::לאחר פסאודו-אלמנטים. אתה יכול להשתמש בערכים שונים של שינוי צורה לסובב אותם מזוויות שונות עד שהם יוצרים צורת לב בצורה מושלמת. בסופו של דבר, אתה יכול להגדיר טרנספורמציה-מקור כדי להגדיר את הנקודה שסביבה השינוי מיושם.
HTML
CSS
.heart {
רוחב: 6.25em;
גובה: 55em;
עמדה: קרוב משפחה;
}
.heart: לפני,
.heart: אחרי {
תוכן: "";
רוחב: 3em;
גובה: 5em;
מיקום: מוחלט;
שמאל: 3em;
למעלה: 0;
רקע: אדום;
border-radius: 3em 3em 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart: אחרי {
שמאל: 0;
טרנספורמציה: סובב (45 מעלות);
transform-origin: 100% 100%;
}
תְפוּקָה:
ניסוי עם צורות CSS טהורות
כעת עליך להכיר תמונות CSS טהורות שונות שניתן לבנות על ידי כתיבת כמה שורות קוד. בניית אתר סופר מהיר היא כבר לא משימה קדחתנית מכיוון שאתה יודע לשחק עם הקוד. החלק הטוב ביותר הוא שאתה יכול להדהד עם קולו של המותג על ידי מניפולציה של צורות וצבעים שונים בהתאם לדרישתך. לכן, המשך להתנסות ולגלות דרכים חדשות לצייר צורות מדהימות אך ורק על ידי CSS.
קורא לכל מפתחי האינטרנט המתחילים: מדריך זה יעניק לך את הכישורים הדרושים לך כדי ליצור סרגלי ניווט מגיבים משלך באמצעות HTML ו-CSS בלבד!
קרא הבא
- תִכנוּת
- CSS
- עיצוב אתרים
- בניית אתרים
Naincy מתמחה בבניית אתרים רספונסיביים במיוחד ואסטרטגיית תוכן יעילה יחד עם עותקי אינטרנט. היא סופרת טכנולוגית עצמאית ששומרת עין חדה על טכנולוגיות טרנדיות.
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחץ כאן כדי להירשם
