Σκηνές βίντεο 2025, Ιανουάριος

# 030: Διαγραφή σελίδων για πλοήγηση - CSS-Κόλπα

# 030: Διαγραφή σελίδων για πλοήγηση - CSS-Κόλπα

Έχουμε αυτές τις οκτώ καρτέλες πλοήγησης ανώτερου επιπέδου, αλλά το Home είναι το μόνο που "λειτουργεί". Ακριβώς έτσι ώστε να έχουμε μερικές σελίδες για να δουλέψουμε, ξεχωρίζουμε μερικές σελίδες για "

# 027: Επισήμανση σύνταξης κώδικα, Μέρος 1 - CSS-Κόλπα

# 027: Επισήμανση σύνταξης κώδικα, Μέρος 1 - CSS-Κόλπα

Από όσο θυμάμαι, χρησιμοποίησα το Google Code Prettify για να εφαρμόσω την επισήμανση σύνταξης στο μπλοκ κώδικα στα CSS-Tricks. Ξέρεις, πού σε μια γραμμή όπως "

# 028: Επισήμανση σύνταξης κώδικα, Μέρος 2 - CSS-Κόλπα

# 028: Επισήμανση σύνταξης κώδικα, Μέρος 2 - CSS-Κόλπα

Μόλις εγκαταστήσαμε το Prism.js και το λειτουργήσαμε. Σε αυτό το screencast βρίσκουμε ένα θέμα που ονομάζεται "Tomorrow Theme" και ενσωματώνουμε τα χρώματα στη σύνταξη "

# 026: Δημοσίευση τυπογραφίας, Μέρος 2 - CSS-Κόλπα

# 026: Δημοσίευση τυπογραφίας, Μέρος 2 - CSS-Κόλπα

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

# 025: Δημοσίευση τυπογραφίας, Μέρος 1 - CSS-Κόλπα

# 025: Δημοσίευση τυπογραφίας, Μέρος 1 - CSS-Κόλπα

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

# 023: Μετακίνηση της τυπογραφίας εκτός κανονικοποίησης - CSS-Κόλπα

# 023: Μετακίνηση της τυπογραφίας εκτός κανονικοποίησης - CSS-Κόλπα

Νομίζω ότι είναι πολύ ωραίο να έχουμε ένα μεμονωμένο αρχείο (.scss) που είναι για τη συντριπτική πλειοψηφία της τυπογραφίας στον ιστότοπο. Η κανονικοποίηση έχει αρκετά τυπογραφία "

# 024: Παίζοντας με τυπογραφία στο Typecast - CSS-Κόλπα

# 024: Παίζοντας με τυπογραφία στο Typecast - CSS-Κόλπα

Το Typecast (σε έκδοση beta κατά τη στιγμή αυτής της μαγνητοσκόπησης) είναι μια πραγματικά τακτοποιημένη εφαρμογή ιστού για παιχνίδι με τυπογραφία ιστού. Σας δίνει μια εξαιρετική διεπαφή για να παίζετε "

# 020: Ολοκλήρωση του πλέγματος και ρύθμιση μονάδων - CSS-Κόλπα

# 020: Ολοκλήρωση του πλέγματος και ρύθμιση μονάδων - CSS-Κόλπα

Συνεχίζοντας την ιδέα του "Don't Overthink It Grids", συνεχίζουμε τις υδρορροές στο πλέγμα χρησιμοποιώντας απλώς μια απλή επένδυση. Κρατάμε τον αριθμό γεμίσματος "

# 022: Εικόνες Flexy (Εικόνες και εικόνες) - CSS-Κόλπα

# 022: Εικόνες Flexy (Εικόνες και εικόνες) - CSS-Κόλπα

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

# 021: Σπάσιμο σε μέρη με δυνατότητα συμπερίληψης - CSS-Κόλπα

# 021: Σπάσιμο σε μέρη με δυνατότητα συμπερίληψης - CSS-Κόλπα

Τώρα που εκτελούμε έναν προσαρμοσμένο τοπικό τομέα, μπορούμε να χρησιμοποιήσουμε PHP. Το "P" στο MAMP είναι για "PHP" =). Χρησιμοποιώντας PHP σημαίνει ότι μπορούμε να χρησιμοποιήσουμε περιλαμβάνει. Για παράδειγμα: "

# 018: Κάνοντας χρήση του Έργου μας Πυξίδα - CSS-Κόλπα

# 018: Κάνοντας χρήση του Έργου μας Πυξίδα - CSS-Κόλπα

Θα μπορούσαμε να γράψουμε τα δικά μας Sass @mixins για να βοηθήσουμε με CSS3 πράγματα (όπως ντεγκραντέ), αλλά υπάρχει ένα πλαίσιο Sass που υπάρχει ήδη που ονομάζεται Compass που "

# 019: Δημιουργία ενός απλού πλέγματος - CSS-Κόλπα

# 019: Δημιουργία ενός απλού πλέγματος - CSS-Κόλπα

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

# 017: Ρύθμιση τοπικής διεύθυνσης URL με MAMP - CSS-Κόλπα

# 017: Ρύθμιση τοπικής διεύθυνσης URL με MAMP - CSS-Κόλπα

Σε αυτό το εξαιρετικά γρήγορο screencast, χρησιμοποιούμε το MAMP για να δημιουργήσουμε μια διεύθυνση URL που μπορούμε να χρησιμοποιήσουμε για τοπική ανάπτυξη. Αυτό είναι χρήσιμο για πολλούς λόγους: Μπορούμε να συνδέσουμε με το "

# 016: Χρήση ερωτημάτων πολυμέσων στο Sass - CSS-Κόλπα

# 016: Χρήση ερωτημάτων πολυμέσων στο Sass - CSS-Κόλπα

Παρουσιάζουμε την έννοια των ερωτημάτων @media στο CSS. Πολλά από αυτά που μας επιτρέπει να κάνουμε το Sass σε αυτό το έργο είναι να μείνουμε στεγνό (μην επαναλάβετε τον εαυτό σας). Κάναμε"

# 015: Προσθήκη εικονιδίων στην πλοήγηση με γραμματοσειρά εικονιδίου - CSS-Κόλπα

# 015: Προσθήκη εικονιδίων στην πλοήγηση με γραμματοσειρά εικονιδίου - CSS-Κόλπα

Ξεκινάμε με λίγο τροποποίηση του τύπου του λογότυπου, αλλά στη συνέχεια προσθέτουμε εικονίδια στο κύριο ναυτικό. Όταν σχεδιάζαμε την πλοήγηση στο Photoshop (Video "

# 014: Προσαρμοσμένες γραμματοσειρές με Typekit - CSS-Κόλπα

# 014: Προσαρμοσμένες γραμματοσειρές με Typekit - CSS-Κόλπα

Δημιουργήσαμε ένα νέο κιτ στο Typekit για το v10. Για επωνυμία, θα χρησιμοποιήσουμε το Proxima Nova Soft προς το παρόν και μερικές άλλες γραμματοσειρές που μοιάζουν με τις γραμματοσειρές HF&J στο "

# 012: CSS Πληκτρολόγηση κεφαλίδας / λογότυπου - CSS-Κόλπα

# 012: CSS Πληκτρολόγηση κεφαλίδας / λογότυπου - CSS-Κόλπα

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

# 013: CSSing the Navigation Structure - CSS-Κόλπα

# 013: CSSing the Navigation Structure - CSS-Κόλπα

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

# 011: Ομαλοποίηση του CSS Foundation - CSS-Κόλπα

# 011: Ομαλοποίηση του CSS Foundation - CSS-Κόλπα

Η κατάργηση του παράγοντα χρήστη (προεπιλογή) CSS από τα περισσότερα στοιχεία είναι συνήθως καλή ιδέα. Αυτό έχει γίνει από καιρό με "καθολικές" επαναφορές ή πράγματα όπως το Eric "

# 010: Έναρξη σύνταξης HTML - CSS-Κόλπα

# 010: Έναρξη σύνταξης HTML - CSS-Κόλπα

Ενώ βλέπουμε το πρότυπο Photoshop, γράφουμε αρχίζουμε να γράφουμε HTML για να περιγράψουμε αυτό που εξετάζουμε. Φυσικά χρησιμοποιούμε HTML5 όποτε κάνει "

# 007: Εικονίδια Photoshopping και κείμενο στην πλοήγηση - CSS-Κόλπα

# 007: Εικονίδια Photoshopping και κείμενο στην πλοήγηση - CSS-Κόλπα

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

# 009: Ρύθμιση του τοπικού τοπικού προγραμματισμού - CSS-Κόλπα

# 009: Ρύθμιση του τοπικού τοπικού προγραμματισμού - CSS-Κόλπα

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

# 006: Photoshop στην κύρια πλοήγηση - CSS-Κόλπα

# 006: Photoshop στην κύρια πλοήγηση - CSS-Κόλπα

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

# 005: Προσθήκη ελαφριάς διάστασης - CSS-Κόλπα

# 005: Προσθήκη ελαφριάς διάστασης - CSS-Κόλπα

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

# 008: Photoshopping το Module Pattern - CSS-Κόλπα

# 008: Photoshopping το Module Pattern - CSS-Κόλπα

Ολόκληρος ο ιστότοπος βασίζεται σε "modules". Κάθε μικρό πράγμα θα είναι κυριολεκτικά σε ένα κουτί (τόσο οπτικά όσο και στον κώδικα, τελικά). Εμείς"

# 003: Συνεδρία στρατηγικής περιεχομένου - CSS-Κόλπα

# 003: Συνεδρία στρατηγικής περιεχομένου - CSS-Κόλπα

Πρόκειται για μια ηχογράφηση μιας κλήσης Skype μεταξύ του Erin Kissane και του εαυτού μου. Η Έριν έγραψε το βιβλίο σχετικά με τη στρατηγική περιεχομένου, οπότε ήμουν τυχερός που τη βοήθησα και "

# 004: Ξεκινώντας από το Photoshop, την υφή φόντου και την κύρια επωνυμία - CSS-Κόλπα

# 004: Ξεκινώντας από το Photoshop, την υφή φόντου και την κύρια επωνυμία - CSS-Κόλπα

Ο σχεδιασμός στο πρόγραμμα περιήγησης είναι δροσερός και όλα, αλλά ξεκινώντας από το Photoshop με κρατά το πιο δημιουργικό μου όταν το χρειάζομαι περισσότερο: όταν βλέπω τον κενό καμβά. "

# 001: Λήψη αποθέματος περιεχομένου - CSS-Κόλπα

# 001: Λήψη αποθέματος περιεχομένου - CSS-Κόλπα

Καλως ΗΡΘΑΤΕ! Αυτό θα είναι αρκετά το ταξίδι, και όπως όλα τα ταξίδια, αυτό ξεκινά με ένα μόνο βήμα. Το πρώτο μας βήμα είναι να κάνουμε απογραφή λίγο "

# 002: Καθορισμός στόχων επανασχεδιασμού - CSS-Κόλπα

# 002: Καθορισμός στόχων επανασχεδιασμού - CSS-Κόλπα

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

35: Βελτιστοποίηση SVG με εργαλεία - CSS-Κόλπα

35: Βελτιστοποίηση SVG με εργαλεία - CSS-Κόλπα

Μιλήσαμε για τη βελτιστοποίηση του SVG με το χέρι ήδη. Κάντε χειροκίνητες επιλογές σχετικά με τη λεπτομέρεια και τι είδους πράγματα μπορούν να συνδυαστούν ή να καταργηθούν. Σε αυτό"