Αποσπάσματα κώδικα 2025, Ιανουάριος
.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; περίγραμμα: 2px διακεκομμένη "
P (μέγεθος γραμματοσειράς: 24px! σημαντικό;) Ο! σημαντικός κανόνας στο τέλος μιας τιμής θα παρακάμψει οποιεσδήποτε άλλες δηλώσεις στυλ αυτού του χαρακτηριστικού, συμπεριλαμβανομένου του inline "
Α (/ * πλήρως έγκυρη διεύθυνση URL, πιθανός εξωτερικός σύνδεσμος * /) α (/ * σύνδεσμος προς συγκεκριμένο ιστότοπο * /) α, ((* εσωτερικός σχετικός σύνδεσμος * /) α (/ * σύνδεσμος email * /) α (/ * "
Μια δημοφιλής τεχνική σχεδιασμού είναι να δημιουργήσετε ένα δοχείο περιεχομένου που μοιάζει με ένα φύλλο χαρτιού και να στοιβάξετε άλλα φύλλα χαρτιού κάτω από αυτό, προσθέτοντας ένα στρώμα "
Αρχική Κατάλογος Τιμή Σχετικά με την επικοινωνία nav (πλάτος: 960 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; περιθώριο: 120 εικονοστοιχεία αυτόματα; ευθυγράμμιση κειμένου: κέντρο;). Επάνω μενού li (οθόνη: inline-block; "
Εδώ είναι το Google Code Prettify (βρίσκεται σε αυτήν την πηγή). .prettyprint (χρώμα: # 839496; φόντο-χρώμα: # 002b36;) .prettyprint .pln (χρώμα: κληρονομεί;) "
H1 # logo (πλάτος: 200 εικονοστοιχεία; // πλάτος ύψους εικόνας: 100 εικονοστοιχεία; // ύψος φόντου εικόνας: url (../ path / to / image.jpg.webp); κείμενο-εσοχή: -9999 εικονοστοιχεία;) Αυτή η τεχνική "
Το blockquote εμφανίζεται σε προγράμματα περιήγησης που συμμορφώνονται με τα πρότυπα με το εφέ "μεγάλα εισαγωγικά πριν" και σε IE με παχύ αριστερό περίγραμμα και ανοιχτό γκρι "
Απαιτείται jQuery και jQuery UI για το πραγματικό ρυθμιστικό. Το πρόσωπο είναι κατασκευασμένο από στοιχεία που γίνονται σε κύκλους με ακτίνα περιγράμματος. Το στόμα, που δείχνει την ευτυχία "
Από το υποσέλιδο του σχεδιασμού v8 του CSS-Tricks. Προβολή υποσέλιδου επίδειξης (διαγραφή: και τα δύο; υπερχείλιση: κρυφό; μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; ύψος γραμμής: 1,3;) # υποσέλιδα-κουτιά ("
Από προεπιλογή, όλες οι εκδόσεις του IE έχουν μια γραμμή κύλισης στις περιοχές κειμένου, ακόμη και όταν είναι κενές. Κανένα άλλο πρόγραμμα περιήγησης δεν το κάνει αυτό, οπότε αν θέλετε να το αφαιρέσετε έτσι ώστε ο IE να μπορεί "
Οποιοσδήποτε σύνδεσμος αγκύρωσης μπορεί να είναι σύνδεσμος προς ένα έγγραφο PDF, αλλά κάνοντας κλικ σε έναν σύνδεσμο όπως αυτό, διαφορετικά, μπορεί να είναι εκπληκτικό και άβολο για έναν χρήστη. Αυτό"
Αυτό προϋποθέτει τη χρήση ενός αυτόματου επιδιορθωτή. .face: hover (animation: goake 0,82s cubic-bezier (.36, .07, .19, .97) και τα δύο. μετασχηματισμός: translate3d (0, 0, 0); "
Πρότυπο: -moz-border-radius: 10px; -webkit-border-radius: 10px; ακτίνα περιγράμματος: 10px; / * μελλοντική δοκιμή * / -khtml-border-radius: 10px; / * για παλιά "
Φέρτε τα δικά σας προθέματα! .grow (μετάβαση: all .2s easy-in-out;) .grow: hover (μετασχηματισμός: κλίμακα (1.1);) "
Όλοι αγαπούν τις κορδέλες
.ribbon (μέγεθος γραμματοσειράς: 16 εικονοστοιχεία! σημαντικό; / * Αυτή η κορδέλα "Για να συμπεριλάβετε γραφικά υψηλής ανάλυσης, αλλά μόνο για οθόνες που μπορούν να τα χρησιμοποιήσουν. Το "Retina" είναι "2x": @media (-webkit-min-device-pixel-ratio: 2), "
Υπάρχουν φορές που μια πολύ μεγάλη συμβολοσειρά κειμένου μπορεί να ξεχειλίσει το κοντέινερ μιας διάταξης. Για παράδειγμα: οι διευθύνσεις URL συνήθως δεν έχουν κενά σε αυτά, οπότε "
Για γλώσσες από δεξιά προς τα αριστερά, μπορείτε να αλλάξετε την προεπιλεγμένη διάταξη από αριστερά προς τα δεξιά στα περισσότερα προγράμματα περιήγησης απλά μέσω του χαρακτηριστικού dir. κείμενο στα δεξιά προς τα αριστερά "
Α (περίγραμμα: 0;) Προσέξτε να αφαιρέσετε τα στυλ περιγράμματος από τους συνδέσμους, καθώς είναι μια δυνατότητα χρηστικότητας. Εάν το κάνετε, φροντίστε να ορίσετε σαφή στυλ εστίασης. Αν"
Μερικές φορές μπορεί να είναι επιθυμητό να αφαιρέσετε το πάνω ή το αριστερό περιθώριο από το πρώτο στοιχείο σε ένα δοχείο. Ομοίως, το δεξί ή το κάτω περιθώριο από το τελευταίο "
Αυτή η σελίδα παραθέτει έναν τόνο διαφορετικών συσκευών και ερωτημάτων πολυμέσων που θα στοχεύουν συγκεκριμένα τη συγκεκριμένη συσκευή. Αυτό πιθανώς δεν είναι γενικά μια μεγάλη πρακτική, αλλά είναι χρήσιμο να γνωρίζουμε ποιες είναι οι διαστάσεις για όλες αυτές τις συσκευές σε ένα περιβάλλον CSS.
Webkit-tap-highlight-color: rgba (0,0,0,0); Και έπειτα για να επιτρέψετε: ενεργά στυλ να λειτουργούν στο CSS σας σε μια σελίδα στο Mobile Safari: "
Τα διακεκομμένα περίγραμμα γύρω από τους συνδέσμους είναι μια δυνατότητα προσβασιμότητας που διαθέτουν τα περισσότερα προγράμματα περιήγησης από προεπιλογή. Είναι για χρήστες που πρέπει ή επιλέγουν να πλοηγηθούν με πληκτρολόγιο, εκεί "
HTML: .. ή .. Go CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Αρνητική-εσοχή μόνο δυστυχώς δεν λειτουργεί για την αφαίρεση κειμένου "
Ελαφρώς ελαφρύτερο χρώμα (υποθέτοντας ότι το κείμενό σας είναι μαύρο), διακεκομμένο κάτω περίγραμμα και δρομέας ερωτηματικού. Αυτό έχει γίνει μια κάπως τυποποιημένη προσέγγιση, "
Για εικόνες φόντου CSS .yourselector (πλάτος: 200 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; φόντο: url (/folder/yourimage.png.webp) χωρίς επανάληψη; _ background: none; "
Μεγάλη νότα εδώ! Οι συρόμενες πόρτες είναι μια πολύ παλιά τεχνική. Είχε την ώρα του στο Διαδίκτυο, αλλά πιθανότατα δεν είναι ο πιο έξυπνος τρόπος να πάμε αυτές τις μέρες. Εχουμε"
Sup, sub (κάθετη-ευθυγράμμιση: βασική γραμμή; θέση: σχετική; κορυφή: -0,4em;) υπο (κορυφή: 0,4em;) "
@media print (a :: after (content: "(" attr (href) ")";)) "