Αποσπάσματα κώδικα 2025, Ιανουάριος

"Ραμμένο" Κοίτα - CSS-Κόλπα

"Ραμμένο" Κοίτα - CSS-Κόλπα

.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; περίγραμμα: 2px διακεκομμένη "

Τεχνική παράκαμψης στυλ - CSS-Κόλπα

Τεχνική παράκαμψης στυλ - CSS-Κόλπα

P (μέγεθος γραμματοσειράς: 24px! σημαντικό;) Ο! σημαντικός κανόνας στο τέλος μιας τιμής θα παρακάμψει οποιεσδήποτε άλλες δηλώσεις στυλ αυτού του χαρακτηριστικού, συμπεριλαμβανομένου του inline "

Σύνδεσμοι στυλ ανάλογα με τον προορισμό - CSS-Κόλπα

Σύνδεσμοι στυλ ανάλογα με τον προορισμό - CSS-Κόλπα

Α (/ * πλήρως έγκυρη διεύθυνση URL, πιθανός εξωτερικός σύνδεσμος * /) α (/ * σύνδεσμος προς συγκεκριμένο ιστότοπο * /) α, ((* εσωτερικός σχετικός σύνδεσμος * /) α (/ * σύνδεσμος email * /) α (/ * "

Εφέ συσσωρευμένου χαρτιού - CSS-Κόλπα

Εφέ συσσωρευμένου χαρτιού - CSS-Κόλπα

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

Μενού Spinny Leaf - CSS-Κόλπα

Μενού Spinny Leaf - CSS-Κόλπα

Αρχική Κατάλογος Τιμή Σχετικά με την επικοινωνία nav (πλάτος: 960 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; περιθώριο: 120 εικονοστοιχεία αυτόματα; ευθυγράμμιση κειμένου: κέντρο;). Επάνω μενού li (οθόνη: inline-block; "

Θέμα Solarized για CodeMirror and Prettify - CSS-Κόλπα

Θέμα Solarized για CodeMirror and Prettify - CSS-Κόλπα

Εδώ είναι το Google Code Prettify (βρίσκεται σε αυτήν την πηγή). .prettyprint (χρώμα: # 839496; φόντο-χρώμα: # 002b36;) .prettyprint .pln (χρώμα: κληρονομεί;) "

Τυπική αντικατάσταση εικόνας CSS - CSS-Κόλπα

Τυπική αντικατάσταση εικόνας CSS - CSS-Κόλπα

H1 # logo (πλάτος: 200 εικονοστοιχεία; // πλάτος ύψους εικόνας: 100 εικονοστοιχεία; // ύψος φόντου εικόνας: url (../ path / to / image.jpg.webp); κείμενο-εσοχή: -9999 εικονοστοιχεία;) Αυτή η τεχνική "

Απλό και ωραίο στυλ Blockquote - CSS-Κόλπα

Απλό και ωραίο στυλ Blockquote - CSS-Κόλπα

Το blockquote εμφανίζεται σε προγράμματα περιήγησης που συμμορφώνονται με τα πρότυπα με το εφέ "μεγάλα εισαγωγικά πριν" και σε IE με παχύ αριστερό περίγραμμα και ανοιχτό γκρι "

Smiley Slider - CSS-Κόλπα

Smiley Slider - CSS-Κόλπα

Απαιτείται jQuery και jQuery UI για το πραγματικό ρυθμιστικό. Το πρόσωπο είναι κατασκευασμένο από στοιχεία που γίνονται σε κύκλους με ακτίνα περιγράμματος. Το στόμα, που δείχνει την ευτυχία "

Διαφάνεια στα κουτιά εικόνας - CSS-Κόλπα

Διαφάνεια στα κουτιά εικόνας - CSS-Κόλπα

Από το υποσέλιδο του σχεδιασμού v8 του CSS-Tricks. Προβολή υποσέλιδου επίδειξης (διαγραφή: και τα δύο; υπερχείλιση: κρυφό; μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; ύψος γραμμής: 1,3;) # υποσέλιδα-κουτιά ("

Καταργήστε τη γραμμή κύλισης από το Textarea στο IE - CSS-Κόλπα

Καταργήστε τη γραμμή κύλισης από το Textarea στο IE - CSS-Κόλπα

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

Δηλώστε "Βόμβες PDF" - CSS-Κόλπα

Δηλώστε "Βόμβες PDF" - CSS-Κόλπα

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

"Shake" CSS Keyframe Animation - CSS-Κόλπα

"Shake" CSS Keyframe Animation - CSS-Κόλπα

Αυτό προϋποθέτει τη χρήση ενός αυτόματου επιδιορθωτή. .face: hover (animation: goake 0,82s cubic-bezier (.36, .07, .19, .97) και τα δύο. μετασχηματισμός: translate3d (0, 0, 0); "

Στρογγυλεμένες γωνίες - CSS-Κόλπα

Στρογγυλεμένες γωνίες - CSS-Κόλπα

Πρότυπο: -moz-border-radius: 10px; -webkit-border-radius: 10px; ακτίνα περιγράμματος: 10px; / * μελλοντική δοκιμή * / -khtml-border-radius: 10px; / * για παλιά "

Κλίμακα στο Hover με μετάβαση - CSS-Κόλπα

Κλίμακα στο Hover με μετάβαση - CSS-Κόλπα

Φέρτε τα δικά σας προθέματα! .grow (μετάβαση: all .2s easy-in-out;) .grow: hover (μετασχηματισμός: κλίμακα (1.1);) "

Κορδέλα - CSS-Κόλπα

Κορδέλα - CSS-Κόλπα

Όλοι αγαπούν τις κορδέλες

.ribbon (μέγεθος γραμματοσειράς: 16 εικονοστοιχεία! σημαντικό; / * Αυτή η κορδέλα "

Ερώτημα μέσων εμφάνισης αμφιβληστροειδούς - CSS-Κόλπα

Ερώτημα μέσων εμφάνισης αμφιβληστροειδούς - CSS-Κόλπα

Για να συμπεριλάβετε γραφικά υψηλής ανάλυσης, αλλά μόνο για οθόνες που μπορούν να τα χρησιμοποιήσουν. Το "Retina" είναι "2x": @media (-webkit-min-device-pixel-ratio: 2), "

Διαχείριση μεγάλων λέξεων και διευθύνσεων URL (Αναγκαστική διακοπή, συλλαβισμός, έλλειψη κλπ) - CSS-Κόλπα

Διαχείριση μεγάλων λέξεων και διευθύνσεων URL (Αναγκαστική διακοπή, συλλαβισμός, έλλειψη κλπ) - CSS-Κόλπα

Υπάρχουν φορές που μια πολύ μεγάλη συμβολοσειρά κειμένου μπορεί να ξεχειλίσει το κοντέινερ μιας διάταξης. Για παράδειγμα: οι διευθύνσεις URL συνήθως δεν έχουν κενά σε αυτά, οπότε "

Αντιστροφή κειμένου - CSS-Κόλπα

Αντιστροφή κειμένου - CSS-Κόλπα

Για γλώσσες από δεξιά προς τα αριστερά, μπορείτε να αλλάξετε την προεπιλεγμένη διάταξη από αριστερά προς τα δεξιά στα περισσότερα προγράμματα περιήγησης απλά μέσω του χαρακτηριστικού dir. κείμενο στα δεξιά προς τα αριστερά "

Αφαίρεση διακεκομμένου περιγράμματος CSS-Κόλπα

Αφαίρεση διακεκομμένου περιγράμματος CSS-Κόλπα

Α (περίγραμμα: 0;) Προσέξτε να αφαιρέσετε τα στυλ περιγράμματος από τους συνδέσμους, καθώς είναι μια δυνατότητα χρηστικότητας. Εάν το κάνετε, φροντίστε να ορίσετε σαφή στυλ εστίασης. Αν"

Κατάργηση περιθωρίων για το πρώτο / το τελευταίο στοιχείο - CSS-Κόλπα

Κατάργηση περιθωρίων για το πρώτο / το τελευταίο στοιχείο - CSS-Κόλπα

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

Ερωτήματα πολυμέσων για τυπικές συσκευές - CSS-Κόλπα

Ερωτήματα πολυμέσων για τυπικές συσκευές - CSS-Κόλπα

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

Κατάργηση γκρι επισήμανσης όταν πατάτε συνδέσμους στο Mobile Safari - CSS-Κόλπα

Κατάργηση γκρι επισήμανσης όταν πατάτε συνδέσμους στο Mobile Safari - CSS-Κόλπα

Webkit-tap-highlight-color: rgba (0,0,0,0); Και έπειτα για να επιτρέψετε: ενεργά στυλ να λειτουργούν στο CSS σας σε μια σελίδα στο Mobile Safari: "

Κατάργηση περιγραμμάτων διακεκομμένων συνδέσμων - CSS-Κόλπα

Κατάργηση περιγραμμάτων διακεκομμένων συνδέσμων - CSS-Κόλπα

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

Κατάργηση κειμένου κουμπιού στον IE7 - CSS-Κόλπα

Κατάργηση κειμένου κουμπιού στον IE7 - CSS-Κόλπα

HTML: .. ή .. Go CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Αρνητική-εσοχή μόνο δυστυχώς δεν λειτουργεί για την αφαίρεση κειμένου "

Συντομογραφίες ποιότητας - CSS-Κόλπα

Συντομογραφίες ποιότητας - CSS-Κόλπα

Ελαφρώς ελαφρύτερο χρώμα (υποθέτοντας ότι το κείμενό σας είναι μαύρο), διακεκομμένο κάτω περίγραμμα και δρομέας ερωτηματικού. Αυτό έχει γίνει μια κάπως τυποποιημένη προσέγγιση, "

PNG Hack / Fix για IE 6 - CSS-Κόλπα

PNG Hack / Fix για IE 6 - CSS-Κόλπα

Για εικόνες φόντου CSS .yourselector (πλάτος: 200 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; φόντο: url (/folder/yourimage.png.webp) χωρίς επανάληψη; _ background: none; "

Κουμπί Perfect CSS Sprite / Sliding Doors - CSS-Κόλπα

Κουμπί Perfect CSS Sprite / Sliding Doors - CSS-Κόλπα

Μεγάλη νότα εδώ! Οι συρόμενες πόρτες είναι μια πολύ παλιά τεχνική. Είχε την ώρα του στο Διαδίκτυο, αλλά πιθανότατα δεν είναι ο πιο έξυπνος τρόπος να πάμε αυτές τις μέρες. Εχουμε"

Αποτρέψτε τα Υπερκείμενα και τις Συνδρομές από το να επηρεάζουν το ύψος γραμμής - CSS-Κόλπα

Αποτρέψτε τα Υπερκείμενα και τις Συνδρομές από το να επηρεάζουν το ύψος γραμμής - CSS-Κόλπα

Sup, sub (κάθετη-ευθυγράμμιση: βασική γραμμή; θέση: σχετική; κορυφή: -0,4em;) υπο (κορυφή: 0,4em;) "