Σκηνές βίντεο 2025, Ιανουάριος
Η εικόνα του Νικ είχε τρία διαφορετικά στρώματα για τα κεφάλια. Είναι απλά ελαφρώς διαφορετικές παραλλαγές. Θα μπορούσαμε να ανταλλάξουμε τις εικόνες με κινούμενα σχέδια "
Καθώς δούλευα σε αυτό το σχέδιο, κυκλοφόρησε το jQuery 1.8. Αυτό είναι ένα γρήγορο βίντεο για να βασιστείτε στο γεγονός ότι αυτό το είδος συμβαίνει όταν αναπτύσσετε ιστότοπους "
Έχουμε τη βασική κεφαλίδα της γκαλερί στη θέση της, αλλά λείπει από τους μικρούς μπλε ανθρώπους που έθεσε η Erica στην αρχική εικόνα. Το είχαμε μιλήσει στο "
Μόλις πήραμε την προσαρμοσμένη κεφαλίδα για τη Συλλογή, οπότε ενώ είμαστε στο, ας συνεχίσουμε να προσθέτουμε μια άλλη προσαρμοσμένη κεφαλίδα. αυτό έγινε από "
Υπάρχουν επτά διαφορετικές κύριες περιοχές του ιστότοπου πέρα από την αρχική σελίδα. Έτσι, προσέλαβα επτά διαφορετικούς εικονογράφους για να κάνω σχέδια. Αυτό είναι το πρώτο που είμαστε "
Μέχρι τώρα, έχουμε κάνει αλλαγές κώδικα σε τοπικό επίπεδο χωρίς να χρησιμοποιήσουμε κανένα είδος ελέγχου έκδοσης. Με την πολυπλοκότητα αυτού του ιστότοπου να αυξάνεται, αυτό γίνεται "
Έχουμε ένα καλό ξεκίνημα στον σχεδιασμό απόκρισης. Το μενού με τα μικρότερα μεγέθη οθόνης χωρίζεται σε πλέγμα 2x4. Ταιριάζει όμορφα στην οθόνη, αλλά "
Προσθέτουμε κάποια ανταπόκριση στο πλέγμα που έχουμε δημιουργήσει για το Gallery. Στις ευρύτερες οθόνες, το έχουμε ορίσει σε τέσσερις στήλες. Στη συνέχεια αρχίζουμε να προσθέτουμε "
Στα οποία καταλαβαίνουμε τα προβλήματα που αντιμετωπίζαμε με τη σωστή φόρτωση της διάταξης στηλών. Η επιδιόρθωση ήταν να αφαιρεθεί το CSS που έκανε το "
Αρχίζουμε να ανακαλύπτουμε τη διάταξη της περιοχής της Γκαλερί, κάτι που μου απασχολεί από την αρχή αυτής της διαδικασίας επανασχεδιασμού. Ως επί το πλείστον"
Έχουμε τη διάταξη πλέγματος για το Gallery. Δυστυχώς, η φόρτωσή του είναι λίγο απότομη και περίεργη. Αυτό συμβαίνει επειδή οι στήλες CSS3 έχουν σχεδιαστεί για να "
Έχουμε ήδη αφιερώσει λίγο χρόνο για να ξεριζώσουμε τις σελίδες έτσι ώστε η πλοήγησή μας να λειτουργεί (Βίντεο # 030) και μπορείτε να κάνετε κλικ γύρω από τον ιστότοπο, αλλά τι υπάρχει σε αυτά τα δευτερεύοντα "
Υπάρχει μια μακρά παράδοση δημοσκοπήσεων στο CSS-Tricks. Είναι διασκεδαστικοί, συγκεντρώνουν καλά σημαντικά δεδομένα και αυξάνουν τη σύνδεση των χρηστών στον ιστότοπο. Αφοσίωση FTW! "
Εγκαταλείψαμε ένα εντελώς αξιοπρεπές widget δημοσκόπησης. Η τυπογραφία είναι καθαρή και όλα τέλεια χρησιμοποιήσιμα. Ωστόσο, δεν ήταν ακριβώς συναρπαστικό ή διασκεδαστικό. Εμείς"
Η κορυφαία ενότητα στην κύρια πλαϊνή γραμμή του ιστότοπου ανήκει στο Treehouse, ως ο κύριος χορηγός του CSS-Tricks. Με βάση μια συνομιλία που είχα με τον Ryan Carson, "
Ο σχεδιασμός αναζήτησης λειτουργεί καλά μέχρι να φτάσουμε στο διάλειμμα μεγέθους "baby bear" (μικρό κινητό). Πρέπει να κάνουμε κάτι διαφορετικό εκεί. Κάνουμε λίγο χώρο "
Διότι νομίζω ότι για πρώτη φορά σε αυτήν τη σειρά, θα προσθέσουμε κάποια νέα πράγματα στο σχεδιασμό απευθείας δουλεύοντας στο πρόγραμμα περιήγησης (δεν ξεκινάμε στο Photoshop "
Η συμπίεση ενός προγράμματος περιήγησης για υπολογιστές πολύ στενή μπορεί να σας δώσει μια αόριστη αίσθηση για το πώς λειτουργεί μια απόκριση σχεδίασης, αλλά δεν είναι μια ακριβής αναπαράσταση ενός "
Η διαφήμιση που διαθέτουμε είναι ιδανική για οθόνες μεγάλου μεγέθους / επιφάνειας εργασίας, αλλά αρχίζει να αποτυγχάνει αρκετά γρήγορα σε μικρότερες οθόνες. Έχουμε ήδη κάποια σημεία διακοπής "
Έχουμε δημιουργήσει την εμφάνιση ενός κουμπιού σε κανονική κατάσταση, αλλά ένα κουμπί 3D όπως αυτό επαινεί μια κατάσταση "ώθησης". Αυτό που κάνουμε είναι να προσθέσουμε ένα πιο σκούρο χρώμα στο "
Ξεκινάμε με την πρόθεση να μεταβούμε σε HTML & CSSing the Top Treehouse Ad που μόλις σχεδιάσαμε, αλλά φυσικά εκτροχιαζόμαστε μόλις ξεκινήσουμε "
Έχουμε τη σήμανση για τη διαφήμιση Treehouse στο επάνω μέρος της σελίδας, αλλά έχουμε κάποια δουλειά για το στυλ. Ξεκινάμε με το ίδιο το γραφικό του δέντρου. Είμαστε "
Έχουμε αφήσει μεγάλο μέρος του ανοιχτού χώρου στην κεφαλίδα. Από την αρχή, ήξερα ότι αυτό θα ήταν για τον κύριο χορηγό της CSS-Tricks, το Treehouse. Σε αυτό"
Έχουμε λίγο περισσότερη δουλειά για να ολοκληρώσουμε την περιοχή αναζήτησης. Περπατάμε για ένα δευτερόλεπτο καθώς παρατηρώ ότι δεν προσθέσαμε το τρισδιάστατο "
Παίρνουμε από εκεί που σταματήσαμε στο Video # 034 και συνεχίζουμε να χτίζουμε την περιοχή αναζήτησης. Αυτή τη φορά επικεντρωνόμαστε στην "ανοιχτή" κατάσταση αναζήτησης, κτίριο "
Παίρνουμε λίγο διάλειμμα από την αναζήτηση για να λύσουμε ένα μικρό πρόβλημα. Το "FOUT" είναι το "Flash Unstyled Text". Αυτό είναι φαινόμενο όπου @ font-face "
Τώρα που έχουμε Photoshop τι ελπίζουμε να επιτύχουμε με την περιοχή αναζήτησης, ξεκινήσαμε να το δημιουργούμε με HTML και CSS. Έχουμε ήδη τη γραμματοσειρά εικονιδίων μας "
Υπάρχει πολύ περιεχόμενο στο CSS-Tricks. Αυτό είναι ένα από τα πράγματα που καθιστά το σχεδιασμό λίγο δύσκολο. Ενώ μπορούμε να μείνουμε καθαροί με το σχεδιασμό, εμείς "
Αρχίζουμε να παίζουμε με την ενότητα ανάρτησης του ιστολογίου μας, παίζοντας με διαστήματα. Προσθέτουμε επίσης το μικρό χρωματισμένο τετράγωνο στην επάνω αριστερή γωνία της μονάδας, "
Σε αυτό το εξαιρετικά γρήγορο βίντεο προσθέτουμε όλο το CSS που είναι απαραίτητο για να βεβαιωθούμε ότι το τρέχον στοιχείο σελίδας στην κύρια πλοήγηση επισημαίνεται όταν αυτή η σελίδα είναι "