10 μοτίβα φόντου CSS που μπορείτε να χρησιμοποιήσετε στον ιστότοπό σας

Τα μοτίβα φόντου μπορούν να αλλάξουν ριζικά την εμφάνιση του ιστότοπού σας. Μπορείτε εύκολα να δημιουργήσετε κομψά μοτίβα φόντου χρησιμοποιώντας CSS που θα ανεβάσουν τη σχεδίαση του ιστότοπού σας στο επόμενο επίπεδο.

Παρακάτω είναι μια λίστα με 10 μοτίβα φόντου που μπορείτε να χρησιμοποιήσετε στα έργα σας.

1. Το μαύρο εξάγωνο

Ο κώδικας σε αυτά τα παραδείγματα είναι διαθέσιμος στο α Αποθετήριο GitHub και είναι δωρεάν για χρήση κάτω από το Άδεια MIT.

Αυτό το μαύρο εξάγωνο μοτίβο παρέχει ένα πολύ προσεγμένο υπόβαθρο εξάγωνου δικτύου. Ο τίτλος φαίνεται ξεκάθαρα σε αυτό το φόντο. Μπορείτε να χρησιμοποιήσετε αυτό το μοτίβο εάν σχεδιάζετε τεχνολογικούς ή αρχιτεκτονικούς ιστότοπους.

Κώδικας HTML

<h1>Το μαύρο εξάγωνο</h1>

Κωδικός CSS

σώμα {
 γραμματοσειρά-οικογένεια: 'Share Tech', Σανς σέριφ;
 μέγεθος γραμματοσειράς: 68 px;
 άσπρο χρώμα;
 οθόνη: flex;
 jsutify-content: κέντρο;
 στοίχιση-στοιχεία: κέντρο;
 περιθώριο: 0;
 πλάτος: 100vw;
 Ύψος: 100vh;
 κείμενο-σκιά: 8px 8px 10px #0000008c;
 χρώμα του φόντου: #343a40;





instagram viewer


 φόντο-εικόνα: url("δεδομένα: εικόνα/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' πλάτος='28' ύψος='49' ViewBox='0 0 28 49'%3E%3Cg fill-rule='ζυγά μονά'Αναγνωριστικό %3E%3Cg='εξάγωνα' γεμίζω='%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,75v-10,94L. 12,69v2,3zm0 18,5L12,98 41v8h-2v-6,85L0 35,81v-2,3zM15 0v7,5L27,99 15H28v-2,31h-.01L17 6,38h-.01L17 6,38mV01h. 42,15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), γραμμική κλίση (προς τα δεξιά επάνω, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 περιθώριο: 20 px;
}

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-γραμμική-κλίση(rgba(255, 255, 255, .2) 50%, διαφανής 50%, διαφανής);
εικόνα φόντου: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, διαφανής 50%, διαφανής);
εικόνα φόντου: -ο-γραμμική-κλίση(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 {
 χρώμα του φόντου: #εεε;
 Μέγεθος φόντου: 60 px 60 px;
 φόντο-θέση: 0 0, 30 εικονοστοιχεία 30 εικονοστοιχεία;
 φόντο-εικόνα: -webkit-linear-gradient (45deg, μαύρο 25%, διαφανές 25%, διαφανές 75%, μαύρο 75%, μαύρο), -webkit-linear-gradient (45deg, μαύρο 25%, διαφανές 25%, διαφανές 75%, μαύρο 75%, μαύρος);
 φόντο-εικόνα: -moz-linear-gradient (45deg, μαύρο 25%, διαφανές 25%, διαφανές 75%, μαύρο 75%, μαύρο), -moz-linear-gradient (45deg, μαύρο 25%, διαφανές 25%, διαφανές 75%, μαύρο 75%, μαύρος);
 φόντο-εικόνα: -ms-linear-gradient (45deg, μαύρο 25%, διαφανές 25%, διαφανές 75%, μαύρο 75%, μαύρο), -ms-linear-gradient (45deg, μαύρο 25%, διαφανές 25%, διαφανές 75%, μαύρο 75%, μαύρος);
 φόντο-εικόνα: -o-γραμμική διαβάθμιση (45 μοίρες, μαύρο 25%, διαφανές 25%, διαφανές 75%, μαύρο 75%, μαύρο), -o-γραμμική διαβάθμιση (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-γραμμική-κλίση(0, rgba(255, 255, 255, .07) 50%, διαφανής 50%), -moz-γραμμική-κλίση(0, rgba(255, 255, 255, .13) 50%, διαφανής 50%), -moz-γραμμική-κλίση(0, διαφανής 50%, rgba(255, 255, 255, .17) 50%), -moz-γραμμική-κλίση(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%);
εικόνα φόντου: -ο-γραμμική-κλίση(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%);
εικόνα φόντου: γραμμική κλίση(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),
 radial-gradient (γκρι 2px, διαφανές 0);
 Μέγεθος φόντου: 30px 30px, 30px 30px;
}

6. Φόντο στυλ Web3

Μπορείτε να δημιουργήσετε ένα Web3-στυλ φόντου χρησιμοποιώντας μια εικόνα φόντου και προσθέτοντας ένα εφέ θαμπώματος σε αυτό. Αυτό το παράδειγμα χρησιμοποιεί μια εικόνα γαλαξία από το 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&auto=format&ταιριάζει=καλλιέργεια&w=1169&q=80');
}
σώμα {
 χρώμα του φόντου: #1D1E22;
 γραμματοσειρά-οικογένεια: sans-serif;
 οθόνη: flex;
}
.κάρτα {
 περιθώριο: αυτόματο;
 padding: 1rem;
 ύψος: 300 px;
 πλάτος: 300 px;
 text-align: κέντρο;
 άσπρο χρώμα;
 οθόνη: flex;
 στοίχιση-στοιχεία: κέντρο;
 justify-content: κέντρο;
 θέση: σχετική;
 Χρώμα φόντου: γκρι;
 ακτίνα περιγράμματος: 10 px;
}
.bg-θόλωμα {
 υπερχείλιση: κρυφό;
 Χρώμα φόντου: διαφανές.
}
.bg-θόλωμα::πριν {
 περιεχόμενο: '';
 εικόνα φόντου: var(--bg-εικόνα);
 Μέγεθος φόντου: εξώφυλλο;
 ύψος: 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%;
 animation: gradient 15s ease infinite?
 Ύψος: 100vh;
}
@keyframes βαθμίδα {
 0% {
 φόντο-θέση: 0% 50%;
 }
50% {
 φόντο-θέση: 100% 50%;
 }
100% {
 φόντο-θέση: 0% 50%;
 }
}

8. Curvy Waves

Μπορείτε να δημιουργήσετε ένα απλό μοτίβο καμπυλωτών κυμάτων χρησιμοποιώντας το ακτινική κλίση Ιδιότητα CSS.

Κώδικας HTML

<div class="μοτίβα pt1"></div>

Κωδικός CSS

σώμα {
 περιθώριο: 0px;
}
.μοτίβα {
 πλάτος: 100vw;
 ύψος: 100vw;
}
.pt1 {
Ιστορικό: -moz-radial-gradient(0% 2%, κύκλος, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), κανένας;
Ιστορικό: -webkit-radial-gradient(0% 2%, κύκλος, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), κανένας;
Ιστορικό: -ms-radial-gradient(0% 2%, κύκλος, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), κανένας;
Ιστορικό: -o-radial-gradient(0% 2%, κύκλος, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), κανένας;
Ιστορικό: ακτινική κλίση(0% 2%, κύκλος, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ακτινική κλίση(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), κανένας;
 Μέγεθος φόντου: 20px 20px;
}

9. Τραπεζοπανί

Χρειάζεστε ένα τυπικό μοτίβο φόντου για το HTML div σας; Δοκιμάστε αυτό το μοτίβο τραπεζομάντιλο.

Κωδικός CSS

σώμα {
 φόντο: λευκό;
εικόνα φόντου: γραμμική κλίση(90deg, 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μικρόευκολία εισόδουάπειροςεναλλακτικό;
εικόνα φόντου: γραμμική κλίση(-60 μοίρες, #6γ3 50%, #09στ 50%);
κάτω μέρος:0;
αριστερά:-50%;
αδιαφάνεια:.5;
θέση:σταθερός;
σωστά:-50%;
μπλουζα:0;
z-δείκτης:-1;
}
.bg2 {
animation-σκηνοθεσία:εναλλακτικό-αντίστροφο;
animation-διάρκεια: 4 δευτ;
}
.bg3 {
animation-διάρκεια: 5 δευτ;
}
.περιεχόμενο {
χρώμα του φόντου:rgba (255,255,255,.8);
συνοριακή ακτίνα:.25εκ;
κουτί-σκιά:0 0 .25 εκrgba(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 που κάθε προγραμματιστής πρέπει να γνωρίζει

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα