100+ πόροι CSS για σχεδιαστές ιστοσελίδων και προγραμματιστές

από τον Bradley Nice, Content Manager στο ClickHelp.com - εργαλείο τεκμηρίωσης λογισμικού

Ένας σοβαρός σχεδιαστής ιστοσελίδων / προγραμματιστής πρέπει να καλέσει για μια ικανότητα να γράψει καλό CSS. Το CSS είναι απλό, πολύ εύκολο να μάθει αλλά πολύ ισχυρή γλώσσα. Μόλις το μάθετε, μπορείτε να εκπλαγείτε από την ικανότητά του.

Σε περίπτωση που δεν είστε εξοικειωμένοι με το CSS, εδώ είναι ένα γρήγορο intro:

"Το CSS είναι μια ειδική γλώσσα που χρησιμοποιείται για το στυλ του περιεχομένου HTML. Το CSS ορίζει πώς θα εμφανίζονται τα στοιχεία HTML - χρώμα, μέγεθος, θέση, περίγραμμα, φόντο κ.λπ. "
© Team ClickHelp

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

Learning Tutorials, Sites και Βιβλία

Ιστοσελίδες: Codecademy, FreeCodeCamp.com, SoloLearn, Treehouse, Tutsplus, A to Z CSS, Dash, Το Hello World, Khan Academy, HTML5 από Ξυστό, Sitepoint, Usersnap

Βιβλία: HTML & CSS, Προγραμματισμός μετά από ώρες - CSS Tutorial

  • Ο βασικός κώδικας HTML και CSS του Chris Coyier (62 MB) - Πρέπει να παρακολουθήσετε βίντεο για απόλυτους αρχάριους. Σας διδάσκει τα πάντα, από την παραλαβή ενός επεξεργαστή κειμένου, τη σύνταξη της πρώτης σας σελίδας HTML και τη χρήση του CSS για στυλ.
  • Δημιουργία ενός γενικού φύλλου στυλ - Δεν χρειάζεστε διαφορετικό αρχείο CSS για διαφορετικές σελίδες, δημιουργείτε πάντα ένα μόνο αρχείο Global CSS για όλες τις ιστοσελίδες σας. Τα γενικά φύλλα στυλ μπορούν να εφαρμοστούν είτε σε ολόκληρο τον ιστότοπό σας είτε σε ένα υποσύνολο σελίδων και αυτό σημαίνει ότι χρειάζεται μόνο να ενημερώσετε ένα ή δύο αρχεία όταν πρέπει να αλλάξετε στυλ.
  • Βασικά στοιχεία του CSS - Κολλημένα στον κόσμο των ενσωματωμένων πινάκων και της απόρριψης σήμανσης; Χρησιμοποιώντας το CSS για να μορφοποιήσετε τα αρχεία σας (X) HTML, θα επωφεληθείτε από εσάς και τους επισκέπτες σας με πολλούς τρόπους. Μάθετε τα βασικά του κεφαλαίου CSS ανά κεφάλαιο σε απευθείας σύνδεση ή κατεβάστε και τα 18 κεφάλαια του CSS Basics σε ένα εκτυπώσιμο αρχείο PDF προς εκτύπωση.
  • Tutorial Φύλλων Στυλ Κατακερματισμού (CSS) - Μάθετε τη χρήση του CSS, ορίζοντας το μέγεθος της γραμματοσειράς, τα περιθώρια και την επένδυση. Προσδιορίστε τα στοιχεία HTML μέσω χαρακτηριστικών id και κλάσης.
  • CSS Tutorial - Περισσότερα CSS tutorials εδώ, από το μάθημα 1 έως 16 περιέχει σύντομη εισαγωγή και indepth tutorial σχετικά με το CSS, μαθαίνουν από τη χρήση χρωμάτων σε πλωτά στοιχεία.
  • HTML & CSS για αρχάριους - Πώς να ρυθμίσετε την ιστοσελίδα σας HTML, να δημιουργήσετε επικεφαλίδες και παραγράφους, να προσθέσετε λίστες, να αλλάξετε το μέγεθος της γραμματοσειράς, το χρώμα και τον τύπο χρησιμοποιώντας το CSS.
  • Μάθετε το HTML και το CSS σε έναν εύχρηστο οδηγό. - Απλός και ολοκληρωμένος οδηγός αφιερωμένος στην παροχή βοήθειας σε αρχάριους που μαθαίνουν HTML και CSS. Περιγράφοντας τις βασικές αρχές, αυτός ο οδηγός λειτουργεί μέσω όλων των κοινών στοιχείων του σχεδιασμού και της ανάπτυξης.

Παραπομπές και

  • Δείκτης ιδιοτήτων CSS - Αλφαβητικός κατάλογος κάθε ιδιότητας CSS.
  • CSS Στενός οδηγός - Ένα cheatsheet που καλύπτει τις βασικές μορφές στενογραφίας CSS.
  • CSS Sheets Cheat - Δύο cheat φύλλα από About.com - ένα βασικό και ένα για CSS διατάξεις.
  • Listamatic - Αυτός ο ιστότοπος προσφέρει παραδείγματα για τον τρόπο χρήσης του CSS για τη δημιουργία ριζικά διαφορετικών μορφών λίστας.
  • Οδηγός αρχαρίων από έναν καρυκευμένο σχεδιαστή CSS - Αυτή είναι μια τεράστια λίστα πόρων για αρχάριους CSS.
  • 5 Συμβουλές για την οργάνωση του CSS - Αυτό το άρθρο προσφέρει πέντε πολύ χρήσιμες μεθόδους για την καλύτερη οργάνωση των φύλλων στυλ (και επομένως πιο εύκολη επεξεργασία αργότερα).
  • Οι 5 συμβουλές CSS μου - Μια συλλογή πέντε απλών συμβουλών για τη δημιουργία καλύτερου CSS.
  • Quirks Mode και Strict Mode - Ένας οδηγός για τη λειτουργία quirks και την αυστηρή λειτουργία σε σύγχρονα προγράμματα περιήγησης.
  • CSS Sheet Sheet (V2) - Μια αναφορά CSS μιας σελίδας που περιλαμβάνει όλους τους επιλογείς CSS 2.1.
  • Core CSS: Μέρος 1 - Οδηγός αναφοράς 6 σελίδων για βασικά στοιχεία CSS από το Refcardz.
  • CSS Sheath Sheath Sheet Sheet (PDF) - Ένα φύλλο αναφοράς για τη μορφή στενογραφίας CSS.
  • Χρήση CSS (Cascading Style Sheets) - Ένας βασικός οδηγός για το CSS, συμπεριλαμβανομένων των πλεονεκτημάτων της χρήσης του CSS.
  • 5 τρόποι για να γράψετε αμέσως Καλύτερα CSS - Ορισμένες συμβουλές για τη σύνταξη καλού CSS που είναι τόσο αποτελεσματική όσο και αποτελεσματική.
  • Βελτιστοποίηση της δομής της ιστοσελίδας σας για εκτύπωση χρησιμοποιώντας το CSS - Οδηγός δημιουργίας φύλλων στυλ για εκτύπωση.
  • PrintStylesheets - Ένας άλλος οδηγός για τη δημιουργία φύλλων στυλ εκτύπωσης.
  • CSS Τυπογραφία: Τεχνικές Αντίθεση, Tutorials, και Βέλτιστες Πρακτικές - Μια μεγάλη συλλογή CSS τυπογραφικών πόρων.
  • Ισχυρές τεχνικές CSS για αποτελεσματική κωδικοποίηση - Μια συλλογή τεχνικών CSS, ιδεών και λύσεων για καλύτερη κωδικοποίηση CSS.
  • Επαναφορά των στυλ CSS με επαναφορά CSS - Ένας πλήρης οδηγός για την επαναφορά στυλ.
  • Σύμβαση διαρθρωτικής ονοματοδοσίας στο CSS - Ένα άρθρο σχετικά με την ονομασία στοιχείων με βάση το τι είναι, αντί για το πού βρίσκονται ή πώς φαίνονται.
  • Βελτίωση της αναγνωσιμότητας του κώδικα με τους οδηγούς στυλ CSS - Ένα άρθρο που καλύπτει πέντε τεχνικές που μπορείτε να χρησιμοποιήσετε για να καταστήσετε τον κώδικα πιο διατηρήσιμο και διαχειρίσιμο.
  • 70 ιδέες εμπειρογνωμόνων για καλύτερη κωδικοποίηση CSS - Μια συλλογή συμβουλών εμπειρογνωμόνων για τη βελτίωση του κώδικα σας.
  • CSS Float Theory: Τα πράγματα που πρέπει να γνωρίζετε - ένας οδηγός για την κατανόηση των πλωμάτων στο CSS.
  • Ο πλήρης οδηγός CSS - Ένας τεράστιος πόρος που καλύπτει σχεδόν όλα τα τμήματα του CSS.
  • Τυπογραφική Αντίθεση και Ροή - Ένα άρθρο που περιγράφει τα βασικά της δημιουργίας καλού τύπου με επαρκή τυπογραφική αντίθεση στο CSS.
  • Πώς να το μέγεθος κειμένου σε CSS - Ένας λεπτομερής οδηγός για το μέγεθος κειμένου CSS.
  • CSS Sheet Sheet - Ένα πολύ ολοκληρωμένο διαδικτυακό CSS φύλλο εξαπατήσει.
  • 13 Αρχές Εκπαίδευσης του CSS Ο καθένας πρέπει να ξέρει - Κατάλογος βασικών συμβάσεων CSS που πρέπει να γνωρίζετε.
  • Οδηγός πόρων - Αυτός είναι ο οδηγός πόρων CSS από το CSS Zen Garden.
  • CSS ομορφιά - μια περιοχή που προσφέρει CSS ειδήσεις, πόρους, και μια γκαλερί.
  • Χρήση συντομεύσεων CSS - Ένας οδηγός αναφοράς σε κάποια βασική συντομογραφία CSS.
  • Εγχειρίδιο προγραμματιστή ιστού - Πρόκειται για μια τεράστια συλλογή CSS και άλλων πόρων, όπως βιτρίνες, εργαλεία και πολλά άλλα.
  • Σχεδιασμός σε μια δεκάρα: 100 FreeBS CSS Resources - Μια μεγάλη συλλογή πόρων CSS, συμπεριλαμβανομένων άρθρων, tutorials, layouts και πολλά άλλα.
  • 15 ιδιότητες CSS που πιθανώς ποτέ δεν χρησιμοποιείτε (αλλά ίσως θα έπρεπε) - Αυτό το άρθρο καλύπτει δεκαπέντε ιδιότητες CSS που συχνά παραβλέπονται που πολλοί σχεδιαστές ίσως δεν γνωρίζουν καν.
  • 10 Αρχές των CSS Masters - Μια συλλογή από σπουδαίες αρχές και κατευθυντήριες γραμμές από κάποιους από τους κυρίους του CSS.
  • CSS Ειδικότητα: τα πράγματα που πρέπει να γνωρίζετε - ένας οδηγός για CSS ειδικότητα, μια από τις πιο δύσκολες έννοιες CSS να κατανοήσουν.
  • Επίλυση 5 κεφαλαίων CSS Commons - Οδηγός αντιμετώπισης προβλημάτων CSS όπως το σφάλμα διπλού περιθωρίου του IE6 και αναποτελεσματικά στυλ.

Μαθήματα και Τεχνικές

  • 20 Χρήσιμοι πόροι για τη μάθηση Σχετικά με το CSS3
  • CSS3 Unleashed - Συμβουλές, Κόλπα και Τεχνικές
  • 20 πολύ χρήσιμα CSS3 Tutorials
  • CSS3 Συναρπαστικές λειτουργίες και δυνατότητες: 30+ Χρήσιμα Tutorials
  • CSS από το Ground Up - Αυτό είναι ένα πολύ βασικό φροντιστήριο για να ξεκινήσετε με το CSS που σας καθοδηγεί στη δημιουργία της πρώτης βασικής ιστοσελίδας σας με το CSS. Υποθέτει ότι το άτομο που διέρχεται το σεμινάριο έχει ελάχιστες ή καθόλου γνώσεις σχετικά με τον τρόπο κωδικοποίησης μιας ιστοσελίδας και είναι μια μεγάλη πηγή για αρχάριους.
  • 53 Τεχνικές CSS που δεν μπορείτε να ζήσετε χωρίς - Αυτή είναι μια τεράστια συλλογή τεχνικών CSS για τα πάντα, από τα μενού έως τις φόρμες για εκτύπωση φύλλων στυλ.
  • CSS Shadows Drop - Ένα σεμινάριο σχετικά με τον τρόπο δημιουργίας σκιών στις εικόνες που χρησιμοποιούν το CSS.
  • Selectutorial - CSS Selectors - Ένας βασικός οδηγός για τους επιλογείς CSS και πώς λειτουργούν.
  • Τεχνικές πλοήγησης CSS - Μια συλλογή 37 διαφορετικών σχεδίων πλοήγησης που χρησιμοποιούν το CSS.
  • CSS Τεχνικές που χρησιμοποιώ όλη την ώρα - Μια συλλογή τεχνικών CSS Christian Montoya βρίσκει εξαιρετικά πολύτιμη.
  • CSS Techniques Roundup - 20 συμβουλές και κόλπα CSS - Μια συλλογή τεχνικών CSS, συμπεριλαμβανομένων των στρογγυλεμένων γωνιών και των αναδυόμενων παραθύρων CSS.
  • CSS Συμβουλές και κόλπα - Μια συλλογή από χρήσιμες, βασικές τεχνικές CSS.
  • Master Stylesheet: Η πιο χρήσιμη τεχνική CSS - Ένα master φύλλο στυλ που χρησιμοποιείται για την εκκαθάριση και την επαναφορά των προεπιλογών του προγράμματος περιήγησης.
  • Παρουσιάζοντας τα αρχεία υπερσύνδεσης με το CSS - Ένα γρήγορο φροντιστήριο για την προσθήκη εικονιδίων τύπου συνδέσμου με χρήση του CSS που είναι συμβατό με τα IE7, Safari και Firefox.
  • Δέκα τεχνάσματα CSS που ίσως δεν γνωρίζετε - Καλύπτει συμβουλές όπως στενογραφία γραμματοσειράς CSS, αντικατάσταση εικόνας και κάθετη ευθυγράμμιση με το CSS.
  • Δέκα περισσότερα κόλπα CSS που ίσως δεν γνωρίζετε - Αυτό το άρθρο καλύπτει τα πράγματα όπως το block vs. inline στοιχεία, ο καθορισμός ελάχιστου πλάτους σελίδας και το αόρατο κείμενο.
  • Μετατροπή μιας λίστας σε μια γραμμή πλοήγησης - Ένα εξαιρετικό φροντιστήριο για τη δημιουργία μιας γραμμής πλοήγησης από μια λίστα με στυλ.
  • Ενεργοποίηση των λιστών στα δέντρα - Πώς να δημιουργήσετε μια μη τακτοποιημένη λίστα πολλαπλών επιπέδων με τη μορφή ενός εγγράφου ή δέντρου σελίδων.
  • Ανασυγκρότηση ιστοσελίδας με CSS - Πώς να ξαναφτιάξετε μια ιστοσελίδα με διάταξη CSS.
  • Σύνθετες διατάξεις CSS: Βήμα προς βήμα - Ένα βήμα προς βήμα φροντιστήριο για τη δημιουργία μιας σύνθετης διάταξης των 3 στηλών.
  • Δημιουργία διάταξης CSS από την αρχή - Ένας πλήρης οδηγός για την οικοδόμηση ενός site με βάση το CSS από το έδαφος.
  • CSS Tutorial - Ένα πλήρες σεμινάριο από το W3Schools.
  • Stylesheets - Μια άλλη πολύ ολοκληρωμένη συλλογή tutorial CSS.
  • Fancy Paragraphs με CSS - Ένα σεμινάριο για τη δημιουργία ειδικών μορφών παραγράφων.
  • Ακόμα πιο στρογγυλεμένες γωνίες με CSS - Μια τεχνική για τη δημιουργία στρογγυλεμένων γωνιών που υποστηρίζει τη διαφάνεια PNG και άλφα.
  • Uberlink CSS List Menus - Ένα σεμινάριο για τη δημιουργία μιας γραμμής πλοήγησης που συμπεριφέρεται σαν ένα μενού αλλαγής εικόνας αλλά χρησιμοποιεί μόνο δύο εικόνες και τονίζει την τρέχουσα σελίδα.
  • Πώς να προσθέσετε μεταβλητές στα αρχεία σας CSS - Οδηγός για την εφαρμογή μεταβλητών στο CSS χρησιμοποιώντας την PHP και την επανεγγραφή του URL του Apache.
  • 15+ Τεχνικές και εργαλεία για την κωδικοποίηση CSS σε Cross-Browser - Αυτό το άρθρο καλύπτει περισσότερες από 15 συμβουλές για τη δημιουργία συμβατού CSS κώδικα.
  • CSS Centering - Διασκέδαση για όλους! - Οδηγός για το κεντράρισμα CSS σε διατάξεις, συμπεριλαμβανομένων των κεντρικών διαστάσεων υγρών.
  • Απόλυτη τοποθέτηση στο εσωτερικό της σχετικής τοποθέτησης - Οδηγός για την τοποθέτηση των παιδικών στοιχείων απολύτως εντός ενός σχετικού γονικού στοιχείου.
  • Faux Absolute Positioning - Οδηγός για μια προσέγγιση τοποθέτησης που συνδυάζει τα καλύτερα χαρακτηριστικά τόσο της πλεύσης όσο και της απόλυτης τοποθέτησης.
  • Κάθετη ευθυγράμμιση για λίστες πλοήγησης με πολλαπλές γραμμές - Οδηγός για την ευθυγράμμιση λιστών που χρησιμοποιούν την προσέγγιση του κινούμενου κουτιού.
  • Top 10 CSS Buttons Tutorial List - Μια συλλογή από δέκα από τα καλύτερα μαθήματα για τη δημιουργία κουμπιών CSS.
  • Mountaintop Corners - Δημιουργία στρογγυλεμένων γωνιών με CSS.
  • CSS Rounded Corners Roundup - Μια συλλογή από στρογγυλεμένες γωνιακές τεχνικές και σεμινάρια.
  • CSS Tricks for Custom Bullets - Οδηγός δημιουργίας προσαρμοσμένων στυλ για σφαίρες με CSS.
  • CSS Swag: Λίστες πολλαπλών στηλών - Οδηγός για τη δημιουργία σημασιολογικά-λογικής, ταξινομημένης λίστας που αναδιπλώνεται μέσω πολλαπλών κάθετων στηλών.
  • Βελτίωση της προβολής συνδέσμων για εκτύπωση - Εμφανίζει τον τρόπο με τον οποίο θα συμπεριληφθούν οι διευθύνσεις URL συνδέσεων στις εκτυπώσεις των σελίδων σας μετά το κείμενο αγκύρωσης σύνδεσης.
  • Advanced CSS Menu Trick - Ένα πολύ ωραίο προχωρημένο μενού με ένα αποτέλεσμα θόλωσης που χτίστηκε με CSS.
  • CSS μενού - Ένα σεμινάριο για τη δημιουργία μενού από ένθετες λίστες με CSS2 και χωρίς JavaScript.
  • CSS μενού με τα αναπτυσσόμενα μενού - Ένα σεμινάριο για τη δημιουργία ενός αναπτυσσόμενου μενού με καρτέλες με CSS.
  • Προηγμένο μενού CSS - Ένα σεμινάριο για τη δημιουργία ενός πραγματικά μεγάλου μενού CSS από το WebDesignerWall.
  • Κινούμενες οριζόντιες καρτέλες - Ένα σεμινάριο για τη δημιουργία οριζόντιων καρτελών μενού που ζωντανεύουν στην ανατροπή.
  • CSS Graphic Menu με Rollovers - Ένα εξαιρετικό φροντιστήριο για τη δημιουργία ενός μενού CSS με αποτέλεσμα ανατροπής.
  • Υβριδικά CSS Dropdowns - Ένα σεμινάριο για το πώς να δημιουργήσετε dropdowns CSS που υποβαθμίζονται με χαρά και είναι καλά δομημένα, μεταξύ άλλων.
  • Οδηγός αρχαρίων για το CSS - Ένας πλήρης οδηγός για τους νέους στο CSS.
  • Ξεκινώντας με το CSS: Μια πρακτική άσκηση - Ένας πολύ βασικός οδηγός για να ξεκινήσετε με το CSS.
  • Πώς να: CSS μεγάλο φόντο - ένα σεμινάριο για την εργασία με μεγάλο φόντο με CSS.
  • Η εξαιρετικά εκτεταμένη διασύνδεση CSS - Ένα πλήρες σεμινάριο για τη δημιουργία πολύ προσαρμόσιμων και προσαρμόσιμων ιστότοπων CSS.
  • Χρησιμοποιώντας το CSS για να κάνετε τίποτα: 50+ δημιουργικά παραδείγματα και τα μαθήματα - Μια συλλογή από περισσότερα από 50 μαθήματα για τη δημιουργία μοναδικών layouts CSS.
  • Γρήγορη και εύκολη ανάπτυξη CSS με το Firebug - Ένας οδηγός για τη χρήση του Firebug για τη βελτίωση των σχεδίων ιστού σας.
  • 10 Παραδείγματα ομορφιάς CSS Τυπογραφίας και πώς το έκαναν ... - Προσφέρει εξαιρετικά παραδείγματα CSS τυπογραφίας μαζί με μαθήματα για το πώς να δημιουργήσετε το καθένα.
  • 16 Χρήσιμα CSS γραφήματα και μπαρ Διάγραμμα Tutorials και τεχνικές - μια συλλογή των tutorials για τη δημιουργία CSS με βάση διαγράμματα και γραφήματα για την απεικόνιση των δεδομένων.
  • Καλύτερα αποσπάσματα αποσπάσματος: Μην επαναλάβετε τη σήμανση - Ένας οδηγός για τη δημιουργία αναφορών pull που δεν περιλαμβάνουν περιττές, επαναλαμβανόμενες σημάνσεις.
  • CSS Gradient Text Effect - Οδηγός δημιουργίας κλίσεων κειμένου για τις επικεφαλίδες σας.
  • 43 PSD σε XHTML, CSS Tutorials Δημιουργία διάταξης ιστού και πλοήγησης - Ένας τεράστιος κατάλογος tutorials για τη μετατροπή των σχεδίων Photoshop σε έγκυρα αρχεία CSS / XHTML.
  • CSS Image Maps - Ένα σεμινάριο για τη δημιουργία χαρτών εικόνας με CSS και XHTML.
  • Fluid Grids - Οδηγός για τη δημιουργία σχεδιαγράμματος υγρών πλέγματος.
  • Πώς να Debug CSS - Ένα σεμινάριο τεχνικών εντοπισμού σφαλμάτων για το CSS.
  • 10 Challenging But Awesome CSS Techniques - Ένας οδηγός για μερικές προηγμένες τεχνικές CSS που αξίζει να μάθουν.
  • 50+ Nice Clean CSS Tabs-Based Navigation Scripts - Μια μεγάλη συλλογή πλοήγησης με καρτέλες χρησιμοποιώντας το CSS.
  • 30 Εξαιρετικές τεχνικές και παραδείγματα CSS - Μια μεγάλη συλλογή από πολύ δροσερά εφέ CSS, μεταξύ των οποίων μια γκαλερί εικόνων hoverbox, ένα κολλητικό υποσέλιδο και ένα αποτέλεσμα ακορντεόν μόνο με CSS.
  • 101 Τεχνικές CSS όλων των εποχών Μέρος 1 - Μέρος 2 - Μια άλλη τεράστια συλλογή από μεγάλες τεχνικές CSS με μαθήματα για το καθένα.
  • Dead Center - Ένα σύντομο φροντιστήριο για το πώς να τοποθετήσετε κάτι στο κέντρο ενός παραθύρου του προγράμματος περιήγησης (τόσο κατακόρυφα όσο και οριζόντια).
  • Υγρές διατάξεις ο εύκολος τρόπος - Ένα πλήρες φροντιστήριο για τη δημιουργία υγρών CSS σχεδιαγράμματα.

Πρότυπα και πλαίσια

  • Το 1 Gb CSS Grid - Αυτό είναι ίσως το απλούστερο και πιο συμπαγές σύστημα πλέγματος εκεί έξω, αλλά περιλαμβάνει ένα εργαλείο για την προσαρμογή του δικτύου πριν από τη λήψη.
  • CSS Zen Garden - CSS Το Zen Garden είναι ένα πλαίσιο HTML και CSS που δημιουργήθηκε για να παρουσιάσει την ποικιλία των σχεδίων που μπορούν να δημιουργηθούν χρησιμοποιώντας το CSS. Εκτός από το πλαίσιο, υπάρχουν τόνοι προτύπων και θεμάτων διαθέσιμα.
  • Τέλειες διανομές υγρών πολλαπλών στύλων CSS - Μια συλλογή υγρών διατάξεων που είναι συμβατές με το iPhone.
  • 960 Σύστημα πλέγματος - Σύστημα πλέγματος CSS βασισμένο σε μια βασική διάταξη πλάτους 960 pixel.
  • Δωρεάν πρότυπα CSS - ένας ιστότοπος που προσφέρει περισσότερα από 200 πρότυπα CSS που έχουν κυκλοφορήσει με την άδεια Creative Commons Attribution 2.5.
  • Νίκαια και δωρεάν πρότυπα CSS - Δώδεκα πρότυπα για να ξεκινήσετε με σχέδια με βάση το CSS, συμπεριλαμβανομένου ενός δυναμικού κεντρικού πλαισίου, τεσσάρων δυναμικών στηλών και σταθερών κεντρικών σχεδίων κουτιού.
  • Little Boxes - Μια συλλογή αρχείων CSS για μια ποικιλία σχεδίων.
  • Πρωτότυπο με το πλέγμα CSS 960 - Οδηγός για τη δημιουργία mockups του δικτυακού τόπου χρησιμοποιώντας το Grid 960.
  • Δημιουργία πρωτοτύπου με πρότυπο αρχικής σελίδας στυλ περιοδικού με το πλαίσιο CSS Blueprint - Ένας πολύ χρήσιμος οδηγός για τη δημιουργία σχεδίων τύπου περιοδικών και πλέγματος με Blueprint.

Γκαλερί και βιτρίνες

  • CSS Stars - Μια συλλογή που προσφέρει μερικές δωδεκάδες σχεδίων με βάση το CSS για την εξέτασή σας.
  • CSS Based - Μια τεράστια γκαλερί CSS με χιλιάδες σχέδια.
  • CSS Drive - Μια κατηγοριοποιημένη συλλογή CSS.
  • CSS Mania - Μια συλλογή CSS που έχει περάσει εδώ και πέντε χρόνια.
  • CSSelite.com - Μια κατηγοριοποιημένη συλλογή σχεδίων CSS.
  • CSS Creme - Μια τεράστια γκαλερί από ιστοσελίδες με χρώμα, κατηγορία ή σχεδιαστή που περιλαμβάνει επίσης μαθήματα και ειδήσεις.
  • csswebsite - Μια συλλογή που σας επιτρέπει να φιλτράρετε ανά κατηγορία, ημερομηνία ή χρώμα.
  • 40 Όμορφα Dark CSS Website Designs - Μια θέση στο gallery που προσφέρει μερικά μεγάλα σκοτεινά σχέδια που χτίστηκαν με CSS.
  • Το καλύτερο του CSS Design 2008 - Μια άλλη θέση στο gallery που παρουσιάζει τα καλύτερα σχέδια CSS του 2008.
  • CSS Gallery Gallery - Μια συλλογή CSS με καταχωρήσεις καταχωρημένες χρονολογικά. Τα σχέδια περιλαμβάνουν από το 2004 μέχρι σήμερα.

Εργαλεία

  • Firebug - Ένα plugin Firefox που σας επιτρέπει να προβάλετε και να επεξεργαστείτε το CSS και άλλο κώδικα απευθείας μέσα στον Firefox.
  • Aardvark - Μια επέκταση του Firefox που σας επιτρέπει να βλέπετε κάθε στοιχείο HTML και κλάση ή id.
  • CSSViewer 1.0.3 - Μια επέκταση του Firefox που σας επιτρέπει να προβάλετε τις ιδιότητες CSS σε οποιαδήποτε ιστοσελίδα.
  • GridFox - Μια επέκταση του Firefox για την υποβοήθηση του σχεδιασμού διάταξης πλέγματος με την επικάλυψη ενός πλέγματος σε οποιονδήποτε ιστότοπο.
  • CodeBurner - Ένα plugin για Firefox ή Firebug που κάνει το υλικό αναφοράς HTML και CSS διαθέσιμο στο πρόγραμμα περιήγησης.
  • IzzyMenu - ένας ελεύθερος δημιουργός μενού CSS που υποστηρίζει τη δημιουργία υποδιαιτήσεων DHTML drop down.
  • Spanky Corners - Μια στρογγυλεμένη γωνιακή γεννήτρια κουτιού.
  • CleanCSS - Ένας μορφοποιητής και βελτιστοποιητής CSS.
  • Επιλογή προγράμματος περιήγησης CSS - Ένα χρήσιμο εργαλείο για την ενεργοποίηση των επιλογών CSS με βάση το πρόγραμμα περιήγησης του επισκέπτη.
  • Compressor CSS - Συμπιεστής αρχείων CSS.
  • CSS Generator Layout - Μια απλή, online γεννήτρια CSS που δημιουργεί ένα βασικό πλαίσιο διάταξης.
  • CSSTidy - Ένας προγραμματιστής και βελτιστοποιητής CSS με δυνατότητα ανοιχτής πηγής.
  • CSS Compressor CSS Drive - Ένα εργαλείο συμπίεσης CSS που έχει βασική και προηγμένη λειτουργία, ανάλογα με τις ανάγκες σας.
  • Tabifier - Προσθέτει εσοχές στα αρχεία κώδικα.
  • CSSFly - Πρόγραμμα επεξεργασίας CSS και XHTML βασισμένο σε πρόγραμμα περιήγησης που λειτουργεί σε πραγματικό χρόνο.
  • Λίστα-O-Matic - Ένα εργαλείο για τη δημιουργία μενού πλοήγησης που βασίζονται σε λίστα με το CSS.
  • Markup Maker - Δημιουργεί ένα έγκυρο έγγραφο πλαισίου XHTML / HTML με τα αναγνωριστικά σελίδας που εισάγετε.
  • CSSMate - Ένας διαδικτυακός συντάκτης CSS.
  • CSS Type Set - Μια γεννήτρια τυπογραφίας CSS.
  • Construct 0.5 - Ένα οπτικό εργαλείο για τη δημιουργία σχεδίων με βάση το πλαίσιο Blueprint.
  • PXtoEM.com - Εργαλείο μετατροπής μεγέθους pixel σε EM.
  • Οι συντάκτες CSS Reviewed - Μια συλλογή από κριτικές μερικών από τους πιο δημοφιλείς συντάκτες CSS.
  • YAML Builder - Ένα οπτικό εργαλείο για τη δημιουργία σχεδίων YAML.
  • Gridinator - Ένας οικοδόμος διάταξης διάταξης CSS.
  • Κατάλογος των εργαλείων CSS - Μια τεράστια λίστα των εργαλείων CSS για τα πάντα, από τις γραμματοσειρές έως τους βελτιστοποιητές.
  • 50 Εξαιρετικά Χρήσιμα και Ισχυρά Εργαλεία CSS - Μια λίστα με μερικά μεγάλα εργαλεία CSS, μαζί με λίγο για το καθένα.

Ειδικά ιστολόγια ιστοτόπων CSS και ιστότοπων ειδήσεων

  • CSS-Tricks - Ένα blog που αφιερώνεται στο CSS από τον Chris Coyier.
  • Ultimate CSS - Αν και δεν έχει ενημερωθεί σε λίγους μήνες, αυτό το blog εξακολουθεί να προσφέρει μερικές μεγάλες αρχειοθετημένες αναρτήσεις.
  • CSS Βοήθεια Pile - Μια αυξανόμενη συλλογή CSS tutorials και πόρων.

Να εχετε μια καλη μερα!

Bradley Νίκαια,
Διαχείριση περιεχομένου στο ClickHelp.com - το καλύτερο ηλεκτρονικό εργαλείο τεκμηρίωσης για τους πωλητές του SaaS