10 דפוסי רקע של CSS שאתה יכול להשתמש באתר שלך

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

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

1. המשושה השחור

הקוד בדוגמאות אלה זמין ב-a מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

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

קוד HTML

<h1>המשושה השחור</h1>

קוד CSS

גוף {
 משפחת גופן: 'שתף את הטכנולוגיה', פונט סאנס סריף;
 גודל גופן: 68px;
 צבע לבן;
 תצוגה: flex;
 jsutify-content: מרכז;
 align-items: center;
 שוליים: 0;
 רוחב: 100vw;
 גובה: 100Vh;
 צל טקסט: 8פיקסלים 8פיקסלים 10פיקסלים #0000008c;
 צבע רקע: #343a40;
 רקע-תמונה: url("נתונים: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' רוחב='28' גובה='49' viewBox='0 0 28 49'%3E%3Cg מילוי-כלל='זוגי אי - זוגי'%3E%3Cg id='משושים' למלא='%239C92AC' מילוי-אטימות='0.25' מילוי-כלל='לא אפס'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.1749M 06.1749M 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-4129m7.35V0h-7.129 42.15V49h-2z





instagram viewer

'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),-gradient ליניארי (למעלה מימין, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 שוליים: 20px;
}

2. הרצועות הכחולות

תבנית הרקע של הרצועות הכחולות משתמשת ב- שיפוע ליניארי מאפיין CSS ליצירת רצועות מעבר על רקע. אתה יכול לשנות את צבע הרקע וצבע השיפוע כדי לענות על הדרישות שלך.

קוד HTML

<div class="תבניות pt1"></div>

קוד CSS

גוף {
 שוליים: 0px;
}
.דפוסים {
 רוחב: 100vw;
 גובה: 100vw;
}
.pt1 {
 גודל רקע: 50px 50px;
 צבע רקע: #0ae;
תמונת רקע: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, שָׁקוּף 50%, שָׁקוּף);
תמונת רקע: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, שָׁקוּף 50%, שָׁקוּף);
תמונת רקע: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, שָׁקוּף 50%, שָׁקוּף);
תמונת רקע: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, שָׁקוּף 50%, שָׁקוּף);
תמונת רקע: שיפוע ליניארי(rgba(255, 255, 255, .2) 50%, שָׁקוּף 50%, שָׁקוּף);
}

3. לוח השחמט

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

קוד HTML

<div class="תבניות pt1"></div>

קוד CSS

גוף {
 שוליים: 0px;
}
.דפוסים {
 רוחב: 100vw;
 גובה: 100vw;
}
.pt1 {
 צבע רקע: #eee;
 גודל רקע: 60px 60px;
 מיקום רקע: 0 0, 30px 30px;
 תמונת רקע: -webkit-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שחור), -webkit-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שָׁחוֹר);
 תמונת רקע: -moz-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שחור), -moz-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שָׁחוֹר);
 תמונת רקע: -ms-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שחור), -ms-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שָׁחוֹר);
 תמונת רקע: -o-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שחור), -o-linear-gradient (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שחור);
 תמונת רקע: גרדיאנט ליניארי (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שחור), גרדיאנט ליניארי (45 מעלות, שחור 25%, שקוף 25%, שקוף 75%, שחור 75%, שחור);
}

4. הים השקט

אתה יכול להשתמש בתבניות קו אופקי פשוטות אלה כדי להוסיף רקע סטטי לכל רכיב HTML.

קוד HTML

<div class="תבניות pt1"></div>

קוד CSS

גוף {
 שוליים: 0px;
}
.דפוסים {
 רוחב: 100vw;
 גובה: 100vw;
}
.pt1 {
 צבע רקע: #026873;
 גודל רקע: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
תמונת רקע: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, שָׁקוּף 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, שָׁקוּף 50%), -webkit-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .19) 50%);
תמונת רקע: -moz-linear-gradient(0, rgba(255, 255, 255, .07) 50%, שָׁקוּף 50%), -moz-linear-gradient(0, rgba(255, 255, 255, .13) 50%, שָׁקוּף 50%), -moz-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .17) 50%), -moz-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .19) 50%);
תמונת רקע: -ms-linear-gradient(0, rgba(255, 255, 255, .07) 50%, שָׁקוּף 50%), -ms-linear-gradient(0, rgba(255, 255, 255, .13) 50%, שָׁקוּף 50%), -ms-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .17) 50%), -ms-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .19) 50%);
תמונת רקע: -o-linear-gradient(0, rgba(255, 255, 255, .07) 50%, שָׁקוּף 50%), -o-linear-gradient(0, rgba(255, 255, 255, .13) 50%, שָׁקוּף 50%), -o-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .17) 50%), -o-linear-gradient(0, שָׁקוּף 50%, rgba(255, 255, 255, .19) 50%);
תמונת רקע: שיפוע ליניארי(0, rgba(255, 255, 255, .07) 50%, שָׁקוּף 50%), שיפוע ליניארי(0, rgba(255, 255, 255, .13) 50%, שָׁקוּף 50%), שיפוע ליניארי(0, שָׁקוּף 50%, rgba(255, 255, 255, .17) 50%), שיפוע ליניארי(0, שָׁקוּף 50%, rgba(255, 255, 255, .19) 50%);
}

5. הלבנה המודרנית

אתה יכול ליצור דפוס לבנים מודרניות טהורות של CSS באמצעות שיפוע ליניארי נכס CSS.

קוד CSS

גוף {
 תמונת רקע: גרדיאנט ליניארי (45 מעלות, שקוף 20%, שחור 25%, שקוף 25%),
 שיפוע ליניארי (-45 מעלות, שקוף 20%, שחור 25%, שקוף 25%),
 שיפוע ליניארי (-45 מעלות, שקוף 75%, שחור 80%, שקוף 0),
 שיפוע רדיאלי (אפור 2px, שקוף 0);
 גודל רקע: 30px 30px, 30px 30px;
}

6. רקע בסגנון Web3

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

קוד HTML

<div class="כרטיס bg-blur">
<h1>כרטיס עם רקע הדרגתי</h1>
</div>

קוד CSS

:שורש {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&אוטומטי=פורמט&מתאים = חיתוך&w=1169&q=80');
}
גוף {
 צבע רקע: #1D1E22;
 font-family: sans-serif;
 תצוגה: flex;
}
.כַּרְטִיס {
 שוליים: אוטומטי;
 ריפוד: 1rem;
 גובה: 300 פיקסלים;
 רוחב: 300 פיקסלים;
 יישור טקסט: מרכז;
 צבע לבן;
 תצוגה: flex;
 align-items: center;
 להצדיק-תוכן: מרכז;
 עמדה: קרוב משפחה;
 צבע רקע: אפור;
 border-radius: 10px;
}
.bg-blur {
 overflow: מוסתר;
 צבע רקע: שקוף;
}
.bg-blur::לפני {
 תוֹכֶן: '';
 תמונת רקע: var(--bg-image);
 רקע-גודל: כריכה;
 גובה: 100%;
 רוחב: 100%;
 מיקום: מוחלט;
 מסנן: טשטוש (30 פיקסלים);
 z-index: -1;
}

7. אנימציית רקע שיפוע

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

קוד HTML

<div class="d-flex flex-column justify-content-center w-100 h-100"></div>

קוד CSS

גוף {
רקע כללי: שיפוע ליניארי(-45 מעלות, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 גודל רקע: 400% 400%;
 אנימציה: שיפוע 15s הקלה אינסופית;
 גובה: 100Vh;
}
@keyframes שיפוע {
 0% {
 מיקום רקע: 0% 50%;
 }
50% {
 מיקום רקע: 100% 50%;
 }
100% {
 מיקום רקע: 0% 50%;
 }
}

8. גלים מפותלים

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

קוד HTML

<div class="תבניות pt1"></div>

קוד CSS

גוף {
 שוליים: 0px;
}
.דפוסים {
 רוחב: 100vw;
 גובה: 100vw;
}
.pt1 {
רקע כללי: -moz-radial-gradient(0% 2%, מעגל, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), אף אחד;
רקע כללי: -webkit-radial-gradient(0% 2%, מעגל, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), אף אחד;
רקע כללי: -ms-radial-gradient(0% 2%, מעגל, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), אף אחד;
רקע כללי: -o-radial-gradient(0% 2%, מעגל, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), אף אחד;
רקע כללי: שיפוע רדיאלי(0% 2%, מעגל, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), שיפוע רדיאלי(100% 100%, rgba(96, 16, 48, 0) 9פיקסלים, #661133 10פיקסלים, rgba(96, 16, 48, 0) 11פיקסלים), אף אחד;
 גודל רקע: 20px 20px;
}

9. מפת שולחן

צריך תבנית רקע סטנדרטית עבור div HTML שלך? נסה את דפוס בד השולחן הזה.

קוד CSS

גוף {
 רקע: לבן;
תמונת רקע: שיפוע ליניארי(90דרג, rgba(200,0,0,.5) 50%, שָׁקוּף 0),
שיפוע ליניארי(rgba(200,0,0,.5) 50%, שָׁקוּף 0);
 גודל רקע: 30px 30px;
}

10. אלכסוני הזזה

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

קוד HTML

<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="תוֹכֶן">
<h1>אפקט רקע של אלכסוני הזזה</h1>
</div>

קוד CSS

html {
גוֹבַה:100%;
}
גוף {
שולים:0;
}
.bg {
אנימציה:שקופית 3סקלות-in-outאֵינְסוֹףלְהַחלִיף;
תמונת רקע: שיפוע ליניארי(-60 מעלות, #6c3 50%, #09f 50%);
תַחתִית:0;
שמאלה:-50%;
אֲטִימוּת:.5;
עמדה:תוקן;
ימין:-50%;
חלק עליון:0;
Z-index:-1;
}
.bg2 {
אנימציה-כיוון:חלופי-הפוך;
משך אנימציה:4 שניות;
}
.bg3 {
משך אנימציה:5 שניות;
}
.תוֹכֶן {
צבע רקע:rgba (255,255,255,.8);
גבול-רדיוס:.25em;
צל קופסא:0 0 .25emrgba(0,0,0,.25);
גודל קופסא:border-box;
שמאלה:50%;
ריפוד:10vmin;
עמדה:תוקן;
יישור טקסט:מֶרְכָּז;
חלק עליון:50%;
שינוי צורה:translate(-50%, -50%);
}
h1 {
משפחת גופן:מונו-ספייס;
}
@keyframes שקופית {
 0% {
שינוי צורה:translateX(-25%);
 }
100% {
שינוי צורה:translateX(25%);
 }
}

שפר את האתר שלך באמצעות CSS

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

8 טיפים וטריקים חיוניים ל-CSS שכל מפתח צריך לדעת

קרא הבא

על הסופר