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

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

Κάθε προγραμματιστής πρέπει να γνωρίζει αυτά τα κόλπα CSS για να αναπτύξει τα έργα του γρήγορα και αποτελεσματικά. Είναι βέβαιο ότι θα αυξήσουν την παραγωγικότητά σας στο επόμενο επίπεδο — ας ξεκινήσουμε.

1. Εφέ Hover

Μπορείτε να προσθέσετε ένα εφέ αιώρησης σε ένα στοιχείο HTML χρησιμοποιώντας το :φτερουγίζω εκλέκτορας.

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

Κώδικας HTML:

Hover Over Me

Κωδικός CSS:

κουμπί: τοποθετήστε το δείκτη του ποντικιού {
χρώμα: #0062FF;
περίγραμμα: #0062FF στερεό 1px;
φόντο: #FFFF99;
}

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

CSS Fade-in Effect στο Hover

κουμπί{
αδιαφάνεια: 0,5;
}
κουμπί: αιώρηση{
αδιαφάνεια: 1;
}

Εφέ ανάπτυξης CSS στο Hover

κουμπί: αιώρηση{
-webkit-transform: κλίμακα (1.2);
-ms-transform: κλίμακα (1.2);
μετασχηματισμός: κλίμακα (1.2);
}

2. Αλλάξτε το μέγεθος των εικόνων για να χωρέσουν ένα κοντέινερ div

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

Κώδικας HTML:

Κωδικός CSS:

.random-image {
 ύψος: 100%;
 πλάτος: 100%;
 αντικειμενική προσαρμογή: περιέχει;
 }

3. Υπερκαλύπτοντας όλα τα Στυλ

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

Κώδικας HTML:

 Γειά σου Κόσμε!

Κωδικός CSS:

Π {
 Χρώμα φόντου: κίτρινο;
 }
 .όνομα τάξης {
 χρώμα φόντου: μπλε !σημαντικό;
 }
 #idName {
 Χρώμα φόντου: πράσινο;
 }

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

4. Περικοπή κειμένου με Ellipsis

Μπορείτε να περικόψετε το υπερχειλισμένο κείμενο με μια έλλειψη (...) χρησιμοποιώντας το υπερχείλιση κειμένου Ιδιότητα CSS.

Κώδικας HTML:

 Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

Κωδικός CSS:

.text {
 λευκό διάστημα: nowrap;
 υπερχείλιση: κρυφό;
 κείμενο-υπερχείλιση: έλλειψη;
 πλάτος: 200 px;
 }

Σχετίζεται με: Το μοντέλο πλαισίου CSS που εξηγείται με παραδείγματα

5. Χρήση μετατροπής κειμένου

Μπορείτε να αναγκάσετε το κείμενο να είναι κεφαλαίο, πεζό ή κεφαλαίο χρησιμοποιώντας το κείμενο-μετατροπή Ιδιότητα CSS.

Κεφάλαια

Κώδικας HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Κωδικός CSS:

.κεφαλαία {
 μετατροπή κειμένου: κεφαλαία;
 }

Πεζά γράμματα

Κώδικας HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Κωδικός CSS:

.πεζά γράμματα {
 μετατροπή κειμένου: πεζά;
 }

Κεφαλοποιώ

Κώδικας HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Κωδικός CSS:

.κεφαλαίο {
 text-transform: κεφαλαία;
 }

6. Χρήση δήλωσης ιδιοκτησίας μιας γραμμής

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

Για παράδειγμα, CSS Ιστορικό είναι μια συντομογραφία που σας επιτρέπει να ορίσετε τις τιμές του χρώμα του φόντου, εικόνα φόντου, φόντο-επανάληψη, και φόντο-θέση. Ομοίως, μπορείτε να ορίσετε ιδιότητες για γραμματοσειρά, σύνορο, περιθώριο, και υλικό παραγεμίσματος.

Μονογραμμική Δήλωση Ιδιότητας Ιστορικού

Χρώμα φόντου: μαύρο;
background-image: url (images/xyz.png);
φόντο-επανάληψη: χωρίς επανάληψη.
φόντο-θέση: αριστερά επάνω?

Μπορείτε να απλοποιήσετε την παραπάνω δήλωση σε μία μόνο γραμμή:

φόντο: μαύρο url (images/xyz.png) χωρίς επανάληψη αριστερά επάνω.

Οι ιδιότητες συντομογραφίας είναι πολύ βολικές στη χρήση, αλλά πρέπει να λάβετε υπόψη κάποιες περίπλοκες θήκες (όπως περιγράφεται στα Έγγραφα Ιστού MDN) κατά τη χρήση τους.

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

Κώδικας HTML:

Δεξιά επεξήγηση εργαλείου
Αυτό είναι το κείμενο της επεξήγησης εργαλείου

Κωδικός CSS:

σώμα {
 text-align: κέντρο;
 }
 .tooltip_div {
 θέση: σχετική;
 οθόνη: inline-block;
 }
 .tooltip_div .tooltip {
 ορατότητα: κρυφό;
 πλάτος: 170 px;
 Χρώμα φόντου: μπλε;
 χρώμα: #fff;
 text-align: κέντρο;
 περίγραμμα-ακτίνα: 6px;
 padding: 5px 0;
 /* Τοποθέτηση της συμβουλής εργαλείου */
 θέση: απόλυτη;
 z-index: 1;
 κορυφή: -5 px;
 αριστερά: 105%;
 }
 .tooltip_div: hover .tooltip {
 ορατότητα: ορατή;
 }

Κώδικας HTML:

Αριστερή επεξήγηση εργαλείου
Αυτό είναι το κείμενο της επεξήγησης εργαλείου

Κωδικός CSS:

σώμα {
 text-align: κέντρο;
 }
 .tooltip_div {
 θέση: σχετική;
 οθόνη: inline-block;
 }
 .tooltip_div .tooltip {
 ορατότητα: κρυφό;
 πλάτος: 170 px;
 Χρώμα φόντου: μπλε;
 χρώμα: #fff;
 text-align: κέντρο;
 περίγραμμα-ακτίνα: 6px;
 padding: 5px 0;
 /* Τοποθέτηση της συμβουλής εργαλείου */
 θέση: απόλυτη;
 z-index: 1;
 κορυφή: -5 px;
 δεξιά: 105%;
 }
 .tooltip_div: hover .tooltip {
 ορατότητα: ορατή;
 }

Κώδικας HTML:

Επάνω συμβουλή εργαλείου
Αυτό είναι το κείμενο της επεξήγησης εργαλείου

Κωδικός CSS:

σώμα {
 text-align: κέντρο;
 }
 .tooltip_div {
 margin-top: 100px;
 θέση: σχετική;
 οθόνη: inline-block;
 }
 .tooltip_div .tooltip {
 ορατότητα: κρυφό;
 πλάτος: 170 px;
 Χρώμα φόντου: μπλε;
 χρώμα: #fff;
 text-align: κέντρο;
 περίγραμμα-ακτίνα: 6px;
 padding: 5px 0;
 /* Τοποθέτηση της συμβουλής εργαλείου */
 θέση: απόλυτη;
 z-index: 1;
 κάτω: 100%;
 αριστερά: 50%;
 margin-αριστερά: -60px;
 }
 .tooltip_div: hover .tooltip {
 ορατότητα: ορατή;
 }

Κώδικας HTML:

Επεξήγηση εργαλείου κάτω
Αυτό είναι το κείμενο της επεξήγησης εργαλείου

Κωδικός CSS:

σώμα {
 text-align: κέντρο;
 }
 .tooltip_div {
 margin-top: 100px;
 θέση: σχετική;
 οθόνη: inline-block;
 }
 .tooltip_div .tooltip {
 ορατότητα: κρυφό;
 πλάτος: 170 px;
 Χρώμα φόντου: μπλε;
 χρώμα: #fff;
 text-align: κέντρο;
 περίγραμμα-ακτίνα: 6px;
 padding: 5px 0;
 /* Τοποθετήστε την επεξήγηση εργαλείου */
 θέση: απόλυτη;
 z-index: 1;
 κορυφή: 100%;
 αριστερά: 50%;
 margin-αριστερά: -60px;
 }
 .tooltip_div: hover .tooltip {
 ορατότητα: ορατή;
 }

Μπορείτε επίσης να χρησιμοποιήσετε τη βιβλιοθήκη Bootstrap για να δημιουργήσετε προσαρμοσμένο Συμβουλές εργαλείων Bootstrap.

8. Προσθήκη εφέ σκιάς

Μπορείτε να προσθέσετε εφέ σκιάς CSS σε κείμενα και στοιχεία χρησιμοποιώντας το κείμενο-σκιά και το κουτί-σκιά Ιδιότητες CSS αντίστοιχα.

Σκιά κειμένου CSS

ο κείμενο-σκιά Η ιδιότητα CSS προσθέτει σκιές και επίπεδα στο κείμενο. ο κείμενο-σκιά Η ιδιότητα δέχεται μια λίστα σκιών διαχωρισμένων με κόμματα που θα εφαρμοστούν στο κείμενο.

Σύνταξη της ιδιότητας CSS σκιάς κειμένου:

/* Μπορείτε να χρησιμοποιήσετε 4 ορίσματα με την ιδιότητα text-shadow CSS:
offset-x, offset-y, blur-radius και color */
/* offset-x | offset-y | θαμπάδα-ακτίνα | χρώμα */
κείμενο-σκιά: 2px 2px 4px κόκκινο.
/* χρώμα | offset-x | offset-y | θαμπάδα-ακτίνα */
text-shadow: #18fa3e 1px 2px 10px;

Σημείωση: Τα ορίσματα χρώματος και θολώματος-ακτίνας είναι προαιρετικά.

Σχετίζεται με: Πώς να χρησιμοποιήσετε τη σκιά κειμένου CSS: Κόλπα και παραδείγματα

Για παράδειγμα:

φόντο: #e74c3c;
χρώμα: #fff;
γραμματοσειρά-οικογένεια: lato;
text-shadow: 1px 1px rgba (123, 25, 15, 0,5), 2px 2px rgba (129, 28, 18, 0,51), 3px 3px rgba (135, 31, 20, 0,51 (3xba), 4px, 22, 0,53), 5px 5px rgba (145, 36, 24, 0,54), 6px 6px rgba (150, 38, 26, 0,55), 7 εικονοστοιχεία 7 εικονοστοιχεία rgba (154, 40, 28, 0,56), 8 εικονοστοιχεία 8 εικονοστοιχεία rgba (158, 42, 30, 0,57), 9 εικονοστοιχεία 9 εικονοστοιχεία rgba (1,08, 4), 10 px rgba (166, 45, 33, 0,59), 11 px 11 px rgba (169, 47, 34, 0,6), 12 px 12 px rgba (173, 48, 36, 0,61), 13 px 13 px rgba (176, 50, 37, 0,62), 14 px 14 px rgba (178, 51, 38, 0,63), 15 (px 6,9), 16px 16px rgba (184, 54, 40, 0,65), 17px 17px rgba (186,. 195, 59, 45, 0,7), 22 px 22 px rgba (197, 60, 46, 0,71), 23 px. , 27px 27px rgba (206, 64, 49, 0,76), 28px 28px rgba (207, 65, 50, 0,77), 29 px 29 px rgba (209, 65, 51, 0,78), 30 px 30 px rgba (210, 66, 51, 0,79), 31 px 31 px rgba (209, 65, 51, 0,78), 213, 67, 52, 0,81), 33px 33px rgba (214, 68, 53, 0,82), 34px 34 εικονοστοιχεία rgba (215, 69, 53, 0,83), 35 εικονοστοιχεία 35 εικονοστοιχεία rgba (216, 69, 54, 0,84), 36 εικονοστοιχεία 36 εικονοστοιχεία rgba (218, 70, 54, 0,85), 37,06,5,7,7, 37,5,7,5,7,5,7,5,7,5,7,5,5,5,7,37,5,7,5,7,5,7,5,5, مى باشد,, 38px 38px rgba (220, 71, 55, 0,87), 39px 39px rgba (221, 71, 56, 0,88), 40 px 40 px rgba (222, 72, 56, 0,89), 41 px 41 px rgba (223, 72, 57, 0,9), 42 px 42 px rgba (224, 4, 7, 42 px rgba) 225, 73, 57, 0,92), 44 px 44 px rgba (225, 73, 58, 0,93), 45 px 45 εικονοστοιχεία rgba (226, 74, 58, 0,94), 46 εικονοστοιχεία 46 εικονοστοιχεία rgba (227, 74, 58, 0,95), 47 εικονοστοιχεία 47 εικονοστοιχεία rgba (228, 75, 59, 0,96), 48 px, 79,7, 48 px, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

Σκιά πλαισίου CSS

ο κουτί-σκιά Η ιδιότητα χρησιμοποιείται για την εφαρμογή μιας σκιάς σε στοιχεία HTML.

Σύνταξη της ιδιότητας box-shadow CSS

box-shadow: [οριζόντια μετατόπιση] [κάθετη μετατόπιση] [ακτίνα θολώματος] [προαιρετική ακτίνα εξάπλωσης] [χρώμα];

Σημείωση: Οι παράμετροι θολώματος, εξάπλωσης και χρώματος είναι προαιρετικές.

Σχετίζεται με: Πώς να χρησιμοποιήσετε το πλαίσιο-σκιά CSS: Κόλπα και παραδείγματα

Για παράδειγμα:

box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;

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

Διαμορφώστε τον ιστότοπό σας χρησιμοποιώντας σύγχρονα κόλπα CSS

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

11 Παραδείγματα σκιών κειμένου CSS για να δοκιμάσετε στον ιστότοπό σας

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

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

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