CSS3 και βοηθητικά εργαλεία…

Δεν υπάρχει πιο καλή περίοδος από αυτήν για να αρχίσουμε σιγά-σιγά να χρησιμοποιούμε όλο και περισσότερους CSS3 κανόνες. Οι καινούργιοι browsers είναι αρκετά ώριμοι για κάτι τέτοιο, οι mobile  browsers βρίσκονται σε εξίσου υψηλό επίπεδο, ενώ στους παλιότερους δεν πρόκειται να χαλάσει τίποτα, απλά δεν θα “βλέπουν” τα καινούργια καλούδια (δεν πρόκειται να χαλάσει κάτι).

Το μόνο αρνητικό στην παραπάνω υπόθεση είναι πως στις περισσότερες περιπτώσεις είτε το συντακτικό είναι κάπως δύσκολο στην εκμάθηση (κάθε αρχή και δύσκολη), είτε χρησιμοποιούνται διάφορα browser prefixes για να λειτουργήσουν σωστά, είτε οι κανόνες είναι αρκετά “visual”, οπότε θέλουμε να βλέπουμε άμεσα στον browser το αποτέλεσμα, και όχι να προσπαθούμε να μαντεύουμε τις ρυθμίσεις.

Παρακάτω έχω μαζέψει κάποια online εργαλεία που χρησιμοποιώ για την γρήγορη επίλυση των παραπάνω περιπτώσεων. Έχουμε και λέμε λοιπόν :

  • CSS3 Please! : Ένα απλό αλλά πολύ περιεκτικό site για να αντιγράψετε εύκολα και γρήγορα τους CSS3 κανόνες που θέλετε (μαζί με όλα τα browser prefixes). Γρήγορο, minimal και “to the point”. Είναι συνήθως ο πρώτος μου σταθμός όταν ψάχνω κάποιο prefix για CSS3 κανόνα.
  • CSS3 Generator : Εξίσου καλό εργαλείο, ωστόσο μερικές φορές πρέπει να κάνεις κάποια click παραπάνω για να πάρεις αυτό που θέλεις…
  • Font Squirrel : Απλά το καλύτερο εργαλείο για μετατροπή γραμματοσειρών σε web fonts (@font-face). Δεν έχω χρησιμοποιήσει ποτέ μου άλλο εργαλείο γι’ αυτήν την δουλειά.
  • Layer Style : Ένα πολύ-εργαλείο που προσφέρει γραφικό περιβάλλον (σε στυλ “Photoshop”) για την δημιουργία των κανόνων μας, αλλά και live preview! Πολύ έξυπνη ιδέα και υλοποίηση, που θα βοηθήσει πολλούς γραφίστες και όχι μόνο…
  • Drop Shadow Generator : Πιο εξειδικευμένο στις σκιές, ωστόσο τα έτοιμα presets του είναι φανταστικά, ενώ μπορείτε να δείτε και σε live preview το πως θα φαίνεται η σκιά σας. Προσωπικά το χρησιμοποιώ συχνά γιατί δεν μπορώ να προβλέψω με τίποτα το πως θα φαίνονται οι σκιές στον browser!

Έχετε να προσθέσετε κάποιο άλλο εργαλείο, τότε απλά αφήστε ένα comment 😉

Update : Προσθέτω ακόμα 2 πολύ καλά εργαλεία που συστήνει ο φίλος μου Γιάννης.

  • CSS3.0 Maker : Μια λύση “όλα σε ένα”, μιας και δημιουργεί κώδικα για τα πάντα, από border-radius μέχρι CSS animations. Μου αρέσει γιατί δείχνει και ποιοι browsers υποστηρίζουν τους CSS3 κανόνες.
  • Ultimate CSS Gradient Generator : Πολύ καλό εργαλείο για την δημιουργία gradients με πολλά presets και εύκολο UI.

Κάντε το blog σας διαθέσιμο σε όλα τα κινητά τηλέφωνα μέσα σε 5 λεπτά!

Δεν αστειεύομαι καθόλου, εάν έχετε κάποιο blog (με RSS feed φυσικά) μπορείτε πάρα πολύ γρήγορα και με απλές επιλογές να δημιουργήσετε την mobile έκδοση του στο Wirenode! Στο συγκεκριμένο site λοιπόν μπορείτε να δημιουργήσετε ένα account, στο οποίο δηλώνεται το blog σας, το feed του καθώς και τις επιλογές που θέλετε να έχει η mobile έκδοση του, όπως τι mobile πρότυπο θα ακολουθήσει (υποστηρίζει όλα τα γνωστά mobile πρότυπα, παλιά και καινούργια, όπως WAP/WML, XHTML mobile profile, XHTML basic, cHTML, standard HTML, κτλ.), καθώς και άλλες επιλογές όπως εάν θα εμφανίζονται images, κτλ. Μόλις ρυθμίσετε όλα τα παραπάνω, το νέο mobile-friendly blog σας είναι έτοιμο σε κάποιο url που σας δίνει το Wirenode.

Σύμφωνα με την Wirenode το mobile blog σας θα είναι προσβάσημο σε όλα τα κινητά τηλέφωνα, από παλιά Nokia μέχρι το iPhone, ενώ απ’ ότι κατάλαβα μπορείτε να δημιουργήσετε και πολλές διαφορετικές εκδόσεις του mobile blog σας με διαφορετικές ρυθμίσεις και πρότυπα. Την υπηρεσία δεν την χρησιμοποίησα ακόμα, αλλά δείχνει μια πολύ εύκολη και ενδιαφέρον λύση, ωστόσο πιστεύω πως το mobile internet είναι καταδικασμένο και ανούσιο αυτήν την στιγμή, μιας και τα κινητά τηλέφωνα έχουν καταφέρει (ή έστω θα καταφέρουν πολύ σύντομα) να έχουν browsers επιπέδου desktop computers, οπότε παλιότερες τεχνολογίες και πρότυπα (τύπου WAP) δεν έχουν καμία ελπίδα ή νόημα ύπαρξης πλέον. Γι’ αυτόν ακριβώς τον λόγο, κάντε το blog σας accessible και valid στην XHTML πρώτα και στην συνέχεια ασχοληθείτε με όλα τα άλλα…

Update : Μόλις ανακάλυψα και την υπηρεσία MoFuse, η οποία κάνει πάνω-κάτω ακριβώς την ίδια δουλειά! Όποιος έχει χρησιμοποιήσει κάποια από τις δύο, ας αφήσει ένα comment για το πώς του φάνηκαν…