Σκηνές βίντεο 2025, Ιανουάριος
Ο σχεδιασμός για σχόλια μπορεί να φαίνεται πολύ απλός. Και αυτό είναι! Αλλά νομίζω ότι το απλό είναι αποτελεσματικό σε αυτήν την περίπτωση. Τα σχόλια είναι τόσο σημαντικό μέρος του CSS-Tricks "
Αρχίζουμε να σκάβουμε εδώ στο Photoshop και να σχεδιάζουμε την περιοχή σχολίων. Ξεκινάμε από την κορυφή, που σημαίνει ότι τα άτομα σχολιάζουν οι ίδιοι (σε αντίθεση με το "
Ξεκινάμε κοιτάζοντας μερικές από τις επιπόλαιες δουλειές που έκανα πίσω από τα παρασκήνια, σαρκώνοντας μερικά πράγματα που έπρεπε να γίνουν. Όπως η προσθήκη στο υπόλοιπο του "
Είμαστε πολύ κοντά στο να ολοκληρώσουμε την κατασκευή της αρχικής σελίδας της περιοχής Snippets του ιστότοπου. Αμέσως, αρχίζουμε να αλλάζουμε πράγματα και να μπαίνουμε περισσότερα πράγματα στο "
Με τη σχεδίαση για την περιοχή των αποσπασμάτων "ολοκληρωμένη" - μπορούμε τώρα να προχωρήσουμε σε κάποια διαδραστικότητα (διαβάστε: JavaScript). Προσθέτουμε ένα σούπερ lame rollover για τους συνδέσμους στο "
Έχουμε τώρα ένα σχέδιο Photoshop για να δουλέψουμε από την αρχική σελίδα της περιοχής Snippets. Είναι πολύ πιο εύχρηστο από ό, τι πριν, αλλά διατηρεί το ουράνιο τόξο "
Ώρα να βουτήξετε στην περιοχή Snippets! Δηλαδή, η πραγματική περιοχή περιεχομένου της. Έχουμε ήδη την κεφαλίδα στη θέση της. Η περιοχή αποσπάσματος είναι αρκετά δημοφιλής. "
Σε αυτό το screencast ολοκληρώνουμε την ενότητα Almanac. Υπάρχει μια αρκετά σαφής ιεραρχία στο Almanac. Πηγαίνει: Αρχική σελίδα> Αρχική σελίδα Almanac> Ιδιοκτησία ή Επιλογέας> "
Ελάμε προς τα εμπρός μόνο λίγο εφηβικό εδώ. Πρόκειται για μια αρκετά ολοκληρωμένη σειρά screencast, αλλά είναι μόνο 40 ώρες περίπου και φυσικά αυτό το πραγματικό έργο "
Έχουμε ήδη εργαστεί τοπικά σε έναν τοπικό τομέα (v10.whatup). Τώρα ήρθε η ώρα να αρχίσετε να μετακινείτε στο WordPress. Θα συνεχίσουμε να δουλεύουμε τοπικά "
Έχουμε όλο το περιεχόμενο που χρειαζόμαστε σε αυτήν την έξοδο σελίδας και έχουμε την κεφαλίδα στη θέση της. Τώρα μπορούμε να ξεκινήσουμε το CSSin το περιεχόμενο στον σχεδιασμό που έχουμε κάνει "
Καθώς αρχίζουμε να δουλεύουμε στο WordPress, θα ήταν καλύτερο αν βάλουμε ένα ακριβές αντίγραφο της ζωντανής βάσης δεδομένων για να εργαστούμε τοπικά. Ορισμένοι ιστότοποι έχουν πράγματα όπως "
Τώρα που έχουμε αγωνιστεί να πάρουμε το κατάλληλο περιεχόμενο στην αρχική σελίδα του Almanac, μπορούμε να ανακαλύψουμε κάποιο πραγματικό στυλ με CSS. Αποφασίσαμε να πάμε "
Σε αυτό το screencast ασχολούμαστε σε μεγάλο βαθμό με το πορτοκαλί "Photostar" που κυριαρχεί το υποσέλιδο. Κάνουμε το αστέρι σε ένα ξεχωριστό αρχείο στο Photoshop, ώστε να μπορούμε να φτιάξουμε "
Η κεφαλίδα του Alamanc βγήκε, αυτή τη φορά από τον Giovanni Difeterici. Χρησιμοποιούμε πολλές τεχνικές που έχουμε ήδη δημιουργήσει για να ξεκινήσουμε "
Η προσαρμοσμένη εικόνα κεφαλίδας για την ενότητα βίντεο έχει εισέλθει, αυτή τη φορά από την Alyssa Nassner. Αφιερώνουμε λίγο χρόνο στην οργάνωση του αρχείου Photoshop και "
Σε αυτό το τελευταίο σενάριο δημιουργίας του υποσέλιδου, εργαζόμαστε στο κάτω μέρος του υποσέλιδου όπου βρίσκονται οι περιοχές CodePen και ShopTalk. Πρέπει να αλλάξουμε τον κώδικα HTML "
Σε αυτό το screencast εστιάζουμε στις γραμμές κάτω από τους συνδέσμους στο πάνω μέρος του υποσέλιδου. Κάπως σκοντάφτουμε να καταλάβουμε ποια πράγματα πρέπει "
Το κεφάλι αποσπάσματος μπήκε αυτή τη φορά από τον Ρέιγκαν Ρέι. Περνάμε λίγο χρόνο στο Photoshop αυτή τη φορά ανακατεύοντας τα πράγματα λίγο για να βεβαιωθούμε ότι "
Με τη δομή HTML για το υποσέλιδο στη θέση του, έχουμε ό, τι χρειαζόμαστε για να ξεκινήσουμε το στυλ και να κάνουμε αυτό το υποσέλιδο να μοιάζει με αυτό που σχεδιάσαμε στο Photoshop. "
Αυτή είναι η τελευταία από τη δουλειά του Photoshop που θα κάνουμε συγκεκριμένα για το υποσέλιδο πριν προχωρήσουμε στην κατασκευή του. Σε αυτό το screencast εμείς "
Εργαζόμαστε για τη δημιουργία ενός σχεδίου για το υποσέλιδο στο Photoshop. Γρήγορη υπενθύμιση: Δουλεύω στο Photoshop γιατί νιώθω πιο δημιουργικός εκεί πριν πηδήξω "
Καταλήγουμε σε κάποια ακόμη δουλειά του Photoshoppin σε αυτό το screencast, παρουσιάζοντας το κάτω μέρος του υποσέλιδου με συνδέσμους για τα δύο μεγαλύτερα άλλα έργα μου, το CodePen "
Ξεκινάμε το υπέροχο ταξίδι που είναι το υποσέλιδο! Το CSS-Tricks είχε πάντα ένα μεγάλο φανταχτερό υποσέλιδο και αυτό το σχέδιο δεν θα αποτελεί εξαίρεση. Δεν είναι καθαρά "
Με το σχεδιασμό μας για το υποσέλιδο όλα έτοιμα για χρήση στο Photoshop, μπορούμε να αρχίσουμε να το δημιουργούμε στο στατικό μας πρότυπο HTML και CSS. Το πρώτο βήμα είναι να δώσει "
Έχουμε μια άλλη ζώνη BSA για να ενταχθούμε στον ιστότοπο. Αυτό θα πρέπει να είναι λίγο πιο εύκολο γιατί έχουμε ήδη τη JavaScript και είναι απλώς "
Έχουμε ένα πρότυπο για το πώς θέλουμε να μοιάζουν οι ζώνες BuySellAds, οπότε ας αρχίσουμε να το χτίζουμε πραγματικά. Ο ιστότοπος BuySellAds παρέχει τον κωδικό που χρειαζόμαστε "
Το μόνο πράγμα που λείπει τώρα από την επικεφαλίδα των Φόρουμ τελωνείων είναι το μέρος που λέει στην πραγματικότητα "Φόρουμ"! Ο Νικ έγραψε ένα χέρι που κρατάει μια πινακίδα που σήμαινε "
Τώρα που γνωρίζουμε ακριβώς με ποιες ζώνες συνεργαζόμαστε, επιστρέφουμε στο Photoshop και κοροϊδεύουμε πώς θέλουμε να εμφανίζονται αυτές οι ζώνες διαφημίσεων. Έχουμε προηγούμενο για "
Όπως γνωρίζετε, μερικές από τις διαφημίσεις στο CSS-Tricks είναι "αυτοδιαχειριζόμενες", όπως ο κύριος χορηγός Treehouse. Το πήρα γιατί είναι μόνο ένα "