עיצוב גבולות

שיעור 5 מתוך 6 בקורס פרויקט CSS – אנימציית טעינה פשוטה של Coddy.

נוסיף עיצוב מעוגל לגבול של גלגל הטעינה.

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

border-color: black transparent black transparent

האמור לעיל יוסיף צבע גבול (שחור) רק לגבולות העליון והתחתון. אפשר גם להשתמש במאפיינים border-top-color ו-border-bottom-color!

אל תשכחו להוסיף את border-width ואת border-style.

אתגר

קל

הסר את צבע הרקע מהספינר והוסף את מאפייני ה-CSS הבאים:

border-width בערך 6px
border-style בערך solid
border-color רק עבור החלק העליון והחלק התחתון, בחר איזה צבע שתרצה! (הגבולות השמאלי והימני צריכים להיות transparent)

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

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

כל השיעורים ביחידה פרויקט CSS – אנימציית טעינה פשוטה

1מבוא

2פרויקט ה-CSS

עיצוב גבולות שיעור פרויקט

תרגלו בעצמכם: Web אונליין