10 απίστευτα κόλπα CSS για να μεταμορφώσετε τις διατάξεις Ιστού σας

Όποιος έχει εμπειρία στο σχεδιασμό ιστοσελίδων, είτε έχετε χρησιμοποιήσει δημιουργούς ιστότοπων DIY είτε έχετε δημιουργήσει έναν ιστότοπο από την αρχή, είναι πιθανό να έχει ακούσει για το CSS στο παρελθόν. Αυτό το απίστευτα ισχυρό εργαλείο μπορεί να χρησιμοποιηθεί για να μεταμορφώσει τις διατάξεις ιστού σας, δίνοντάς σας τη δύναμη να αναλάβετε τον έλεγχο του ιστότοπού σας και να επιτύχετε το δημιουργικό σας όραμα. Αλλά πώς μπορείτε να χρησιμοποιήσετε τα φύλλα στυλ για να ξεκλειδώσετε τις δυνατότητες του επόμενου ιστότοπού σας;

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

Χειρισμός εικόνας CSS

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

1. CSS Φόντο-Εικόνα

Θέλουμε να έχουμε μια εικόνα φόντου πλήρους οθόνης για την κεφαλίδα μας και η ιδιότητα CSS εικόνας φόντου είναι ιδανική. Αρχικά, πρέπει να δημιουργήσουμε ένα κοντέινερ για την εικόνα μας (και τα υπόλοιπα στοιχεία μέσα στην κεφαλίδα).

Ξεκινήσαμε προσθέτοντας μια ετικέτα div με την "κεφαλίδα" ως κατηγορία, ακολουθούμενη από τη ρύθμιση της ύψος έως 100vh και είναι πλάτος έως 100vw; Αυτό μας δίνει ένα πλαίσιο που έχει ακριβώς το ίδιο μέγεθος με το παράθυρο προβολής. Προσθέσαμε επίσης έναν κανόνα CSS για το σώμα της σελίδας, μαζί του υπερχείλιση ορίστηκε σε κρυφή και είναι τα περιθώρια ορίζονται σε 0 px.

Με το κοντέινερ στη θέση του, μπορούμε να προσθέσουμε μια εικόνα φόντου και υπάρχουν τρεις διαφορετικοί κανόνες CSS που χρειαζόμαστε για να επιτύχουμε αυτόν τον στόχο. Η πρώτη, εικόνα φόντου, χρειάζεται μια διεύθυνση URL για να λειτουργεί ως πηγή της εικόνας φόντου και χρησιμοποιήσαμε τον εύχρηστο κατάλογο Unsplash για αυτό. Πρέπει επίσης να ρυθμίσουμε το μέγεθος φόντου για κάλυψη και το φόντο-θέση προς τα κάτω, αλλά μπορεί να θέλετε να πειραματιστείτε με αυτά για τα καλύτερα αποτελέσματα.

2. CSS Background-Blend-Mode

Οι λειτουργίες ανάμειξης CSS καθιστούν δυνατή τη μίξη εικόνων και κειμένου, όπως συμβαίνει με τη δυνατότητα συνδυασμού σε λογισμικό όπως το Adobe Photoshop. Για να κάνουμε τις λειτουργίες ανάμειξης να λειτουργούν με την εικόνα φόντου μας, ορίζουμε το χρώμα φόντου έως ημιδιαφανές λευκό πριν προσθέσουμε το blend mode που θέλαμε να χρησιμοποιήσουμε.

Ακολουθώντας αυτό, Το background-blend-mode ορίστηκε σε απαλό φως, επιτρέποντάς μας να απαλύνουμε την εικόνα.

3. CSS Clip-Path

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

Προσθέσαμε μια ετικέτα div με "flex_image_box" για να λειτουργεί ως κοντέινερ για τρεις εικόνες, χρησιμοποιώντας την ιδιότητα εμφάνισης CSS για να τη μετατρέψουμε σε flexbox (θα μιλήσουμε για αυτό αργότερα). Τρεις ετικέτες img προστέθηκαν μέσα στην ετικέτα div, με αναγνωριστικά ορισμένα ως "img1", "img2" και "img3". Ρύθμιση του πλάτος κάθε εικόνας στα 600 px, μπορούμε να αφήστε την ιδιότητα ύψους κενή χωρίς αλλαγή της αναλογίας διαστάσεων των εικόνων. τώρα ήρθε η ώρα να προσθέσουμε το clip-path μας!

Για να δημιουργήσουμε τα τρία τρίγωνά μας, χρησιμοποιήσαμε την ίδια διαδρομή κλιπ πολυγώνου για τα img1 και img3, με μια ανεστραμμένη έκδοση στη θέση του για το img2. Έπρεπε επίσης να παίξουμε με την τοποθέτηση του δοχείου flex-box μας για να βεβαιωθούμε ότι οι εικόνες βρίσκονται στη σωστή θέση στην οθόνη. Οι κανόνες μας για τη διαδρομή αποσπάσματος μπορείτε να δείτε παρακάτω.

4. Αδιαφάνεια CSS

Η αδιαφάνεια ορίζει το επίπεδο διαφάνειας οποιουδήποτε στοιχείου HTML. Ρυθμίσαμε το αδιαφάνεια των εικόνων μας στο 90%, κάνοντας τα ελαφρώς αδιαφανή ώστε να ενωθούν όμορφα με το φόντο.

CSS Responsive Κείμενο & Εικόνες

Έχουμε ήδη εξερευνήσει την τέχνη του δημιουργώντας εκπληκτικούς ανταποκρινόμενους ιστότοπους χρησιμοποιώντας HTML, CSS και JavaScript στο παρελθόν, αλλά μπορούμε να βασιστούμε στις αρχές που ήδη κατανοείτε παρέχοντας μια βαθύτερη εικόνα για τις δεξιότητες που χρειάζεστε για να κατακτήσετε τις διατάξεις του ιστότοπού σας.

1. CSS Responsive/Σχετικές μονάδες

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

• em: Αυτή η μονάδα χρησιμοποιείται συνήθως με κείμενο. Είναι σχετικό με το μέγεθος γραμματοσειράς του τρέχοντος στοιχείου, καθιστώντας τα 4em τέσσερις φορές μεγαλύτερα από το μέγεθος γραμματοσειράς που έχει οριστεί.
• rem: Όπως και το em, το rem είναι σχετικό με το μέγεθος γραμματοσειράς ενός στοιχείου. το ριζικό στοιχείο σε μια ιεραρχία χρησιμοποιείται για τον καθορισμό του μεγέθους εξόδου.
• vw/vh: Καθορισμός πλάτους και ύψους με βάση το μέγεθος της θύρας προβολής, 2vw ισούται με 2% του πλάτους του προγράμματος περιήγησης ενώ 2vh ισούται με 2% του ύψους του προγράμματος περιήγησης.
• %: Η μονάδα % υπολογίζει τις διαστάσεις με βάση το μέγεθος του γονέα ενός στοιχείου.
• vmin/vmax: Αυτές οι μονάδες παράγουν διαστάσεις σε σχέση με το 1% των μικρότερων ή μεγαλύτερων διαστάσεων της θύρας προβολής, παρέχοντας στοιχεία με τα μέσα να ανταποκρίνονται άμεσα στο μέγεθος ενός παραθύρου του προγράμματος περιήγησης.

2. Μέγεθος γραμματοσειράς CSS

Αυτή η ιδιότητα μπορεί να οριστεί χρησιμοποιώντας προεπιλεγμένες τιμές που είναι προκαθορισμένες είτε από το κύριο φύλλο στυλ του ιστότοπου είτε από το πρόγραμμα περιήγησης ιστού του χρήστη. Αυτές οι τιμές περιλαμβάνουν μεσαίο, xx-small, x-small, small, large, x-large και xx-large, με το medium να ορίζεται ως προεπιλογή για κάθε κείμενο που δεν διαθέτει ετικέτα CSS μεγέθους γραμματοσειράς. Εναλλακτικά, οι σχετικές τιμές μπορούν να χρησιμοποιηθούν κατά τη χρήση της ιδιότητας CSS μεγέθους γραμματοσειράς και αυτή είναι η μέθοδο που χρησιμοποιήσαμε για να διασφαλίσουμε ότι το κείμενο στην ενότητα κεφαλίδας έχει το κατάλληλο μέγεθος για οποιοδήποτε θέαση.

Προσθέσαμε δύο ετικέτες επικεφαλίδας στο HTML μας, επιτρέποντάς μας να προσθέσουμε κείμενο στο έργο. Το ένα είναι μια κύρια μεγάλη κεφαλίδα, ενώ η άλλη είναι μια υποκεφαλίδα, και και οι δύο χρησιμοποιούν σχετικές μονάδες.

Σχετιζομαι με: Πώς να αλλάξετε το μέγεθος γραμματοσειράς HTML στο CSS

3. Πλάτος & Ύψος CSS

Όλα τα στοιχεία HTML έχουν διαστάσεις ύψους και πλάτους, είτε είναι div, img, a ή οποιοσδήποτε άλλος τύπος ετικέτας. Αυτές οι διαστάσεις μπορούν να οριστούν αυτόματα σε προεπιλεγμένες τιμές, αλλά μπορούν επίσης να υπαγορεύονται από σχεδιαστές ιστοσελίδων χρησιμοποιώντας τους σωστούς κανόνες. έχουμε χρησιμοποιήσει και τις δύο αυτές μεθόδους για αυτήν την κεφαλίδα.

Έχουν χρησιμοποιηθεί μονάδες απόκρισης για την εικόνα φόντου, με το ύψος να έχει οριστεί στα 100vh και το πλάτος στα 100vw, αλλά έχουμε επίσης χρησιμοποιήσει απόλυτες μονάδες για τις τρεις εικόνες μας. Αξίζει να εξερευνήσετε και να πειραματιστείτε με μονάδες πλάτους και ύψους CSS, με επιλογές όπως "inherit" που παρέχουν σημαίνει να υιοθετήσετε τις διαστάσεις ενός γονικού στοιχείου και υπάρχουν πολλά άλλα κόλπα όπως αυτό που μπορείτε να χρησιμοποιήσετε.

4. CSS Mix-Blend-Mode

Το CSS mix-blend-mode μοιάζει πολύ με το background-blend mode, μόνο που μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο, αντί να είναι αποκλειστικά για φόντο. Χρησιμοποιήσαμε αυτήν την ιδιότητα στην επικεφαλίδα H1 για να προσθέσουμε υφή και να κάνουμε το έργο πιο ενδιαφέρον. Ξεκινήσαμε ρυθμίζοντας το δικό μας χρώμα κειμένου σε μαύρο, ακολουθούμενη από τη ρύθμιση του mix-blend-mode σε επικάλυψη.

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

5. CSS Text-Transform

Το CSS text-transform είναι μια έξυπνη ιδιότητα που επιτρέπει στους σχεδιαστές να αλλάζουν την κεφαλαία του κειμένου στους ιστότοπούς τους χωρίς να επηρεάζουν τον τρόπο με τον οποίο το διαβάζουν οι μηχανές αναζήτησης. Για παράδειγμα, έχουμε ορίστε τη μετατροπή κειμένου σε κεφαλαία στην επικεφαλίδα H1, κάνοντας κάθε γράμμα κεφαλαίο ανεξάρτητα από το πώς το εισάγουμε στο HTML μας.

Ιδιότητες υπερχείλισης CSS

Το HTML μπορεί συχνά να φαίνεται σαν ένα άκαμπτο πλαίσιο που θέτει αυστηρά όρια για το περιεχόμενο στους ιστότοπούς σας, αλλά αυτό δεν συμβαίνει όταν χρησιμοποιούνται ιδιότητες υπερχείλισης.

Υπερχείλιση CSS & Υπερχείλιση κειμένου

Η υπερχείλιση και η υπερχείλιση κειμένου είναι πολύ παρόμοιες ιδιότητες CSS. Η υπερχείλιση μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο, δίνοντάς σας τον έλεγχο του περιεχομένου που μπορεί να ξεφύγει από τα όριά του. Η υπερχείλιση κειμένου είναι παρόμοια, αν και ισχύει μόνο για κείμενο και σας δίνει τη δυνατότητα να προσθέσετε πρόσθετες παραμέτρους στους κανόνες σας. Έχουμε χρησιμοποιήσει μόνο υπερχείλιση για αυτό το έργο (το χρησιμοποιήσαμε για να περιορίσουμε το μέγεθος του σώματος της σελίδας μας), αλλά μπορείτε να διαβάσετε σχετικά με την υπερχείλιση κειμένου στο W3Schools δικτυακός τόπος.

Χρήση CSS για τις Διατάξεις Ιστού σας

Το CSS είναι ένα απίστευτα ισχυρό εργαλείο, που επιτρέπει σε σχεδιαστές και προγραμματιστές ιστοσελίδων να δημιουργούν εκπληκτικούς ιστότοπους χρησιμοποιώντας κώδικα. Σας συνιστούμε να ρίξετε μια ματιά στο CodePen που παρείχαμε στην αρχή του άρθρου, καθώς αυτό θα σας δώσει μια ακόμη πιο βαθιά εικόνα για το πώς λειτουργούν όλα αυτά τα εργαλεία. Επιπλέον, μπορείτε να παίξετε με την κεφαλίδα που δημιουργήσαμε για να προσθέσετε τις δικές σας τελευταίες πινελιές.

8 Βασικές συμβουλές και κόλπα για το CSS που πρέπει να γνωρίζει κάθε προγραμματιστής

Χρησιμοποιείτε αυτές τις βασικές μεθόδους CSS για γρήγορη ροή εργασίας και όμορφο σχεδιασμό ιστού;

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

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